CSS-补充拾遗漏

一、clearfix

 clearfix用来清除浮动的样式

其中visibility：hidden 隐藏并且不占据高度。

    <style>
        .c:after{
            content:'111';
            display:block;
            clear:both;
            visibility:hidden
        }
    </style>

 

二、hover

  操作hover 后，item的数据 。 overflow：hidden  超出边界后隐藏  visibility: hidden  隐藏

.ele:hover{
            border:2px solid red;
        }  
.ele:hover .ele-item{
            color:red;
 }
    .touch{
            width:200px;
            height: 200px;
            voerflow:hidden;
            position:relative;
        }
        .touch .content{
            position:absolute;
            top:0;
            left:0;
            right:0;
            buttom:0;
            background: rgba(0,0,0,6);
            
            color:white;
            text-align:center;
            visibility:hidden;
        }
       
        .touch:hover .center{
            visibility:visible
        }

三、 a 包含img

  a 包含img的时候，图片会有一个边框，需要设置为0

   <style>
    img{
        border:0;
    }
    </style>
</head>
<body>
<a herf="www.baidu.com">
    <img style="height:300px;width:400px;"src="1.jpg">
</a>

 

四、Important

 样式从上现在顺序。如果样式有重叠，采用就近原则。但是在一些情况中，需要应用先加载的样式

    .c1{
      font-size:32px;
      background-color:red;
    color:white !import;
    
    }

 

五、CSS布局讲解

     1：overflow ：auto

     2：position： absolute

 

六、Input 和图标

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .user{
            position:relative;
            width:250px;
        }
        .user .ren{
            position:absolute;
            top:8px;
            left:190px;
        }
    </style>
</head>
<body>
<div class="user">
    <input type = "test">
    <span class = "ren">aa</span>
</div>
</body>
</html>

 

七、模态对话框

 margin 为负值的时候，向上、向左移动。

 

弹框分为3个部分。

基础页面、遮罩层、弹出层

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

 <style>
     body{
         margin:0px;
     }
     .model{
         position:fixed;
         top: 0;
         lef:0;
         right:0;
         bottom:0;
         background:rgba(0,0,0,0)
         z-index:2;

     }
     .content{
         height:300px;
         width:400px;
         background-color:white;
         position:fixed;
         top:50%;
         left:50%;
         margin-left:-200px;
         margin-top:-150px;
         z-index:3

     }
 </style>
</head>
<body>



<div style="height:2000px;background-color:red">
    <h1>adsfasfs</h1>
        <h1>adsfasfs</h1>
        <h1>adsfasfs</h1>
        <h1>adsfasfs</h1>
        <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>
        <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>    <h1>adsfasfs</h1>

<div class = "model"></div>
    <div class = "content"></div>

</div>

</body>
</html>

 

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .left{
 9             float:left;
10         }
11         .wrap{
12             height:22px;
13             width:150px;
14             background-color:#dddddd;
15             border:1px solid #ddd;
16         }
17 
18         .wrap .minus{
19             height:22px;
20             width:22px;
21             line-height:22px;
22             text-align:center;
23 
24         }
25         .wrap .plus{
26             height:22px;
27             width:22px;
28             line-height:22px;
29             text-align:center;
30 
31         }
32 
33         .wrap .count input{
34             padding:0px;
35             border:none;
36             width:104px;
37             height:22px;
38             border-left:1px solid #dddddd;
39             border-right:1px solid #dddddd;
40 
41         }
42         .wrap .count input:focus{
43             border:2px;
44         }
45     </style>
46 </head>
47 <body>
48 <div class = "wrap">
49     <div class = "minus left">-</div>
50     <div class = "count left">
51         <input type="text" class = 's'>
52     </div>
53     <div class = "plus left">+</div>
54 </div>
55 
56 </body>
57 </html>
练习加减
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin:0px;
 9         }
10         .model{
11             position: fixed;
12             top:0;
13             bottom:0;
14             left:0;
15             right:0;
16             background-color: rgba(0,0,0,0.4);
17             z-index:2;
18         }
19 
20         .content{
21             height:300px;
22             width:400px;
23             background-color:white;
24             position:fixed;
25             left:50%;
26             top:50%;
27             z-index:3;
28             margin-top:-150px;
29             margin-left:-200px;
30         }
31     </style>
32 </head>
33 <body>
34 <div style="height:2000px;background-color:red" >
35     <h1>aaaa</h1>
36     <h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1><h1>aaaa</h1>
37 
38     </div>
39 
40 <div class = "model">
41 
42 
43 </div>
44 <div class = "content">
45 
46     </div>
47 </body>
48 </html>
联系模态窗体

 

posted @ 2016-08-13 16:31  咖啡茶  阅读(87)  评论(0)    收藏  举报