|
第九步
上圖中，logo和頭部元素看上去擺在了正確的位置，但菜單還有點(diǎn)兒怪怪的。設(shè)計(jì)樣式前我們先說一下logo和大文本圖片的事。你可能在想，既然它倆都是圖片為什么不放在背景圖片里就好了？
這是因?yàn)槲覀冃枰ologo加上鏈接，點(diǎn)擊可返回首頁（讓網(wǎng)站更好用）。而大文本圖片可能要隨頁面而變，把它做成單獨(dú)的圖片我們就可以讓大量HTML頁面使用同一個CSS樣式表，只要換上文字不同的圖片就可以了。
現(xiàn)在咱們來設(shè)計(jì)那兩個菜單，讓頁面真正開始成型。要用到的CSS如下：
ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:138px; rightright:110px;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#ffffff;
}
頭兩條代碼和之前一樣（除了稍微調(diào)整了定位讓它們?nèi)匀徽_顯示）。注意，因?yàn)閮蓚�菜單的位置不一樣，這兩條定義是分開的，但菜單選項(xiàng)的樣式是相同的，所以我們把后面兩條定義并成了一條。把兩個屬性一起定義的格式是：
.myClass, .myClass2 { ... }
這和下面的定義是完全不同的：
.myClass .myClass2 { ... }
因?yàn)榈诙䝼�定義聲明的對象是位于class="myClass"的標(biāo)簽內(nèi)的所有class="myClass2"的元素
回到我們的樣式表，看一遍重要的幾點(diǎn)：
- 和前面一樣，我們把<ul>元素設(shè)為0 margin和0 padding，并絕對定位。
- 然后我們?yōu)?lt;ul>內(nèi)部所有的<li>元素做出聲明，讓它們沒有列表樣式（即沒有圓點(diǎn)），9px大小，統(tǒng)統(tǒng)大寫，最重要的，讓它們display:inline（譯者注：行內(nèi)顯示）。行內(nèi)顯示意味著它們排成一行，而不是一個接在另一個下面。
- 接下來的定義聲明了<li>內(nèi)部的<a>鏈接們應(yīng)該是某個顏色的并且沒有下劃線。這里的<li>包括<ul id="menu"> 和<ul id="right_menu">內(nèi)的所有<li>。
加上這些定義，我們的頁面現(xiàn)在看上去相當(dāng)不錯啦！
看看目前的網(wǎng)站
第十步
現(xiàn)在該增加內(nèi)容了！我們先寫些偽文本來形成列。下面是HTML：
<div id="outside_container">
<div id="container">
<a href="#"><img src="images/logo.jpg" id="logo" /></a>
<ul id="menu">
<li><a href="#">Retouching</a></li>
<li><a href="#">Digital Effects</a></li>
<li><a href="#">Web Work</a></li>
</ul>
<ul id="right_menu">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="images/panel_home.jpg" id="panel" />
<div id="content">
<div class="column1">
<h2>a sleek design</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column2">
<h2>tutorials</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column3">
<h2>recent work</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
</div>
</div>
</div>
在這段代碼中，你可以看到我在內(nèi)容區(qū)域加了3個新的<div>，每一個<div>包含一個<h2>標(biāo)題元素和一些文本。他們的class名稱是column1、column2、column3（列1、列2、列3）。加上文本是為了展示怎樣形成列。
為了讓他們看上去像列的樣子我們先來添加一段CSS：
/*
Content
*/
#content {
padding-top:435px;
padding-left:85px;
width:815px;
color:#674f5d;
font-size:13px;
line-height:20px;
}
.column1 { float:left; width:230px; margin-right:30px; }
.column2 { float:left; width:230px; margin-right:30px; }
.column3 { float:left; width:270px; }
我用一句注釋為新的CSS段落起頭，然后為#content設(shè)置樣式。注意padding-top值....435px!設(shè)這么大是為了給之前絕對定位的元素空出地方。與絕對定位的元素不同，content是從屬于頁面正常流的。
這是因?yàn)槟氵�要在content中加入更多內(nèi)容，把footer推到下面去。絕對定位會讓它覆蓋在footer上方。
然后我給三個column分別設(shè)置寬度并加上float:left，這可以讓它們漂向頁面左邊，與其他向左浮動的元素對齊。為了不讓他們緊挨在一起，我給前兩個column賦予了右外邊距。
浮動一個元素會讓它漂到左側(cè)或右側(cè)，并使其它元素環(huán)繞在其四周。加入另一個浮動元素，二者會并排成列。基本上你看到的列布局都運(yùn)用了float（浮動）。
不幸的是，浮動元素會出現(xiàn)一個怪問題——它們跟自己的容器不對付，并且會漂到下一個元素上方而不是把它往下推。解決這個問題的方法就是給浮動元素后面的某個元素加上屬性clear:both。
Clear（清理）屬性可以阻止元素環(huán)繞浮動的<div>，這有點(diǎn)兒不好解釋，我們直接看看清理和不清理分別會出現(xiàn)什么狀況吧。
出處：譯言
責(zé)任編輯：bluehearts
上一頁 用CSS布局建站從零開始 [5] 下一頁 用CSS布局建站從零開始 [7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 用CSS布局建站從零開始 [6]
