html css簡單布局

2021-08-30 15:50:06 字數 761 閱讀 5471

經過幾天的學習漸漸掌握了一部分html和css

下面是用最近幾天學習的html+css簡單布局的乙個頁面

這個頁面可以分為

header,middle和foot。

其中head分為三部分,需要三個div標籤來進行布局

首先第乙個div標籤布局橙色區域以及整個header區域設定背景顏色,寬,高,外邊距。

第二個div標籤設定左側,右浮動和外邊距(包含在第乙個div標籤裡面)

第三個div標籤設定水平導航欄和a:link,a:hover屬性,具體**如下(包含在第乙個div標籤裡面)。

.right

lia:link,a

a:hover

這樣整個header部分就設定完畢了。

下面是第二個部分middle部分的設定

共需要四個div標籤來進行布置

首先,第乙個div標籤規定字型型別,字型大小,及顏色

第二個div規定外邊距,寬度,元素位置(包含在middle第乙個div中)

第三個div標籤設定外邊距,背景顏色,邊框,浮動以及文字位置(包含在middle第二個div中,邊框可以多設定幾種樣式)

這只是最基礎的html+css樣式設定

**其中要注意的點:

HTML CSS 簡單網頁布局

常用標籤列舉 元素選擇器 匹配元素基本選擇器 按標籤名選擇 tagname class類選擇器 classname id選擇器 id 直接子元素 ul li 所有後代元素 屬性選擇器 tagname class id tagname class id 樣式 定位position 偽類 visited...

HTML CSS 混合布局

charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0,左右根據寬度自適應!其實就是 水平居中的意思 style head class top div class ma...

html css布局技巧

一 父元素的寬高的變化子元始終素鋪滿父元素 二 子元素位於父元素正中心 三 子元素垂直居中 四 子元素水平居中 五 固定寬高比盒子,padding bottom的取值是參照width,如果width的值是百分比,那麼參照就是父元素的width值 六 文字多於容器寬度顯示省略號 overflow hi...