網頁設計基礎3

2021-10-01 12:14:23 字數 1512 閱讀 7426

網頁設計基礎3
1.邊框樣式:border-style: 上 右 下 左

border-style: 上 左右 下

border-style: 上下 左右

注意:綜合設定四邊樣式,必須按照上右下左的順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下、左右,三個值為上、左右、下。

覆蓋式:p

p2.邊框寬度:border-width

border-bottom-width:下邊框寬度

border-left-width:左邊框寬度 right top

注意:綜合設定四邊樣式,必須按照上右下左的順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下、左右,三個值為上、左右、下。

3.邊框顏色:border-color

注意:綜合設定四邊樣式,必須按照上右下左的順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下、左右,三個值為上、左右、下。設定邊框顏色時必須設定邊框樣式。

4.綜合設定邊框:border:四邊寬度 樣式 顏色

border-top 上邊寬度 樣式 顏色

……注意:寬度 樣式 顏色順序任意,不分先後,可以只指定需要設定的屬性。

5.內邊距屬性:padding

padding-top

padding-bottom

……注意:綜合設定四邊樣式,必須按照上右下左的順序,省略時採用值複製的原則,即乙個值為四邊,兩個值為上下、左右,三個值為上、左右、下。

6.外邊距屬性:margin

margin-top

margin-left

……7.背景顏色:backgrund-color;

8.背景影象:background-image:url(cat.jpg);

9.背景影象平鋪:背景影象會自動向水平和豎直兩個方向平鋪,如果不希望影象平鋪,或者只沿乙個方向平鋪,可以通過background-repeat屬性來控制。

repeat:沿水平和豎直兩個方向平鋪

no-repeat:不平鋪(影象位於元素的左上角,只顯示一次)

repeat-x:只沿水平方向平鋪

repeat-y:只沿豎直方向平鋪

10.背景影象的位置:background-position屬性值通常設定為兩個,中間用空格隔開,用於定義背景影象在元素的水平和垂直方向的座標。

屬性的取值有多種,例如:

使用不同單位(最常用的是畫素px)的數值:直接設定影象左上角在元素中的位置,例如 :background-position:20px 20px;

使用預定義的關鍵字:指定背景影象在元素中的對齊方式。

水平方向值:left cetter right

豎直方向值:top cetter bottom

使用百分比:按背景影象和元素的指定點對齊

11.背景影象固定:background-attachment

scroll:影象隨頁面元素一起滾動

fixed:影象固定在螢幕上,不隨頁面元素滾動

12.綜合設定元素的背景:

p

Web 網頁設計 HTML 3 布局基礎

網頁布局,也就是如何安排網頁的內容。乙個好的網頁布局能夠使人眼前一亮,吸引流量。網頁主要分為三部分 頭部 主體 頁尾。主體 網頁的主體承載網頁的主要內容。三段式 這是最簡單直接的布局,但簡單並不意味醜陋,這種布局因為簡潔往往能夠設計出效果出眾的網頁,最常見的就是搜尋引擎和新聞門戶的主頁。帶側邊欄 從...

網頁設計基礎 網頁布局結構

作為網頁設計初學者,掌握幾個頁面布局結構將會讓網頁變得更加美觀,並且大大提公升設計效率。一 國子型 大型 常用型別 如圖所示,我們可以看出,國子型頁面結構主要分為五個部分。頭部 該部分包括 的標題以及橫幅廣告條 左側 該部分包括一些導航等資訊 右側 該部分包括選單或者導航的元件 中部 該部分為頁面的...

網頁設計基礎 01

html html的發展史 html 1.0 在1993年6月作為網際網路工程工作小組 ietf 工作草案發布。html 2.0 1995年1 1月作為rfc 1866發布,於2000年6月發布之後被宣布已經過時。html 3.2 1997年1月14日,w3c推薦標準。html 4.0 1997年1...