網頁設計CSS教程：第3部分

在本教程的第2部分中，我們分析了頁面上的主要HTML部分，并使用附有唯一ID的DIV標簽建立了分離：

< div  id = “navigation” > ... < / div >  < div  id = “centerDoc” > ... < / div >

使用DIV（定位主要頁面部分）是大多數人使用的替代方法：表格。我認為一種方法不一定比另一種更好，但是考慮到CSS是定位頁面元素的“官方”方法，并且表格只能用于保存表格數據。另一方面，使用表格的時候簡單得多，而CSS只是不切斷它。使用我們當前的布局（左側或右側導航），CSS更易于使用，是一個更好的解決方案。

現在我們已經涵蓋了，從這里一切都變得非常簡單。我們已經建立了我們的主要文件，主要部分已經到位，我們需要做的就是添加我們的文本和圖像。

打破網頁：

這個頁面很簡單，我們只有一個標題：

< H1 >主標題< / H1 >

和一個單一的段落：

< p >     去網頁設計師的殺手手冊主頁，并采取行動      我們將用作本教程的起始模板的HTML頁面。      你可以在標題下找到它：'創建HTML頁面的做法      下列：'。按照說明那里創建您的基本的HTML     網頁...現在就做！ < / p >

我們在CSS代碼中定義段落和標題的外觀：

p （ 寬度： 80％;  }  h1 {  font-family ： Georgia ，＆quot ; Times New Roman“ ， Times ， serif ;  font-size ： 18px ;  font-weight ： bold ;  顏色： ＃000000 ;  }

這幾乎是不言自明的。唯一需要提及的是我們將<p>標簽的寬度設置為80％。這使我們可以在一個易于編輯的地方控制我們所有的文字寬度。

唯一缺少的頁面是實際的導航。最好也是最簡單的方法是使用list（<li>）標簽。這是有道理的，因為導航菜單本質上是一個頁面的列表。

我們用這個CSS來設計列表項標簽：

li {  list-style-type ： none ;  行高： 150％;  list-style-image ： url （../images/arrowSmall.gif ）;  }

上面的代碼使用圖像作為列表中的項目符號，并使列出的項目之間的空間比正常大1到1.5倍（我喜歡多一點'呼吸空間'）。你不必有子彈的圖像，你可以通過刪除屬性來讓它沒有圖像和沒有子彈：

list-style-image ： url （../images/arrowSmall.gif ）;

或者您可以使用內置的子彈選項之一：“光盤”，“圓形”和“方形”。

接下來，您應該在“主導航”標題下的導航DIV之間向HTML頁面添加一個無序列表（<ul> </ ul>）：

< H2 >主導航< / H2 >  < UL >  < 李 > < 一個 HREF = “cssTutorialPage1.php” >壹< / 一 > < / 李 >  < 李 > < 一個 HREF = “cssTutorialPage2.php” >頁兩個< / a > < / li >  < / ul >

為了使事情變得更簡單（就文章而言），更改影響列表項標記（<li>）的CSS，以便使用內置的項目符號：

li {  list-style-type ： disc ;  行高： 150％;  }

現在我們有導航！

這幾乎涵蓋了本教程的目標，但是我們只是抓了CSS的表面。正如你所看到的，我們創建了一個漂亮的頁面，同時使用了很少的類型的HTML標簽。目前頁面上沒有太多的文字，但是我們可以很容易地添加到頁面中，將其構建為包含大量信息和圖像，而實際上根本沒有HTML工作！

濟南網站建設概述希望這篇CSS教程對你有用，一開始可能有點難以把你的頭圍繞在這個主題上，但是最終你會看到你的努力將會得到回報