一.clear
清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ /*善用after和defore*/ content: "111"; /*注意加引号*/ clear: both; display: block; visibility: hidden; /*隐藏并有高度*/ height: 0; /*去掉高度*/ } .c{ width: 100px; /*height: 100px;*/ background-color:red; } .c .item{ float:left; width:30px; background-color: green ; } </style> </head> <body> <div class='c clearfix'> <div class='item'>123</div> <div class='item'>456</div> </div> <div class="test">内容</div> </body> </html>
避免每次都写标签clear:both来清除浮动
二.hover
样式一：
为伪类加边框效果
<!DOCTYPE html> <html lang="en"> <!--伪类1--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} .ele{ border: 2px solid transparent; } .ele:hover { border: 2px solid red; } .ele:hover .ele_item{ color: red; } </style> </head> <body> <div class="ele"> <div class="ele_item"> 123 </div> test </div> </body> </html>
加图片文字
<!DOCTYPE html> <html lang="en"> <!--伪类2--> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main{ width: 200px; height: 169px; overflow: hidden; position: relative; } .main .content{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background-color: #666666; opacity: 0.7; text-align: center; visibility: hidden; } .main:hover .content{ visibility: visible; } .main .content .c2{ color: red; } </style> </head> <body> <div class="main"> <div class="images"><img src="a.png"></div> <div class="content"> <div>test</div> <div class="c2">ttttt</div> </div> </div> </body> </html>
Z-index可被用于将在一个元素放置于另一元素之后
三.position
规定元素的定位类型
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
属性值
例 ：
<!DOCTYPE html> <html lang="en"> <!--position--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .main{ background-color: whitesmoke; height: 800px; } .main .pos{ position: fixed; right: 10px; bottom: 10px; width: 50px; height: 50px; background-color: rosybrown; } .main .pos2{ position: relative; background-color: burlywood; width: 800px; margin: 0 auto; height: 100px; } .main .pos2 .little_div{ position: absolute; background-color: darksalmon; width: 100px; height: 30px; left: 0; bottom: 0; } </style> </head> <body> <div class="main"> <div class="pos2"> <div class="little_div"></div> </div> <div class="pos"></div> </div> </body> </html>
relative与absolute并用
四.实现小尖角
通过设置边框实现小尖角效果，如
<!DOCTYPE html> <html lang="en"> <!--下拉尖角--> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid green; border-left: 30px solid transparent; display: inline-block; } .down{ border-top: 30px solid green; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; display: inline-block; } .c1{ border: 30px solid transparent; border-top: 30px solid green; display: inline-block; margin-top: 40px; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid green; display: inline-block; margin-top: 10px; } </style> </head> <body> <div class="up"></div> <div class="down"></div> <div style="height: 100px;background-color: #666666"> <div class="c1"></div> </div> </body> </html>
五.图标
一般实现制作图标有三种方式：
- 图片（自定义）
- CSS实现
- fontawsome
本例引用第三方，fontawsome，网址：http://fontawesome.io/icons/
首先下载解压，引用，使用方法，例：
<!DOCTYPE html> <html lang="en"> <!--图标--> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> </head> <body> <span class="icon-dollar"></span> </body> </html>
六.important
CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!important，事情就会变得不一样
css定义中的用!important限定的定义却是优先级最高的
格式：
Tag：css !important
例：
<!DOCTYPE html> <html lang="en"> <!--important--> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ font-size: 16px; color: red; font-weight: bold; } .limit{ color: orchid !important; } </style> </head> <body> <div> <p>没应用样式</p> </div> <div > <a class="limit">应用了</a> <p>hello</p> </div> </body> </html>
七.overflow
规定溢出元素的首选滚动方法
例：
<!DOCTYPE html> <html lang="en"> <!--页面布局--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0px} .top{ background-color: #666666; height: 30px; } .center .center_left{ position: absolute; background-color: antiquewhite; width: 110px; left: 0; } .center .content{ position: absolute; background-color: #2459a2; top: 30px; left: 112px; right: 0; bottom: 0; overflow: auto; } </style> </head> <body> <div class="top"></div> <div class="center"> <div class="center_left"> <ul> <li>menu</li> <li>menu</li> <li>menu</li> <li>menu</li> <li>menu</li> </ul> </div> <div class="content"> <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1> <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1> <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1> <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1> </div> </div> </body> </html>
八.小实例
1.登录框
<!DOCTYPE html> <html lang="en"> <!--登录框--> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login_des{ position: relative; width: 200px; } .login_des .user_info{ width: 160px; height: 30px; padding-right: 30px; } .login_des .user_logo{ position: absolute; top: 8px; left: 170px; } </style> </head> <body> <div class="login_des"> <input type="text" class="user_info"> <span class="user_logo">R</span> </div> </body> </html>
2.提示框
边缘标签：relative，absolute
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> a {color: #428bca; text-decoration: none; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; background-color: #white; opacity: 0.8; } .modal { position: fixed; top: 30%; left: 50%; z-index: 1030; } .hide { display:none; } </style> </head> <body> <div> <input type="button" onclick="fadeIn();" value="模态对话框"/> </div> <div id="shade" class="modal-backdrop hide"> <div class="modal"> <img src="./images/loading_32.gif"/> </div> </div> <script > function fadeIn() { document.getElementById('shade').className = 'modal-backdrop'; } function fadeOut() { document.getElementById('shade').className = 'modal-backdrop hide'; } </script> </body> </html>
3.购物产品选择框
<!DOCTYPE html> <html lang="en"> <!--加减框--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} .left{ float: left; } .select{ background-color: #999999; height: 25px; width: 140px; border: 1px solid darksalmon; } .select .minus{ width: 20px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; } .select .plus{ width: 20px; height: 25px; line-height: 25px; text-align: center; cursor: pointer; } .select .content input{ width: 88px; height: 23px; border: 0; border-left: 1px solid darksalmon; border-right: 1px solid darksalmon; } </style> </head> <body> <div class="select"> <div class="minus left" onclick="Minus()">-</div> <div class="content left"> <input id = "count" type="text" name="num" value="0"/> </div> <div class="plus left" onclick="Plus()">+</div> </div> <script type="text/javascript"> // 定义函数 function Plus() { 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 Minus() { 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>