CSS拾遗+技巧
Posted MR大龙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS拾遗+技巧相关的知识，希望对你有一定的参考价值。
1、实现尖角符号。
这是内联inline-block标签独有的特性。
<!DOCTYPE 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: 30px solid transparent; /*transparent为透明色*/ margin-top:20px ; display: inline-block; border-top:30px solid #000000 ; } .c:hover{ margin-top:-10px ; border: 30px solid transparent; border-bottom:30px solid #000000; } .bb{ border-top:30px solid #000000 ; /*border-bottom: 30px solid #2c78d5;*/ border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; display: inline-block; } /*bb为自己想的方法，不需要改变自身的位置即可。*/ /*bb和b为长方形，其他为正方形*/ .bb:hover{ margin-top:15px ; border: 0; border-bottom: 30px solid #2c78d5; border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; } .a:hover{ } </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="bb"></div> <div style="background-color: #ff3021;height: 70px"> <div class="c"></div> </div> </body> </html>
鼠标临幸前:
鼠标临幸后：
2、实现输入框最后有小图标
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .login{ 8 position: relative; 9 /*父级标签 position为 relative时，子标签才会根据父级标签定位。否则一级一级找，找不到就根据body定位*/ 10 } 11 .login input{ 12 width: 170px; 13 padding-right: 20px; 14 /*达到输入到R处就不增长的效果*/ 15 height: 30px; 16 } 17 .ren{ 18 position: absolute; 19 /*根据父标签 来定位。*/ 20 top: 8px; 21 left: 180px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="login"> 27 <input type="text"> 28 <span class="ren">R</span> 29 </div> 30 </body> 31 </html>
输入前：
输入后：
文字不会超过“R”的位置，通过设置padding-right.
3、实现购物加减按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } /*公用left*/ .w{ width: 96px; border: 1px solid #ddd; height: 22px; } .jia{ text-align: center; line-height: 22px; height: 22px; width: 22px; cursor: pointer; /*鼠标放上去时，变成小手*/ } .text{ height: 22px; width: 50px; padding: 0; border: 0; border-left: 1px solid #ddd ; border-right: 1px solid #ddd ; } /*输入框左右2边各1px边框。*/ </style> </head> <body> <div class="w"> <div class="jia left">+</div> <input type="text" class="text left"> <div class="jia left">-</div> </div> </body> </html>
4、页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .top{ height: 48px; width: 100%; background-color: #7d7d7d; } .left{ position: absolute; top:48px; left: 0px; width: 180px; bottom: 0; background-color: #1dd537; } .right{ position: absolute; top:48px; right: 0px; left: 183px; bottom: 0; background-color: #1c6a9e; 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> <li></li> <li></li> </ul> </div> <div class="right"> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333python之路之css拾遗