css 網站布局實錄（CSS布局教程-文章首頁練習）

2023-10-23 03:51:46 4

我們先分析一下整個網頁的結構，整體內容採用的是一個兩列布局，導航無限延長的背景，並且添加了分割符號

素材：

第一步： 去掉默認的HTML間距。

*{padding:0;margin:0;}

Ps(我們可以在後期進行修改,根據網頁中使用的HTML元素的個數如body,h1,div等)

第二步：按效果圖頭部灰色背景但是無限延長

HTML代碼：

讀書屋歡迎您！

兩個DIV嵌套，這個需要100%添加背景，而內側 實現居中布局就可以了

.top{width:100%;background:#f5f5f5;height:35px;}

解釋：寬度100%,添加背景顏色，設定高度，這樣在縮放網頁，始終可以看到灰色的背景

#top {width:970px;margin:0 auto;}

解釋：網頁寬度970像素，使id=top的div元素進行居中margin:0 auto;

#top p{font-size:13px;line-height:35px;}

解釋：改變文字大小，就一行宣傳文字，通過行高（和高度一樣時間）實現垂直居中line-height:35px;

第三步：logo的實現，採用典型的以圖換字的方式，有利於SEO

HTML代碼：

CSS教程

CSS編碼：

#header h1 a{

background:url(images/logo.png) no-repeat 0 50%;

display:block;

width:215px;height:60px;

text-indent:-9999px;

}

添加背景圖片，由於是A行內元素，所以轉成display:block;再進行寬高指定。最後讓文字縮進。使用大的負值，從屏幕移除文字

第四步：導航的實現,導航需要有一個無限延長的背景，而且導航中間有|線隔開

Html代碼:

網站首頁|

ASP.NET|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎

CSS代碼：

首先還是給外側DIV添加100%的寬度以及背景顏色

.nav{width:100%;height:50px;background:#1a539c;}

導航採用的是li，所以去掉默認的圓點

ul li{list-style:none;}

進行導航的CSS編碼

#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}

解釋：float:left;讓導航在一行顯示，;line-height:50px;垂直居中，設置文字顏色color:#133d72;，只要針對豎線的。

再讓導航中的A元素具備塊元素，有利於我們在滑鼠懸停時添加背景顏色

#nav ul li a{color:#fff;font-size:13px;display:block;width:114px;text-decoration:none;float:left;}

滑鼠懸停CSS代碼：

#nav ul li a:hover{background:#133d72;text-decoration:underline;}

主題內容為兩列布局

先把兩列布局實現了，在去寫裡面的內容。PS（先給內容做個標記）如下

首先給外側id="main"的div使其居中。計算左右的寬度(根據盒模型)，添加浮動屬性

CSS代碼；

#main .left{width:473px;margin-right:20px;float:left;}

#main .right{width:473px;float:left;}

確定完左右後，內容是一樣的效果 ，距離頂部有間隔，有邊線。把內容統一添加一個class為container 的DIV,對其添加樣式

#main .container{border:1px solid #ddd;margin-top:10px;} 欄目名稱使用h3

asp.net基礎 CSS代碼:

#main .container h3{

background:url(images/lbj.jpg) repeat-x;height:31px;

text-indent:20px;

}

#main .container h3 a{

color:#133d72;font-size:15px;

line-height:31px;

} 欄目簡介統一的使用敘述清單，

asp.net基礎欄目

文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介

敘述清單特別適用於有圖，有標題，有簡介這樣的網頁表現形式。網頁中上方式圖片下方是標題使用敘述清單更簡單

CSS代碼：

#main .container dl{

padding:10px;

border-bottom:1px dashed #ccc;height:78px;

}

解釋：讓dl整體距離邊框留一定間距（padding:10px;）。添加一個距下方的虛線（border-bottom:1px dashed #ccc;），並設定高度。

#main .container dl dt{

float:left;margin-right:10px;}

