CSS

CSS:层叠样式表

主要作用:

站在审美的角度对HTML网页进行美化！

HTML只能实现网页的结构。

css的四种引入方式 :

1.行内式(不建议使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一种增加css样式的方法，在标签中增加style属性-->
<div style="background-color: blue;  100px; height: 100px">我是第一块</div><br>
<div style="background-color: red;  100px; height: 100px">我是第二块</div><br>
</body>
</html>

View Code

2.嵌入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
<!--第二种增加css样式的方法，可以在head中增加style标签，style中通过选择器定位标签增加css样式-->
<div class="c1">我是红色</div><br>
</body>
</html>

View Code

3 链接式(用的最多)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第三种增加css样式的方法，使用css文件 引入css样式表-->
    <link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1">我是粉色</div><br>
</body>
</html>


c1.css文件为:
c1{
             background-color: pink;
              100px;
             height:100px;
         }



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式表的引用关系以标签为起始位置，由下而上的进行显示-->
    
    <link rel="stylesheet" href="c1.css">
    <style>
    .c1{
        background-color: red;
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>

<div class="c1" style="background-color: pink;  100px; height: 100px"></div>

</body>
</html>

View Code

4.导入式(不建议使用)

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style>

View Code

CSS选择器:

CSS选择器分为六种：

1、id选择器

2、class选择器

3、标签选择器

4、层级选择器（空格）

5、组合选择器（逗号）

6、属性选择器（中括号）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*id选择器*/
        #i1{
            background-color: #0000CC;
            width: 100px;
            height: 50px;
        }


    </style>
</head>
<body>

<div id="i1">id选择器</div>

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*class选择器*/
        .c1{
            background-color: red;
            width: 100px;
            height: 50px;
        }

        /*为什么有id和class两种选择器？*/
        /*id在html页面中，只允许出现1个同名id；但是class是可以重复的；*/
        /*实际前端开发中，主要用class进行定位的，因为多个标签可以同时引用一个css样式*/


    </style>
</head>
<body>

<div class="c1">class选择器</div>

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*标签选择器*/
        /*表示 这个页面下所有的div标签，都增加这个样式*/
        div{
            background-color: pink;
            width: 100px;
            height: 100px;
        }


    </style>
</head>
<body>

<div></div>  /*标签选择器*/

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*层级选择器*/
        /*表示div标签下的span标签使用这个样式*/
        div span{
            background-color: pink;
            width: 100px;
            height: 100px;
        }


    </style>
</head>
<body>

<div>
    <span>层级选择器</span>
</div>

</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*id组合选择器 id i1 i2 i3 共用一套css样式*/
        #i1, #i2, #i3 {
            background-color: #0000CC;
            width: 100px;
            height: 100px;
        }


        /* 组合选择器 class s1 s2 s3 共用一套css样式*/
        .s1,.s2,.s3{

        background-color: darkmagenta;

        height:48px;

        }


        /*最常用：class层级选择器*/
        .c2 span{
            background-color:blue;
            width: 100px;
            height: 100px;
        }



    </style>
</head>
<body>

    <!--id组合选择器-->
    <div id="i1"></div><br>
    <div id="i2"></div><br>
    <div id="i3"></div>


    <!-- class组合选择器 -->
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>

    <!--class选择器-->
    <div class="c2">
        <span>123</span>
    </div><br>
    <div class="c2">
        <span>456</span>
    </div><br>
    <div class="c2">
        <span>789</span>
    </div>

</body>
</html>

View Code

类选择器：给页面上的指定的类名的元素设置样式

伪类选择器：给页面上的元素设置样式，必须满足一定的条件，我们的伪类选择器

锚伪类

超级链接的不同状态

n 正常状态超级链接没有被访问 :link

n 访问过后状态超级链接已经被访问 :visited

n 鼠标放上状态鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover

n 激活状态鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active

伪类选择器都是带有冒号“:”

注意：

超级链接的不同状态它其实是有顺序。也就是说锚伪类选择器设置其实是有顺序。

如果不按照伪类选择器的顺序，那么样式就会失效。

顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”

超级链接的美化

我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。

一般情况下：

正常状态与访问过后的状态的样式设置为一样

当鼠标放上的时候给其设置另外一个颜色激活状态一般不会设置因为激活状态的时间太短

举例：

a:link,a:visited{去掉超级链接的下划线;设置一个颜色;}

a:hover{设置另外一个颜色;增加一张下划线;}

css属性操作:

 颜色属性
