html+css簡單佈局
阿新 • • 發佈:2018-11-06
經過幾天的學習漸漸掌握了一部分html和css
下面是用最近幾天學習的html+css簡單佈局的一個頁面
這個頁面可以分為
header,middle和foot。
其中head分為三部分,需要三個div標籤來進行佈局
首先第一個div標籤佈局橙色區域以及整個header區域設定背景顏色,寬,高,外邊距。
第二個div標籤設定左側圖片,右浮動和外邊距(包含在第一個div標籤裡面)
第三個div標籤設定水平導航欄和a:link,a:hover屬性,具體程式碼如下(包含在第一個div標籤裡面)。
.right{ float: right; margin-right: 50px; } li{ padding: 2px; display: inline; } a:link,a{ color:gold; text-align: center; padding: 2px; text-decoration: none; } a:hover{ color: blanchedalmond; }
這樣整個header部分就設定完畢了。
下面是第二個部分middle部分的設定
共需要四個div標籤來進行佈置
首先,第一個div標籤規定字型型別,字號,及顏色
第二個div規定外邊距,寬度,元素位置(包含在middle第一個div中)
第三個div標籤設定外邊距,背景顏色,邊框,浮動以及文字位置(包含在middle第二個div中,圖片邊框可以多設定幾種樣式)
這只是最基礎的html+css樣式設定
**其中要注意的點:
- 一定要先有具體框架再進行構建。
- 對於css和html的定義要清楚。**