每節5分鐘的入門HTML+CSS教程 - 第三節

15 人贊了文章

無論是報紙還是雜誌設計，我們第一個要做的就是建立頁面版式，把文字和圖片用方形整齊排列在版面上，在網頁中也是同樣，這步工作，我們稱之為布局。

在HTML中，所有元素在頁面上實際都佔用一個方形的位置。這個方塊總計由3樣東西構成，分別是內邊距，描邊，和外邊距。

在上圖中，藍色的部分稱之為外邊距，用於調整和其他元素的距離。

黑色的叫做描邊，可以指定粗細和顏色，線條類型。

淡黃色區域，叫做內邊距，用於調整描邊內文字的位置。

*需要特別注意的是，元素的寬度，高度屬性，需要將內外邊距和描邊加在一起

HTML頁面中的元素，是有默認制定的樣式的。我們需要在css文件開始時清除這些樣式。

在CSS文件開頭加入以下代碼。

* {padding:0; margin:0;}

其中星號*是通配符，在計算機語言中意為「所有的「。padding和margin，分別是內邊距，外邊距。這行語句的作用是把當前頁面內所有元素的內外邊距都改成0。

（在這裡涉及到css的一個重要特性，就是繼承，會在以後的部分中介紹）

然後，我們在html中寫一個ui。

<ul class="nav"> <li>導航1</li> <li>導航2</li> <li>導航3</li> <li>導航4</li></ui>

<ul>標籤，就是列表的意思。裡面的<li>就是列表項。一般用於實現導航和文章列表等。

之後，我們在css中寫入

.nav {padding:20px; width:100%; background-color:black; color:white;}；

在這個例子中，我們用到了幾個新的知識點

其中：

• class="nav"和.nav是配對的。這種寫法我們稱之為類選擇器。class=""中的內容叫做類名，我們可以自行起名，在css中，用.開始可以將樣式指定給類。nav是導航的常見命名。
• width:100%;指寬度占當前網頁的100%。
• background-color和color分別是背景顏色，和文字顏色。

保存並刷新瀏覽器，我們會看到，ul變成了一個橫貫頁面左右的黑色方塊，更像是網頁上的導航了。可是裡面的<li>為什麼是從上到下立著的呢？

我們下節再說。

作業：用div標籤，配合margin,padding,border樣式來製作一個空心按鈕。