“Html编码规范”的版本间的差异
来自CloudWiki
| 第4行： | 第4行： | ||
<div class="layer2-2"><h2>盒子2-2</h2></div> | <div class="layer2-2"><h2>盒子2-2</h2></div> | ||
</div></nowiki> | </div></nowiki> | ||
| − | * | + | *选择符命名要层次清楚，含义分明，如可以命名为section、layer2、layer2-2等。 |
<nowiki><div id="layer2"> | <nowiki><div id="layer2"> | ||
<div id="layer2-1"><h2>盒子2-1</h2></div> | <div id="layer2-1"><h2>盒子2-1</h2></div> | ||
| 第11行： | 第11行： | ||
</div></nowiki> | </div></nowiki> | ||
| − | *CSS样式的定义顺序按照盒子的先后顺序写,先写layer1,再写layer2,layer2-1,layer2- | + | *CSS样式的定义顺序按照盒子的先后顺序写,先写layer1,再写layer2,layer2-1,layer2-2 ... |
<style type="text/css"> | <style type="text/css"> | ||
.layer1{width:100%; height:100px; background:blue;} | .layer1{width:100%; height:100px; background:blue;} | ||
2017年11月11日 (六) 01:42的最新版本
- 子元素比父元素缩进两个字符
<div class="layer2">
<div class="layer2-1"><h2>盒子2-1</h2></div>
<div class="layer2-2"><h2>盒子2-2</h2></div>
</div>
- 选择符命名要层次清楚，含义分明，如可以命名为section、layer2、layer2-2等。
<div id="layer2">
<div id="layer2-1"><h2>盒子2-1</h2></div>
<div id="layer2-2"><h2>盒子2-2</h2></div>
<div id="layer2-3"></div>
</div>
- CSS样式的定义顺序按照盒子的先后顺序写,先写layer1,再写layer2,layer2-1,layer2-2 ...
<style type="text/css">
.layer1{width:100%; height:100px; background:blue;}
.layer2{width:100%; height:200px;}
.layer2-1{width:30%; height:200px; background:red;}
.layer2-2{width:70%; height:200px; background:orange;}
.layer3{width:100%; height:130px; background:green;}
</style>
