本文共 5510 字，大约阅读时间需要 18 分钟。
继续CSS的常见使用。
例1. 输出一个购物车效果的text对话框
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .inp{ border: 0; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; height: 25px; margin: 0; padding: 0; float: left; } .sp{ display: inline-block; height: 25px; width: 25px; text-align: center; line-height: 25px; float: left; } </ style > </ head > < body > < div style = "border: 1px solid #dddddd;display: inline-block;" > < div class = "sp" >-</ div > < input class = "inp" type = "text" /> < div class = "sp" >+</ div > </ div > </ body > </ html > |
| 1 | <br> |
例2 如果图片挂了，可以通过<alt>自动用文字显示内容
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > img{ border: 0; } </ style > </ head > < body > < div > < div class = "item" > < a href = "http://www.etiantian.org" > < img src = "2.jp" alt = "图片" > </ a > </ div > </ div > </ body > </ html > |
效果图
例3 设置input标签的默认值
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < body > < textarea >123</ textarea > < input type = "text" value = "222" /> < select > < option >上海</ option > < option selected = "selected" >广州</ option > < option >北京</ option > </ select > 男：< input type = "radio" name = "g1" /> 女：< input type = "radio" name = "g1" checked = "checked" /> < input type = "checkbox" name = "c1" checked = "checked" /> < input type = "checkbox" name = "c1" /> < input type = "checkbox" name = "c1" checked = "checked" /> < input type = "checkbox" name = "c1" /> </ body > </ html > |
例4 !important 强制覆盖, 当冲突时，以!important的设置为准
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .hide{ display: none !important; } .c1{ color: red !important; } .c2{ color: green; } </ style > </ head > < body > < div class = "c1 c2" >red</ div > </ body > </ html > |
例5 class选择器还可以进一步根据属性选择，比如只有class='c1',alex='a'的标签才是红色
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .c1[alex='a']{ color: red; } </ style > </ head > < body > < div > < div class = "c1" alex = "a" >1</ div > < div class = "c1" alex = "b" >2</ div > < div class = "c1" >3</ div > < div class = "c1" alex = "a" >4</ div > </ div > </ body > </ html > |
例6 当一个标签使用fixed的时候，他会和没有使用的重叠在一起，因此在.pg-body里面指定了margin-top 48px (第一个标签的高度）以便隔开
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .pg-header{ position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: #2459a2; } .pg-body{ height: 2000px; margin-top: 48px; } </ style > </ head > < body > < div class = "pg-header" >header</ div > < div class = "pg-body" >body</ div > </ body > </ html > |
例7 利用外部relative，内部absolute的特性在input后面加个小图标
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .icon-name{ background-image: url('i_name.jpg'); height: 16px; width: 16px; display: inline-block; } .icon-pwd{ background-image: url('i_pwd.jpg'); height: 16px; width: 16px; display: inline-block; } </ style > </ head > < body > < div style = "width: 200px;position: relative" > < input style = "width: 180px;padding-right: 20px;" /> < span class = "icon-name" style = "position: absolute;top:2px;right: 0;" ></ span > </ div > < div style = "width: 200px;position: relative" > < input style = "width: 180px;padding-right: 20px;" /> < span class = "icon-pwd" style = "position: absolute;top:2px;right: 0;" ></ span > </ div > </ body > </ html > |
例8 after和 before的使用
当我们使用hover,after或者before的时候，当选择了对应的class，他会自动应用；一个常见场景是外部的div没有float，而内部的div有float，导致外部不能撑开，这个时候可以考虑在后面加个隐形的点，然后设置clear：both来取消漂浮
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .c1:hover{ background-color: #2459a2; } .c2:before{ content: '666'; } .c2:after { content: '777'; } .left{ float: left; } .item{ background-color: red; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } </ style > </ head > < body > < div class = "c1" >ddd</ div > < div class = "c2" >888</ div > < div style = "background-color: red" class = "clearfix" > < div class = "left" style = "height: 100px;background-color: green" >1</ div > < div class = "left" >2</ div > </ div > </ body > </ html > |
如果不使用clearfix，那么外层的div其实被绿色部分撑住了，不会包括2；可以在F12下面选中div查看范围来确认
列9 巧妙的设置小三角，注意inline-block的使用，把块级标签当做内联标签使用，同时又能设置高度
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title ></ title > < style > .icon{ display: inline-block; border-top: 15px solid green; border-right: 15px solid red; border-bottom: 15px solid transparent; border-left: 15px solid transparent; } </ style > </ head > < body > < div class = "icon" ></ div > </ body > </ html > |