“Html编码规范”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“*子元素比父元素缩进两个字符 *选择符命名要体现含义或层次感，如section,layer2,layer2-2 *CSS样式的定义顺序按照盒子的先后顺…”）
 
第1行： 第1行：
 
*子元素比父元素缩进两个字符
 
*子元素比父元素缩进两个字符
−
*选择符命名要体现含义或层次感，如section,layer2,layer2-2
+
<nowiki><div class="layer2">
−
*CSS样式的定义顺序按照盒子的先后顺序写
+
      <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:40的版本

  • 子元素比父元素缩进两个字符
<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>
取自“http://www.openbrains.net/mediawiki/index.php?title=Html编码规范&oldid=2075”