HTML css

一、整体布局

1、创建一个html标签

2、创建三个div标签（分别是网页的头部，中间，和底部三部分）

3、一般都用class选择器

4、用css给body标签加个 margin:0（用于消除body边框和浏览器间的空白部分）

5、使div（块状）标签居中---------->先定义宽度，高度----------->margin:0 auto(自动离俩边距离相同)

6、list-style: none; 去除无序列表前面的符号（不能除去有序列表的）

7、padding：(1)上 (2)右 (3)下 (4)左 padding：(1)上下 (2) 左右

8、去掉a标签下面的下划线------------------>text-decoration = none

9、设置图片的高度用margin-top = xxxpx；

10、line-height = 行高 ------------>文本上下居中

11、text-again = center------------>文本左右居中

12、设置透明度方法：1、opacity：0-1

　　　　　　　　　　 2、background：rgba（0,0,0,0-1）

13、absolute 绝对定位，如果父标签中有reverse ，则相对于父标签进行定位，如果没有，则相对于body标签进行定位，脱离文档流，其下面的部分会顶上去

14、cursor: pointer; 变小手

二、标签种类

dispaly:inline 变内联标签 ----------无法使用高度，宽度

display:block 变块级标签

display:inline-block 变内联标签 -----可以使用高度，宽度

三、页面中的小图标（实际上是通过一面墙上的洞看图片中的图标，我们可以通过调节洞的大小和图片的位置来显示不同的样式）

1、先定义洞口的大小 width：18px height：16px

2、通过backgroud-position：值1 值2 通过调整值1，值2的大小来移动位置来得到不同的图片

四、z-index 在同一位置定义俩标签（都钉住，那么后面的标签会把前面的标签覆盖掉，这样我们就可以用z-index=xx的大小来决定位置）

五、子类漂浮，父类背景消失问题（由于子类漂浮，无法支撑起父类）

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>

子类漂浮，父类背景无

解决方法一：再新加一个标签，样式设置成clear = both

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

加clear = both

解决方法二：利用伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
        .w:after{
            content: "777";  #在标签后面加一个内联标签
            display: block;  #设置成块级标签，让其换行
            clear: both;     
            visibility: hidden;  #隐藏掉添加的部分
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>

利用伪类

六、hover

1、hover后加选择器点上去以后俩个不同的东西同时变化的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 50px;
            border: 2px solid transparent;
        }
        .c1:hover{   #表示点上去以后c1变化
            border: 2px solid rebeccapurple;      # rebeccapurple为透明色
        }
        .c1:hover .c2{    #表示点上去以后c1的变化的同时c2变化
            color: #e20052;
        }
    </style>
</head>
<body>
    <div class="c1">
        <span class="c2">123</span>
        <div class="c3">456</div>
    </div>
</body>
</html>

同时变化

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

2、鼠标点上去换背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position: relative;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .c2{
            position: absolute;   #设置以后脱离文档流
            left: 0;
            right: 0;               #对c1进行绝对定位，上下左右边距都为0，就设置成了一个和c1面积一样大小
            top: 0;
            bottom: 0;
            background: rgba(0,0,0, 0.7);   #设置背景色以及透明度
            visibility: hidden;             #隐藏这部分
        }
        .c1:hover .c2{                      # 点上c1后c2变化
            visibility: visible;            #鼠标点到c1上后c2显示
        }
        .c2{
            padding-left: 30px;
            padding-top: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="c1">
        <img src="1.png" alt="">
        <div class="c2">
            <div class="c3">ALEX</div>
            <div class="c4">1000</div>
        </div>
    </div>
</body>
</html>

覆盖

七、小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            border-left: 30px solid saddlebrown;
            border-right: 30px solid red;
            border-top: 30px solid yellow;
            border-bottom: 30px solid firebrick;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

小尖角

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            display: inline-block;
            border: 30px solid transparent;
            border-bottom: 30px solid firebrick;
        }
        .up:hover{
            display: inline-block;
            border: 30px solid transparent;
            border-top: 30px solid firebrick;
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>

使用伪类出现上下尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            display: inline-block;
            border: 30px solid transparent;
            border-bottom: 30px solid firebrick;
        }
        .up:hover{
            display: inline-block;
            border: 30px solid transparent;
            border-top: 30px solid firebrick;
            margin-top: 30px;  #保证变化前后在同一位置
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>

上下尖角变化实例

对于块级标签，margin-top 允许出现负值，一直往上走，可以脱离屏幕
对于内联标签，margin-top不允许出现负值，负值无效，不会脱离屏幕

八、页面中的小图标

1、自己用css画

2、用别人的 http://fontawesome.io/3.2.1/icons/ 下载并导入<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

九、目录格式

HTML文件放到APP中

css样式文件放到css文件夹中

js文件放到script文件夹中

下载的第三方插件放到plugin中

十、img默认是有边框的（如果加在a标签中间，a标签中的字体颜色会带给img的边框）

解决方法：在样式中加一个img{border = 0 } 把边框提前设置为0

十一、样式的就近原则

如果给同一个标签的同一类型，设置俩个不同的属性，那么就按照样式的就近原则进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            color: #e20052;
        }
        .c1{
            color: gold;  #金色离标签近，所以使用这里的样式
        }
    </style>
