css 拾遗
1， 实现尖角
<style> .up{ border-top: 30px solid red; border-right:30px solid gold; border-bottom:30px solid teal; border-left:30px solid royalblue; display: inline-block; } </style> <div class="up"></div>
效果图：
<style> .down{ border-top: 30px solid teal; border-right: 30px solid #e20052; /*border-bottom: 30px solid transparent;*/ border-left: 30px solid rosybrown; display:inline-block; } </style> <div class="down"></div>
效果图：
内联 inline-block 是它独有的特性 .c1{ border: 30px solid transparent; border-top: 30px solid royalblue; display: inline-block; margin-top:40px; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid royalblue; margin-top: 0px; } <div style=" height:100px;background-color: rosybrown"> <div class="c1"></div> </div>
鼠标临幸前 
鼠标临幸后 
将鼠标指在该位置会出现动态效果
<style> .cc{ border-top:10px solid red; border-right: 10px solid bisque; border-left:10px solid cadetblue; display: inline-block; } .cc:hover{ border:0; border-right: 10px solid salmon; border-bottom: 10px solid red; border-left: 10px solid slateblue; } </style> <body> <div class="cc"></div> </body>
效果图： 鼠标临幸前 
鼠标临幸后
2，伪类 hover：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ele{ background-color: #ff0033; border: 2px solid white; } .ele:hover{ border: 2px solid black; } .ele:hover .ele-item{ color: rosybrown; } </style> </head> <body> <div class="ele"> <div>123</div> <div class ="ele-item">123</div> </div> </body> </html>
效果图: 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch{ width:405px; height: 266px; overflow: hidden; position: relative; } .touch .content{ position: absolute; top:0; left:0; right: 0; bottom: 0; /*background-color: #030911;*/ /*opacity: 0.6;*/ 透明度 background: rgba(0,0,0,0.6); 颜色 加透明 color: white; text-align: center; visibility: hidden; 隐藏 } .touch:hover .content{ visibility: visible; 可见 } .touch.content .c1{ font-size: 32px; padding: 30px 0; } </style> </head> <body> <div class="touch"> <div><img src="27.jpg"></div> <div class="content"> <div class="c1">价格 RMB </div> <div class="c2">500--1000(人民币)</div> </div> </div> </body> </html>
效果图 鼠标临幸前 
鼠标临幸后 
3.position 定位 ：
position：relative 相对的位置
position：absolute 根据最近的 relative 进行定位
position ：fixed 进行绝对定位， 根据窗口来定位，滑动滚轮，位置也不会改变
<body> <div style="height:1000px;background-color: rebeccapurple"> <div style="position: relative;background-color:white;width: 500px;height: 150px;margin: 0 auto"> <div style="position: absolute;left:0;bottom:0;width: 40px;height: 40px;background-color:palevioletred"> </div> </div> </div> <div style="position:fixed;right:10px;bottom: 10px;width: 40px;height: 40px;background-color: violet"></div> </body> </html>
效果图： 滚轮在顶端时 
滚轮在下面时 
4. 加减按钮：
cursor: pointer; 鼠标指针 为小手
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .wrap{ height: 22px; width: 150px; border: 1px solid #ddd; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; cursor: pointer; text-align: center; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; cursor: pointer; text-align: center; } .wrap .count input{ padding: 0; border: 0; width:104px; height: 22px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick="Minus();">-</div> <div class="count left"> <input id="count" type="text" value="1" /></div> <div class="plus left" onclick="Plus();">+</div> </div> </body> </html>
5。 输入框尾端的图标：
padding-right:30px;*达到输入到该位置处就不增长的效果*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .user{ position: relative; width: 250px; } .user input{ height: 30px; width: 170px; padding-right:30px; } .user .ren{ position: absolute; top:8px; left:180px } </style> </head> <body> <div class="user"> <input type="text"> <span class="ren">R</span> </div> </body> </html>
输入前 
输入后：
5.后台布局：
overflow: auto;如果内容超过自动长度，就会生成一个滚动条.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height: 50px; background: rebeccapurple; } .pg-body .body-menu{ position: absolute; width: 180px; background-color: #666666; left: 0; top: 50px; bottom: 0; } .pg-body .body-content{ position: absolute; top:48px; left: 182px; right: 0; bottom: 0; background-color: #8C0044; overflow: auto; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="body-menu"> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> </div> <div class="body-content"> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> <h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1> </div> </div> </body> </html>
7.模态对话框：
分为3层 底层 遮罩层 对话层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .top{ height: 2000px; background-color: #000fff; } .model{ position: fixed; top:0; bottom: 0; left:0; right: 0; background:rgba(0,0,0,.5); z-index: 2; } .countent{ height: 300px; width: 400px; background-color: white; position: fixed; top: 50%; left:50%; z-index: 3; margin-top: -200px; margin-left:-200px; } </style> </head> <body> <div class="top"> <h1>ss1</h1><h1>ss1</h1><h1>ss1</h1><h1>ss1</h1><h1>ss1</h1> </div> <div class="model"></div> <div class="countent"></div> </body> </html>