<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>

View Code

字体属性
font-size: 20px/50%/larger
  
font-family:'Lucida Bright'
  
font-weight: lighter/bold/border/                      #粗细
  
<h1 style="font-style: oblique">老男孩</h1>    #斜体

View Code

背景属性
background-color: cornflowerblue
  
background-image: url('1.jpg');
  
background-repeat: no-repeat;(repeat:平铺满)
  
background-position: right top（20px 20px）;
 
----简写----
background: #ffffff url('1.png') no-repeat right top;

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .back{
            border:1px solid red;
            width: 800px;
            height: 800px;
            background-image: url("meinv.png");
            background-repeat: no-repeat;    #不平铺满
            background-repeat: repeat-x;     #横向平铺满
        }

        .back{
            border:1px solid red;
            width: 800px;
            height:800px;
            background-image: url("2.jpg");
            background-repeat: no-repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="back">

    </div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</body>
</html>

View Code

文本属性
font-size:        10px;
 
text-align: center;        横向排列
 
line-height: 200px;        文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
 
vertical-align:－4px       设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
 
text-indent: 150px;        首行缩进
letter-spacing: 10px;      字符于字符之间的距离
word-spacing: 20px;        单词与单词之间的距离
text-transform: capitalize;    单词首字母大写

View Code

文本属性演示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        div{
            height:100px;
            background-color: aquamarine;
            text-align: center;   #水平居中
            line-height:100px;    #文本设置为和div一样的高度，显示居中
        }
    </style>
</head>
<body>
    <div>文本属性</div>
</body>
</html>

View Code

边框属性
border-style: solid;
   
border-color: chartreuse;
   
border- 20px;
 
-----------简写---------------
 
border: 30px rebeccapurple solid;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        .foo{
            width:200px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="foo"></div>
</body>
</html>

View Code

列表属性
list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
  
list-style          简写属性。用于把所有用于列表的属性设置于一个声明中
 
 
--------------------------------
 
#使用图像来替换列表项的标记:
 
ul {
     list-style-image: url('');
            }



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        ul,ol{
            list-style: none;   #取消列表前面的小图标
        }
    </style>
</head>
<body>
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
    <ol>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ol>
</body>
</html>

View Code

none
block
inline
inline-block
  
#none(隐藏某标签)  p{display:none;}
  
注意与visibility:hidden的区别：
  
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
  
  
#block(内联标签设置为块级标签)  span {display:block;}
注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　
  
  
#inline(块级标签设置为内联标签)  li {display:inline;}
  
  
#inline-block
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
    #outer{
            border: 3px dashed;
            word-spacing: -5px;
        }




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span,a{
            width:100px;
            height:100px;
        }
        span{
            background-color: yellow;
            display: inline-block;
        }
        a{
            background-color: firebrick;
            display: inline-block;
        }
        div{
        word-spacing: -5px;     #取消边距间隔
        }
    </style>
</head>
<body>
    <div>
        <span>span</span>
        <a href="#">a</a>
    </div>
</body>
</html>

word-spacing 取消边距间隔

View Code

外边距(margine)和内边距(padding)
margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；  
Border(边框):       围绕在内边距和内容外的边框。
Content(内容):     盒子的内容，显示文本和图像。

margine(外边距)
单边外边距属性：
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
  
简写属性:------------------
  
margin:10px 20px 20px 10px；
  
        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px
  
margin:10px 20px 10px;
  
        上边距为10px
        左右边距为20px
        下边距为10px
  
margin:10px 20px;
  
        上下边距为10px
        左右边距为20px
  
margin:25px;
  
        所有的4个边距都是25px

View Code

float属性
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
            font-size:0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

<div>footer</div>
</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }
       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }
       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }
    </style>
</head>
<body>
<div class="outer">
<div class="content"></div>
<div class="page-area">
             <ul>
                 <li><span class="current_page">1</span></li>
                 <li><a href="#" class="page-a">2</a></li>
                 <li><a href="#" class="page-a">3</a></li>
                 <li><a href="#" class="page-a">4</a></li>
                 <li><a href="#" class="page-a">5</a></li>
                 <li><a href="#" class="page-a">6</a></li>
                 <li><a href="#" class="page-a">7</a></li>
                 <li><a href="#" class="page-a">8</a></li>
                 <li><a href="#" class="page-a">9</a></li>
                 <li><a href="#" class="page-a">10</a></li>
                 <li><a href="#" class="page-a page-next">下一页</a></li>
             </ul>
