中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

CSS模板2

你知道什么遙不可及嗎？記住并且填入所有CSS選擇器恰當?shù)男再|(zhì)（property，又譯特性，屬性）。留意我大部分的項目，我一遍又一遍地為選擇器使用相同的性質(zhì)。所以我創(chuàng)建另外一個基于CSS模板1的模板，在里面為所有CSS選擇器添加經(jīng)常會用的CSS性質(zhì)。以下是CSS模板2的樣例：

/* ----- CSS ----- */
*{
margin:;
padding:;
font-family:;
font-size:;
}
body{
margin:;
padding:;
background:;
}
/* ----- IDS ----- */
#container{
width:;
margin:;
padding:;
background:;
text-align:;
}
#primaryContent{
position:;
float:;
width:;
margin:;
padding:;
background:;
text-align:;
}
/* ----- CLASSES ----- */
.hide{
display:none;
} .show{
display:block;
}
/* ----- PARAGRAPHS ----- */
p{
font:;
color:;
font-size:;
font-family:;
font-style:;
font-weight:;
font-variant:;
text-align:;
text-indent:;
text-decoration:;
text-shadow:;
text-transform:;
letter-spacing:;
word-spacing:;
}
/* ----- LISTS ----- */
li{
listy-style:;
list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}
/* ----- LINKS ----- */
a{
font:;
color:;
text-decoration:;
border-bottom:;
}
a:hover{
color:;
background-color:;
border-bottom:;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border-bottom:;
}

很好，你已經(jīng)有所斬獲。需要注意的是，我也加入了通用選擇器（shorthand selectors）如font和list-style取代與之相應的獨個性質(zhì)。這可以在設計和開發(fā)階段有更多選擇。

HTML標記模板

但是沒有XHTML標記來示范，這些CSS選擇器和性質(zhì)能有什么好處呢？XHTML模板是我的web設計的Lorem Ipsum。以下是來自該模板的示例：

<div id="container">
<h1><a href="" title="Test Link">Untitled</a> - Online Style Guide Template (h1)</h1>
<p>Title : <em>Title of this Document</em><br />
Description : <em>A description of this document that explains how this guide should be used.</em></p>
<p>Author : <em>The Author</em><br />
URL: <em>http://url.to.reference.com</em><br /></p>
<p>Created : <em>Month DD, YYYY</em><br />
Modified : <em>Month DD, YYYY</em><br /></p>
<hr />
<div id="navigation">
<h2>Navigation (h2)</h2>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked</a></li>
<li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>
</div><!-- navigation -->
<hr />
<div id="primaryContent">
<h2>Primary Content (h2)</h2>
<h3>Headline the Third (h3)</h3>
<h4>Headline the Fourth (h4)</h4>
<p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> <p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="">Another item that is linked</a></li> <li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>

需要注意的是該模板缺少圖像元素的例子。因為這些元素都是外部文件，視情況存在，我更喜歡逐個包含他們。

在線樣式指南模板

如果你像我一樣并且有打印設計的背景，你將很快看到這個模板的價值所在。樣式指南十分方便一個設計和開發(fā)團隊交流和闡明設計要點。

該模板基本上是所有模板集合的一個頁面。這個在線樣式指南模板很大程度減少創(chuàng)建外部標記規(guī)則集的時間。如果你使用Firefox并且安裝了Web Developer Toolbar，我強烈推薦你在使用“Edit CSS“編輯CSS，觀察頁面的變化。編輯完畢，保存已經(jīng)修改過的CSS到外部文件去，并且更新相應的HTML標記。這就像一個高級的CSS編輯器，還是免費的。

該模板還可以讓我安全地測試實驗性的CSS設計，查看其如何影響同一頁面的其他元素和性質(zhì)。

總結(jié)

創(chuàng)建這些模板的一個最大好處是教會了我很多隱藏在XHTML和CSS背后的細節(jié)。我學習了我以前從不會考慮使用的元素，選擇器和性質(zhì)，因而也創(chuàng)建了這些模板。所以這些模板不僅讓我設計得更快，而且讓我設計得更好。

顯然，每個不同的設計者和開發(fā)者有自己不同的工作方式。使用XHTML和CSS模板可能并不適合你用來開始一個web項目。我只知道，這是我的工作方式，而且大大地幫助了我。此外，我認為有東西可填入比僅僅打開一個空白文檔的工作效率高得多。動力能量可不小。

如果你喜歡，別擔心，利用這些模板并且引入你的工作流程中去吧。

原文：Quick Start Your Design with XHTML Templates，Kevin Hale，Particletree

出處：Realazy
責任編輯：moby

上一頁 使用模板快速啟動你的設計 [1] 下一頁

◎進入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論