使用Web標準建站第8天 CSS布局入門

2021-09-06 19:50:05 字數 1583 閱讀 8811

o border是指層的邊框,"border-right: #ccc 2px solid;"是定義層的右邊框顏色為"#ccc",寬度為"2px",樣式為"solid"直線。如果要虛線樣式可以用"dotted"。

o background是定義層的背景。分2級定義,先定義**背景,採用"url(../images/bg_logo.

gif)"來指定背景**路徑;其次定義背景色"#fefefe"。"no-repeat"指背景**不需要重複,如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景**從右下角開始。

如果沒有背景**可以只定義背景色background: #fefefe

o color用於定義字型顏色,上一節已經介紹過。

o text-align用來定義層中的內容排列方式,center居中,left居左,right居右。

o line-height定義行高,150%是指高度為標準高度的150%,也可以寫作:line-height:1.

5或者line-height:1.5em,都是一樣的意思。

o width是定義層的寬度,可以採用固定值,例如500px,也可以採用百分比,象這裡的"60%"。要注意的是:這個寬度僅僅指你內容的寬度,不包含margin,border和padding。

但在有些瀏覽器中不是這麼定義的,需要你多試試。

下面是這個層的實際表現:

我們可以看到邊框是2px的灰色,背景**在右下沒有重複,內容距離上和左邊框20px,內容居中,一切和預想的一樣。hoho,雖然不好看,但它是最基本的,掌握了它,你就已經學會一半的css布局技術了。就是這樣,不算難吧!

(另一半是什麼?另一半是層與層之間的定位。我會在後面逐步講解。

)2.css2盒模型

自從2023年css1的推出,w3c組織就建議把所有網頁上的對像都放在乙個盒(box)中,設計師可以通過建立定義來控制這個盒的屬性,這些對像包括段落、列表、標題、**以及層。盒模型主要定義四個區域:內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。

上面我們講的sample層就是乙個典型的盒。對於初學者,經常會搞不清楚margin,background-color,background-image,padding,content,border之間的層次、關係和相互影響。這裡提供一張盒模型的3d示意圖,希望便於你的理解和記憶。

3.輔助**一律用背景處理

用xhtml+css布局,有乙個技術一開始讓你不習慣,應該說是一種思維方式與傳統**布局不一樣,那就是:所有輔助**都用背景來實現。類似這樣:

儘管可以用直接插在內容中,但這是不推薦的。這裡的"輔助**"是指那些不是作為頁面要表達的內容的一部分,而僅僅用於修飾、間隔、提醒的**。例如:

相簿中的**、**新聞中的**,上面的3d盒模型**都屬於內容的一部分,它們可以用元素直接插在頁面裡,而其它的類似logo,標題**,列表字首**都必須採用背景方式或者其他css方式顯示。

這樣做的原因有2點:

本文摘自123懷孕網

使用Web標準建站第9天 CSS布局入門

定義頁面左列樣式 left margin 0px padding 0px background cdcdcd 定義頁面中列樣式 middle left 200px top 0px width 300px margin 0px padding 0px background dadada 定義頁面右列樣...

客戶填寫 標準建站所需

標準建站所需資料 尊敬的使用者您好!為了快速掌握您對 的需求,請您認真填寫以下資訊,及時提供給建站售後專員,感謝您的配合!1 站點名 購買時自己填寫的 lxqhy 2 聯絡人 明確聯絡人,便於相互溝通,保證製作質量 qq 106631431 郵箱 131 131 3 參考 位址 同行或您滿意的 4....

胖AP使用WEB配置說明書

阿德利亞胖ap msr1000 510 使 用web配置說明手冊 msr1000 510.w1 一硬體連線及相關引數設定 方式一使用交叉線連線 使用交叉線將pc機和胖ap連線起來,對pc機的乙太網口做如圖1 1的設定。圖 1 1 開啟ie瀏覽器,在網頁位址列中輸入 回車,得到頁面如圖1 2所示。輸入...