用CSS對網頁進行布局

2021-08-27 20:12:37 字數 523 閱讀 7663

今天學習了用css對網頁進行簡單的布局,感覺還不錯,下面來分享一下。

首先用div給頁面分塊是基礎,網頁布局就是將網頁合理的分成乙個乙個塊。

接下來寫css層疊樣式,給每個要定義樣式的div定義乙個class或id,在對應的class裡面寫好樣式,這裡最主要的用到的屬性有margin,padding,width,height,background,border等等。

下面來乙個頁面布局例項:

cont3

文字測試,哈哈

首先body我把body的內外邊距變成零,這裡可以讓整版的背景彰顯出來,好看。同時center讓內容居中。

接下了是定義頁頭,一頭是灰色背景.head寬度為800px.

主體部分分了三列

.content

.con1

.con2

.con3

這裡的content為內容的載體,opacity:0.5;可以讓內容變透明。

用HTML進行網頁布局

表單驗證的好處 1.減輕伺服器的壓力 2.保證資料的可行性和安全性 表單驗證的方法 placeholder 文字框底層文字 類似於背景文字 required 規定此框為必填項 pattern 使用者輸入的內容必須符合正規表示式所指的規則,否則就不能提交表單 選擇器 h1style標籤 行內樣式 寫在...

利用 CSS 進行網頁布局

這裡主要主要介紹如何利用 css 來進行網頁的一欄,兩欄,三欄和混合布局 type text css body top main foot style head class top div class main div class foot div body html 效果 type text cs...

利用css進行網頁布局

網頁布局 又稱版式布局,是網頁ui設計師將有限的視覺元素進行有機的排列組合,將理性的思維個性的化的表現出來,是一種具有個人藝術特色的視覺傳達方式。傳達資訊的同時有美感。網頁設計特點 相對紙媒來說 特點 1 網頁可以自適應寬度2 網頁的長度理論上可以無限延長3 頁面為 頭部,主體部分,底部。分欄又稱為...