</div>
</div>
</body>
</html>

padding(内边距)

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque; 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>
</html>

>>>> 解决方法：
overflow: hidden;

margin collapse（边界塌陷或者说边界重叠）

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>


把握住两点：1、元素是从上到下、从左到右依次加载的。

                 2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

清除浮动(推荐)

'''

    .clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容；
    content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;               <----加入的这个元素转换为块级元素。
    clear: both;                  <----清除左右两边浮动。
    visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。
                                       visibility:hidden;仍然占据空间，只是看不到而已；
    line-height: 0;               <----行高为0；
    height: 0;                    <----高度为0；
    font-size:0;                  <----字体大小为0；
    }
    
    .clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神
                                       奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。


整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="head clearfix"></div>

'''

解决父级塌陷

overflow:hidden

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

这些边框属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式

position(定位)
a. static

　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

b. position: relative／absolute

　　 position: relative

　　　　1. 参照物是元素之前文档流中的位置

　　　　2. 元素不脱离文档流(之前的空间位置依然存在)

 　　position: absolute　　　

　　 　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素

　　　　          那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框

                     而不论原来它在正常流中生成何种类型的框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }


        .div1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
         /*.div2{*/
            /* 300px;*/
            /*height: 300px;*/
            /*background-color: rebeccapurple;        */
             /*position: relative;*/
             /*top:100px;*/
             /*left:100px;*/
         /*}*/

         .div2{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
             position: absolute;
             top:100px;
             left:100px;
         }

         .div3{
            width: 300px;
            height: 200px;
            background-color: green;

        }


    </style>
</head>
<body>

<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>




</body>
</html>

relative absolute例子

position(定位)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }


        .item1{
            width: 200px;
            height: 200px;
            background-color: red;
        }


         .item2{
            width: 200px;
            height: 200px;
            background-color: yellow;
             position: absolute;
             top:200px;
             left:200px;
         }

         .item3{
            width: 200px;
            height: 200px;
            background-color: green;

        }
        .outer{
            border: 1px solid red ;
            position: relative;
        }

    </style>
</head>
<body>


<div class="item1"></div>

<div class="outer">
    <div class="item2"></div>
    <div class="item3"></div>
</div>




</body>
</html>

常用设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position:fixed; left:0;right:0;height:80px;background-color:red;z-index:1;"></div>
    <div style="position:fixed; left:0;right:0;height:80px;background-color:green;z-index:2;"></div>
