“Html编码规范”的版本间的差异
来自CloudWiki
(创建页面,内容为“*子元素比父元素缩进两个字符 *选择符命名要体现含义或层次感,如section,layer2,layer2-2 *CSS样式的定义顺序按照盒子的先后顺…”) |
|||
(未显示同一用户的1个中间版本) | |||
第1行: | 第1行: | ||
*子元素比父元素缩进两个字符 | *子元素比父元素缩进两个字符 | ||
− | * | + | <nowiki><div class="layer2"> |
− | + | <div class="layer2-1"><h2>盒子2-1</h2></div> | |
+ | <div class="layer2-2"><h2>盒子2-2</h2></div> | ||
+ | </div></nowiki> | ||
+ | *选择符命名要层次清楚,含义分明,如可以命名为section、layer2、layer2-2等。 | ||
+ | <nowiki><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></nowiki> | ||
+ | |||
+ | *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> |
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>