【简介】
在开发中，有一些代码段的使用频率是非常高，或者有些只是偶尔用到，但是属性又很难记，那么这里把它做一个总结，方便查阅。
【将超出的部分 变成
...
】
代码：
[CSS]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | .line1 { width: 100px; display: block; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
效果：
【超出
3
行显示省略号】
[CSS]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 | .line2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} |
效果：
【美化
checkbox
，
radio
】
Css
代码
[CSS]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | label { font-size: 12px; cursor: pointer; } label i { font-size: 12px; font-style: normal; display: inline-block; width: 12px; height: 12px; text-align: center; line-height: 12px; color: #fff; vertical-align: middle; margin: -2px 2px 1px 0px; border: #2489c5 1px solid; } input[type="checkbox"], input[type="radio"] { display: none; } input[type="radio"] + i { border-radius: 7px; } input[type="checkbox"]:checked + i, input[type="radio"]:checked + i { background: #2489c5; } input[type="checkbox"]:disabled + i, input[type="radio"]:disabled + i { border-color: #ccc; } input[type="checkbox"]:checked:disabled + i, input[type="radio"]:checked:disabled + i { background: #ccc; } |
Html
代码：
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <label><input type="checkbox"><i>✓</i>复选框</label><br><label><input type="checkbox" checked><i>✓</i>复选框</label><br><label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br><label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br><label><input type="radio" name="abc"><i>✓</i>单选框</label><br><label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br><label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br><label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br> |
效果：
【清除浮动】
[CSS]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | .clearfix:after,.clearfix:before { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}/* IE 6/7 */ .clearfix { zoom: 1; } |
