前端开发者公司开发前端工具知乎|web前端开发季度总结
css中多用组合, 少用继承
代码片段 1
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>组合与继承</title>
<style>
.numberList1 {
border: 1px solid #ccc;
padding: 10px
}
.numberList1 li {
height: 20px;
line-height: 20px;
font-size: 12px;
}
.numberList2 {
border: 1px solid #ccc;
padding: 10px
}
.numberList2 li {
height: 20px;
line-height: 20px;
font-size: 16px;
}
.numberList3 {
border: 1px solid #ccc;
padding: 10px
}
.numberList1 li {
height: 20px;
line-height: 20px;
font-size: 12px;
color: red;
}
</style>
</head>
<body>
<ul class=”numberList1″>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
</ul>
<ul class=”numberList2″>
<li>444444444444</li>
<li>555555555555</li>
<li>666666666666</li>
</ul>
<ul class=”numberList3″>
<li>777777777777</li>
<li>888888888888</li>
<li>999999999999</li>
</ul>
</body>
</html>
可以改成
代码片段 2
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>组合与继承</title>
<style>
.numberList {
border: 1px solid #ccc;
padding: 10px
}
.numberList li {
line-height: 20px;
height: 20px;
}
.f12 {
font-size: 12px;
}
.f16 {
font-size: 16px;
}
.red {
color: red;
}
</style>
</head>
<body>
<ul class=”numberList f12″>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
</ul>
<ul class=”numberList f16″>
<li>444444444444</li>
<li>555555555555</li>
<li>666666666666</li>
</ul>
<ul class=”numberList red f12″>
<li>777777777777</li>
<li>888888888888</li>
<li>999999999999</li>
</ul>
<ul class=”numberList red f16″>
<li>777777777777</li>
<li>888888888888</li>
<li>999999999999</li>
</ul>
</p>
<p>
</body>
</html>
通过这样对样式的分解, 使用各个样式的组合,可以增强代码的扩展性
就可以写出 <ul class=”numberList red f16″></ul>这样新的样式
微信前端开发怎么入手|微信平台开发前端和后端|微信公众号前端开发js
» 本文来自：前端开发者 » 《WEB前端 CSS使用时的技巧》
» 本文链接地址：https://www.rokub.com/5238.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册