</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .zc1{
        height: 2000px;
        background: red;
    }
    .zc2{
        position: relative;
        background-color:green;
        width:500px;
        height:200px;
        margin: 0 auto;
    }
    .zc3{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .zc{
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        background-color:violet;
        position: fixed;#右下角定位
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="zc1">
        <div class="zc2">
            <div class="zc3"></div>
        </div>
    </div>
    <div class="zc">返回顶部</div>
</body>
</html>

position: fixed;#右下角定位

inline #内联标签无法使用高度宽度

inline-block #内联可以使用高度宽度

line-height #内容高度

background-position #抠图
background:url(图片链接)

z-index #指定层级, 大的数在上面小的数在下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*======================================初始化=====================*/
            *{
             margin: 0;
             padding: 0;
                  }

            body{
                font-size: 12px;
            }

            a{
              text-decoration: none;
            }

        /*======================================header区域设置=====================*/
        .header{
               height: 44px;
               width: 100%;
               background-color: #2459a2;
               position: fixed;
               top:0;
               left: 0;
        }
        .header_content{
            width: 80%;
            height: 44px;
            background-color: #2459a2;
            margin: 0 auto;
            line-height: 44px;
            position: relative;
        }
/*======header区part1:logo ===========*/
             .logo{

                    float: left;
                    width: 121px;
                    height: 23px;
                    margin-top: 9px;
                }
/*======header区part2:action-menu =====*/

               .action-menu{
                    float: left;
                    margin-left: 30px;
                }

                .action-menu a.tb{
                            color: #c0cddf;
                            padding: 0 10px;
                            text-align: center;
                            margin-left: -3px;
                            display: inline-block;
                        }

                .action-menu a.tb:hover {
                    color: #fff;
                    background-color: lightslategrey;

                }

                 .action-menu a.active, .action-menu a.active:hover {
                                color: #fff;
                                background-color:#204982;;

                            }

/*======header区part3:key-search =====*/

                 .key-search{
                         margin-top: 5px;
                         float: right;
                    }


                 .key-search a.search-icon-box, .search-txt {
                        float: left;
                    }

                .search-txt {

                    color: #333;
                    line-height: 25px;
                    padding: 2px 2px 2px 5px;
                    height: 25px;
                    width: 91px;

                }
                .key-search a.search-icon-box {
                    border: 1px solid #e0e0e0;
                    background-color: #f4f4f4;
                    width: 30px;
                    height: 31px;
                    border-left: 0;
                }
                .key-search a.search-icon-box span.search-icon{
                    background: url("images/icon.png") no-repeat 0 -197px;
                    float: left;
                    height: 12px;
                    width: 11px;
                    margin-left: 10px;
                    margin-top: 9px;
                }

/*======header区part4:action-nav =====*/

                .action-nav {
                       float: right;
                       margin-right: 10px;
                    }

                 .action-nav a {
                        color: white;
                        padding: 14px 18px;

                    }

                .action-nav a:hover{
                    background-color: lightslategrey;
                    color: white;
                }
 /*======================================content区域设置=====================*/

             .content-box {
                    background-color: #ededed;
                    padding-top: 44px;
                    height: 100%;
                }

             .content {
                    width: 960px;
                    margin: 0 auto;
                    height: auto!important;
                    overflow: hidden;
                    min-height: 713px;
                    padding: 6px 28px;
                    background-color: #fff;
                    /*overflow: hidden;取消后看看效果*/
                }

        /*===============================响应式布局=====================*/
         @media(max-1050px) {


          .action-menu a.item{

              display: none;
              background-color: gold;
              border: dashed 1px rebeccapurple;

              color: black;
          }

             .action-menu a.active{

                 padding: 0 25px;

             }

             .action-nav{

                 float: left;

                 margin-left: 80px;

             }

             .key-search{
                 float: right;
                 margin-right: 100px;
             }
          .action-menu:hover a.item{
              display: block;
          }

         }
        @media(max-810px) {

             .key-search{
                 display: none;
             }

            .action-nav{
                display: none;
            }
        }
    </style>
</head>
<body>
    <!--header结构-->
    <div class="header">
         <div class="header_content">
               <div class="logo">
                   <a href="/"><img src="images/logo.png" alt=""></a>
               </div>
               <div class="action-menu">
                        <a href="#" class="tb active">全部</a>
                        <a href="#" class="tb item">42区</a>
                        <a href="#" class="tb item">段子</a>
                        <a href="#" class="tb item">图片</a>
                        <a href="#" class="tb item">挨踢1024</a>
                        <a href="#" class="tb item">你问我答</a>
               </div>
               <div class="key-search">

                    <form action="/" method="post">
                        <input type="text" class="search-txt">

                        <a href="#" class="search-icon-box" >
                            <span class="search-icon"></span>
                        </a>
                    </form>
               </div>
               <div class="action-nav">
                    <a href="#" class="register-btn">注册</a>
                    <a href="#" class="login-btn">登录</a>
               </div>
         </div>
    </div>
    <!--content结构-->
    <div class="content-box">
        <div class="content">
        </div>
    </div>
</body>
</html>

响应式布局

before after伪类：

p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:"hello";color:red}
p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:"hello"；color:red}

CSS优先级:

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
      1 内联样式表的权值最高       style=""-------------------1000；
　　 2 统计选择符中的ID属性个数。    #id    －－－－－－－－－－－－－100
　　3 统计选择符中的CLASS属性个数。 .class  －－－－－－－－－－－－－10
 4 统计选择符中的HTML标签名个数。     p     －－－－－－－－－－－－－-1

<html>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zc{
            background-color:#dddddd;
            border: 2px solid transparent;#鼠标移动静态改变颜色
        }
        .zc:hover{
            border: 2px solid red;#鼠标移动动态改变颜色
        }
        .zc:hover .zc-item{
            color:red
        }
    </style>
<body>
    <div class="zc">
        <div>123</div>
        <div class="zc-item">234</div>
    </div>
</body>
</html>

hover后加选择器#鼠标移动改变颜色

