close
Web Standards Solutions 網頁設計標準規格
把標記縮到最短
藉著CSS內使用「後代選擇子」(DESCENDANT SELECTORS),能消除<div>,<span>與分類屬性。
以網路標準技術製作網站時,如何把標記縮到最短?
方法A:高興地分類
<div id="sidebar">
<h3 class="sideheading">About This Site</h3>
<p>Tis is my site.</p>
<h3 class="sideheading">My Links</h3>
<ul class="sidelinks">
<li class="link"><a href="archives.html">Archives</a></li>
<li class="link"><a href="about.html">About Me</a></li>
</ul>
</div>
.sideheading{
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks{
list-style-type: none;
}
.link{
font-weight: bold;
}
方法B:自然地選擇
<div id="sidebar">
<h3>About This Site</h3>
<p>Tis is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
#sidebar h3{
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
#sidebar ul{
list-style-type: none;
}
#sidebar li{
font-weight: bold;
}
不只用在側邊
越少分類越好維護
不必要的<div>
方法A:使用<div>
<div id="nav">
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
ul與div一樣是個區塊層級的標籤,為什麼不直接為它指定id呢?
方法B:丟掉<div>
<ul id="nav">
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
其他例子
<div id="myform">
<form>
...
</form>
</div>
改寫為
<form id="myform">
...
</form>
<div id="footer">
<p>Copyright 1999-2004 Dan Cederholm</p>
</div>
改寫為
<p id="footer">Copyright 1999-2004 Dan Cederholm</p>
更多技巧
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All Taht Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
加上樣式
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All Taht Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
#sitemap{
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li ul{
font-size: 90%;
color: #000;
}
我們不需為第三層指定更小的字型,因為它會自動使用90%的90%
自訂圓點符號
#sitemap li{
list-style: none;
}
/*第三層*/
#sitemap li ul li ul li{
font-weight: normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
加上框線
#sitemap li ul{
font-size: 90%;
color: #000;
margin: 6px 15px;
padding: 0 15px;
border-left: 1px dotted #999;
}
/*第三層*/
#sitemap li ul li ul{
border: none;
}
全站熱搜
留言列表