|
除網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的表現(xiàn)(Layout),包括以下內(nèi)容：
- 主導(dǎo)航條；
- 標(biāo)題(heading),包括網(wǎng)站名和內(nèi)容標(biāo)題；
- 內(nèi)容；
- 頁腳信息,包括版權(quán),認證,副導(dǎo)航條(可選)。
加入這些結(jié)構(gòu)時，為了不破壞原有框架，我們需要在css文件"body"標(biāo)簽(TAG)下加入:
.hidden {
display: none;
}
".hidden"即我們加入的類(class),這個類可以使頁面上任意屬于hidden類的元素(element)不顯示。這些會在稍后使用，現(xiàn)在請暫時忘記它。
現(xiàn)在我們加入標(biāo)題(heading)：
先回到HTML的代碼，<h1>到<h6>是我們常用的html標(biāo)題代碼。比如我們一般用<h1>網(wǎng)站名</h1>，<h2>網(wǎng)站副標(biāo)題</h2>,<h3>內(nèi)容主標(biāo)題</h3>等。我們往html文件的Header層(Div)加入:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
刷新一下頁面，你就可以看到巨大的標(biāo)題，和標(biāo)題周圍的空白，這是因為<h1>>標(biāo)簽的默認大小和邊距(margin)造成的，先要消除這些空白,需要加入：
h1 {
margin: 0;
padding: 0;
}
接下來是導(dǎo)航條：
控制導(dǎo)航條表現(xiàn)的css代碼相對比較復(fù)雜，我們將在第九步或是第十步中詳細介紹。現(xiàn)在html文件加入導(dǎo)航代碼：
<div id="main-nav">
<ul>
<li id="about"><a href="<li id="services"><a href="<li id="portfolio"><a href="<li id="contact"><a href="</ul>
</div>
(注：原教程使用了dl和dt，jorux在這使用了更常用的ul和li標(biāo)簽)
目前導(dǎo)航條的表現(xiàn)比較糟糕，但是要在以后的教程中介紹其特殊表現(xiàn)，故需要暫時隱藏導(dǎo)航條,于是加入：
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="<dt id="services"><a href="<dt id="portfolio"><a href="<dt id="contact"><a href="</dl>
</div>
我們跳一步，先到頁腳：
頁腳包括兩部分：左邊的版權(quán),認證和右邊的副導(dǎo)航條。
我們先要讓副導(dǎo)航條向右浮動，就像之前處理Sidebar和Content關(guān)系的一樣，需要加入一個新的層(div):
<div id="footer">
<div id="altnav">
<a href="<a href="<a href="<a href="<a href="</div>
</div>
理論上，我們可以控制源文件上的任意元素的浮動，但由于IE瀏覽器的BUG，被浮動層需要首先出現(xiàn)在源文件上，也就是說我們把副標(biāo)題放在版權(quán)和認證的前面：
<div id="footer">
<div id="altnav">
<a href="<a href="<a href="<a href="<a href="</div>
Copyright © Enlighten Designs
Powered by <a href="<a href="
刷新你的頁面，你將看到如下所示：
最后我們回到內(nèi)容部分：
用<h2<>表現(xiàn)內(nèi)容標(biāo)題–"About","Contact us"；用<p>表現(xiàn)段落；用</br>斷行。
<div id="content">
<h2>About</h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in
front and back end development. To view some of the web sites we have created view our
portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would
like more information about the services we provide please feel free to contact us.</p>
<h2>Contact Us</h2>
<p>Phone: (07) 853 6060<br />
Fax: (07) 853 6060<br />
Email: <a href="mailto:info@enlighten.co.nz" >info@enlighten.co.nz</a><br />
P.O Box: 14159, Hamilton, New Zealand</p>
<p><a href="</div>
刷新頁面可以看到在Content層中又出現(xiàn)一些空白，這是由于<h2><p>標(biāo)簽的默認邊距(margin)造成的，我們必須消除這些惱人的空白，當(dāng)又不想把網(wǎng)頁中所有的<h2><p>標(biāo)簽地邊距都設(shè)為0，這就需要使用css的子選擇器("child css selector"),在html的文件結(jié)構(gòu)中，我們想控制的<h2><p>標(biāo)簽(child)是屬于#content層(parent)的,因此在css文件中寫入：
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
這樣我們就告訴瀏覽器，僅僅是隸屬于content層的<h2><p>標(biāo)簽的margin和padding的值為0！
出處：Jorux Notebook
責(zé)任編輯：moby
上一頁 網(wǎng)頁布局與div浮動等 下一頁 頁面內(nèi)的基本文本的樣式(css)設(shè)置
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)