<!DOCTPYE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
    .a{
        border-top: 30px solid #000000;
        border-bottom: 30px solid #2c78d5;
        border-left: 30px solid #1dd537;
        border-right: 30px solid #ff3021;
        display: inline-block;
    }
    .b{
       border-top: 30px solid #000000;
       <!--border-bottom: 30px solid #2c78d5;-->
       border-left: 30px solid #1dd537;
       border-right: 30px solid #ff3021;
       display: inline-block;
    }
    .c{
            border-top:30px solid #000000 ;
            /*border-bottom: 30px solid #2c78d5;*/
            border-left:30px solid #1dd537 ;
            border-right: 30px solid #ff3021;
            display: inline-block;
     }
    .c:hover{
            margin-top:15px ;#离上边距距离
            border: 0;#边框为0实际是占用内存值的
            border-bottom: 30px solid #2c78d5;
            border-left:30px solid #1dd537 ;
            border-right: 30px solid #ff3021;
    }

    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>

内联inline-block标签独有的特性。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zc{
            border-top: 30px solid red;
            border-right: 30px solid black;
            border-bottom: 30px solid green;
            border-left: 30px solid blue;
            display: inline-block;
            <!--border-top: 30px solid transparent;#透明色-->
        }
    </style>
</head>
<body>
    <div class="zc"></div>
</body>
</html>

内联inline-block标签独有的特性。

实现尖角符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
    <div class="fa fa-amazon"></div>
</body>
</html>

图标,来源于 font-awesome

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login{
            position: relative;
            /*父级标签 position为 relative时，子标签才会根据父级标签定位。否则一级一级找，找不到就根据body定位*/
        }
        .login input{
            width:170px;
            padding-right: 20px;
            /*达到输入到zc处就不增长的效果*/
            height: 30px;
        }
        .zc{
            position: absolute;
             /*根据父标签 来定位。*/
            top: 8px;
            left: 180px;
        }
    </style>
</head>
<body>
    <div class="login">
        <input type="text">
        <span class="zc">zc</span>
    </div>
</body>
</html>

实现输入框最后有小图标

文字不会超过“zc”的位置，通过设置padding-right.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        body{
            margin: 0px;
        }
        .top{
            height: 40px;
            width: 100%;
            background-color: #7d7d7d;
        }
        .left{
            position: absolute;#绝对定位
            top: 40px;
            left: 0px;
            width: 180px;
            bottom: 0;
            background-color: #1dd537;
        }
        .right{
            position: absolute;
            top: 40px;
            right: 0px;
            left: 180px;
            bottom: 0;
            background-color: #1c6a9e;
            overflow: auto;/*如果内容超过自动长度，就会生成一个滚动条*/
            <!--这里最重要的就是：overflow: auto;如果内容超过自动长度，就会生成一个滚动条.-->
            <!--图上这个滚动条是属于蓝色背景的，非页面的滚动条-->
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="left">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="right">
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
    </div>
</body>
</html>

页面布局

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .z{
            color: red !important;
            font-size: 50px !important;
             /*当一句css代码 后边跟!important的时候，下边的普通代码改变不了*/
        }
        .c{
            color: green;
            font-size: 100px;
            /*试图改变颜色,字体大小*/
        }
    </style>
</head>
<body>
    <div class="z c">好好学习代码</div>
</body>
</html>

!important优先级

按照CSS执行顺序来说，文字应该是绿色，但文字为红色，因为被后边的“!important”保护

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
     /*分为3层 1、最底层内容  2、一个遮罩层 3、对话框层*/
        .zc{
            background-color: rgba(0,0,0,0.4);
            position: fixed;
            top: 0;
            left: 0;
            bottom:0;
            right:0;
            z-index: 1;
            /*优先级 比较低*/
        }
        .zc1{
            width: 300px;
            height:250px;
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: white;
            z-index:2; /*优先级 比较高 在最上边显示*/
            margin-left: -170px;
            margin-top: -125px;
            <!--margin的是框长宽的一半*/-->
        }

    </style>
</head>
<body>
    <div class="zc"></div>
    <div class="zc1"></div>
    <div class="zc2">zc</div>
</body>
</html>

实现模态对话框,可应用于刷新中图片展示功能,等

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .left{
            float: left;
            /*公用left*/
        }
        .zc{
            width: 96px;
            border: 1px solid #ddd;
            height: 22px;
        }
        .fuhao{
            text-align: center;
            line-height: 22px;
            height: 22px;
            width: 22px;
            cursor: pointer; /*鼠标放上去时，变成小手*/
        }
        .text{
            height: 20px;
            width: 50px;
            padding: 0;
            border: 0;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
             /*输入框左右2边各1px边框*/
        }
    </style>
</head>
<body>
<div class="zc">
    <div class="fuhao left">-</div>
    <input type="text" class="text left">
    <div class="fuhao left">+</div>
</div>
</body>
</html>

实现购物加减按钮