</head>
<body>
    <div class="c1 c2">qqqqqqqqqqq</div>
</body>
</html>

就近原则

如果想要是某一样式不被改变的话，就在样式中添加！important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            color: #e20052 !important;
        }
        .c1{
            color: gold;
        }
    </style>
</head>
<body>
    <div class="c1 c2">qqqqqqqqqqq</div>
</body>
</html>

!important

十二、布局

1、对于上图中的布局的方法一：固定上面标题部分和左半部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .head{
            position: fixed;
            height: 40px;
            width: 100%;
            background-color: #9f9f9f;
            z-index: 10;    #不定的话不知道谁在上面
        }
        .body .l{
            position: fixed;
            width: 200px;
            background-color: bisque;
            top: 40px;
        }
        .body .r{
            position: absolute;
            left: 210px;
            right: 0;
            top: 40px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="body">
        <div class="l">
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
        </div>
        <div class="r">
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

固定上左

2、对右半部分进行操作(overflow = "auto")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .head{
            height: 40px;
            width: 100%;
            background-color: #9f9f9f;
        }
        .body .l{
            width: 200px;
            background-color: bisque;
            top: 40px;
        }
        .body .r{
            position: absolute;
            left: 210px;
            right: 0;
            bottom: 0   #为了给显示的部分定义一个大小;
            top: 40px;
            background-color: black;
            color: white;
            overflow: auto; #超出的部分进行隐藏，滚动滑轮可见
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="body">
        <div class="l">
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
        </div>
        <div class="r">
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

右半部分溢出操作

十三、提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .td{
            position: relative;
        }
        .div{
            position: absolute;
            margin-top: 10px;
            margin-left: 20px;
        }
        .inp{
            margin-top: -3px;
            margin-left: -4px;
        }
        .c1{
            position: absolute;
            border: 10px solid transparent;
            border-right: 10px solid darkgrey;
            margin-left: -26px;
            margin-top: 0px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">删除</a></td>
            <td class="td">
                <div class="c1"></div>
                <input class="inp" type="submit" value="确定">
                <input class="inp" type="submit" value="取消">
            </td>
        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">删除</a></td>

        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">删除</a></td>
        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">删除</a></td>
        </tr>
    </table>
</body>
</html>

提示框

十四、输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{
            position: relative;
        }
        .c .c1{
            width: 150px;
            height: 20px;
            padding-left: 20px;
        }
        .c .c2{
            position: absolute;
            margin-left: 8px;
            margin-top: -22px;
        }
    </style>
</head>
<body>
    <div class="c">
        <input class="c1" type="text">
        <div class="c2">R</div>
    </div>
</body>
</html>

输入框

十五、模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{
            position: fixed;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            background:rgba(0,0,0,.7);
        }
        .d{
            position: fixed;
            width: 200px;
            height: 100px;
            background-color: white;
            top: 150px;
            left: 500px;
        }
    </style>
</head>
<body>
<input type="submit" value="模态对话框">
    <div class="c"></div>
    <div class="d">asasasa</div>
</body>
</html>

模态对话框

十六、输入框加减操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            height: 30px;
            width: 160px;
            border: 1px solid #dddddd;
        }
        .min{
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor: pointer;
        }
        .max{
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor: pointer;
        }
        .inp1{
            width: 98px;
            height: 30px;
            float: left;
            padding: 0;
            border: 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }

    </style>
</head>
<body>
    <div class="a">
        <div class="min" onclick="min();">-</div>
        <div class="inp">
            <input id="count" value="0" class="inp1" type="text">
        </div>
        <div class="max" onclick="max();">+</div>
    </div>

    <script type="text/javascript">
        function min() {
            var old_str= document.getElementById("count").value;
            var old_int = parseInt(old_str);
            var new_int = old_int - 1;
            document.getElementById("count").value = new_int
        }
    function max() {
            var old_str= document.getElementById("count").value;
            var old_int = parseInt(old_str);
            var new_int = old_int + 1;
            document.getElementById("count").value = new_int
        }
    </script>
</body>
</html>

输入框加减

posted on 2016-06-29 22:04 23云恋49枫阅读(319) 评论(0) 编辑收藏举报