解釋：進行浮動

#main .container dl dd.biaoti{

font-size:14px;line-height:25px;

}

解釋：為 dd添加一個class，由於該class是給dd使用的，直接寫成dd.biaoti，一定注意不要帶空格，空格的選擇符表示包含的意思。

#main .container dl dd{

line-height:22px;font-size:13px;

} 下方典型是一個新聞列表形式。

新聞標新聞標題新聞標標題題2015-5-1

……

我們首先為新聞列表添加背景顏色和內邊距

#main .container ul{

padding:10px;background:#fbfbfb;

}

控制li的高度及添加下邊線：

#main .container ul li{

height:28px;line-height:28px;

border-bottom:1px solid #f1f1f1;

font-size:13px;

}

新聞標題和日期應該同行顯示，並且日期相應應該對齊,相應的我們要讓a轉成塊元素，方便我們設置寬度，帶來的問題就是日期換行了，所以添加個float。我們還可以為連結添加背景小圖標。當滑鼠懸停時可以更換背景圖標。

#main .container ul li a{

width:380px;display:block;float:left;

color:#333;padding-left:13px;

background: url(images/ss.png) no-repeat 0 50%;

}

#main .container ul li a:hover{

background: url(images/ss2.png) no-repeat 0 50%;color:#133d72

}

凡是使用.container這個class的div都具有統一的效果。

最後給大家一個完整的HTML代碼：

css教程吧歡迎您！

css教程

網站首頁|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎|

CSS基礎

banner

CSS基礎

Css基礎欄目

文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介

新聞標新聞標題新聞標題新聞標標題題2015-5-1

……

CSS技巧

asp.net基礎欄目

文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介

新聞標新聞標題新聞標題新聞標標題題2015-5-1

……

CSS3基礎

asp.net基礎欄目

文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介

新聞標新聞標題新聞標題新聞標標題題2015-5-1

……

CSS基礎

asp.net基礎欄目

文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介

新聞標新聞標題新聞標題新聞標標題題2015-5-1

……

CSS代碼：

*{padding:0;margin:0;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

.top{width:100%;background:#f5f5f5;height:35px;}

#top,#header,#nav,#banner,#main{width:970px;margin:0 auto;}

#top p{font-size:13px;line-height:35px;}

#header h1 a{

background:url(images/logo.png) no-repeat 0 50%;

display:block;

width:215px;height:60px;

text-indent:-9999px;

}

.nav{width:100%;height:50px;background:#1a539c;}

ul li{list-style:none;}

#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}

#nav ul li a{color:#fff;font-size:14px;display:block;width:114px;text-decoration:none;float:left;}

#nav ul li a:hover{background:#133d72;text-decoration:underline;}

#banner{height:50px;}

#main .left{width:473px;margin-right:20px;float:left;}

#main .right{width:473px;float:left;}

#main .container{border:1px solid #ddd;margin-top:10px;}

#main .container h3{

background:url(images/lbj.jpg) repeat-x;height:31px;

text-indent:20px;

}

#main .container h3 a{

color:#133d72;font-size:15px;

line-height:31px;

}

#main .container dl{

padding:10px;

border-bottom:1px dashed #ccc;height:78px;

}

#main .container dl dt{

float:left;margin-right:10px;}

#main .container dl dd.biaoti{

font-size:14px;line-height:25px;

}

#main .container dl dd{

line-height:22px;font-size:13px;

}

#main .container ul{

padding:10px;background:#fbfbfb;

}

#main .container ul li{

height:28px;line-height:28px;

border-bottom:1px solid #f1f1f1;

font-size:13px;

}

#main .container ul li a{

width:380px;display:block;float:left;

color:#333;padding-left:13px;

background: url(images/ss.png) no-repeat 0 50%;

}

#main .container ul li a:hover{

background: url(images/ss2.png) no-repeat 0 50%;color:#133d72

}