css網(wǎng)頁切圖實例教程

時間：2022-08-09 09:21:02 | 來源：建站知識

時間：2022-08-09 09:21:02 來源：建站知識

(整體效果圖)

1、分析網(wǎng)頁整體結構，如下圖所示，我們把網(wǎng)頁分為五個部分。

2、根據(jù)上圖先寫出HTML代碼：

<div id=" header ">1</div>
<div id="banner">2</div>
<div id="nav">3</div>
<div id="main">4</div>
<div id="fotter">5</div>

如果是初學者建議，在每個DIV先用數(shù)字12345進行代表這是第幾個。

3、編寫統(tǒng)一樣式代碼。因為默認HTML元素是有間距，先讓這些間距歸0。然后在設置UL列表元素去掉小圓點。包括統(tǒng)一我們文字的大小。以及鏈接文字的樣式

CSS代碼如下：

<style type="text/css">
*{
margin:0px;
padding:0px;
}
Ul{list-style:none;}
A{color:#000;font-size:13px;text-decoration:none;}
A:hover{text-decoration:underline;}
</style>

CSS樣式代碼解釋：

*{
margin:0px;
padding:0px;
}

*代表所有HTML元素，我們讓其內(nèi)外邊距歸0。這是開始時做法。等全部HTML寫完，需要把這個地方根據(jù)用到HTML換成群組選擇符如 body,div,ul,li等。也就是說。我們只需要把使用的HTML進行歸0即可。

Ul{list-style:none;}

讓UL沒有小圓點

A{color:#000;font-size:13px;text-decoration:none;}

A:hover{text-decoration:underline;}

針對A鏈接進行設置，首先讓A鏈接的四種狀態(tài)改變?yōu)槲淖诸伾呛谏?，然后文字大小?3PX。去掉A鏈接的下劃線

A:hover：當鼠標懸停時，我們使其出現(xiàn)下劃線

4、我們使用PS測量網(wǎng)頁實際寬度為1000像素，然后我們?yōu)槲鍌€DIV設置統(tǒng)一居中。

CSS代碼如下：

#header,#banner,#nav,#main,#footer{
margin:0px auto;
width:1000px;
}

5、現(xiàn)在開始制作頭部HEAD部分，在這個部分我們通過兩步去實現(xiàn)。在頂部下方有一個背景。然后是公司LOGO標志

首先我們先把背景寫出來：

代碼如下：

#header{
height:102px;
background:url(images/topdi.gif) no-repeat;
}

代碼解釋：LOGO直接放圖也可以。從網(wǎng)站優(yōu)化角度考慮。我們可以使用以圖換字方式。然后我們添加HTML代碼：

放網(wǎng)站的標題

H1網(wǎng)頁認為最重要的標題。所以我們把LOGO放到H1里面

CSS代碼：

#header h1{
height:82px;
width:231px;
background:url(images/logo.gif) no-repeat;
text-indent:-999px;
}

代碼解釋：

我們?yōu)镠1先設置寬度與高度。然后添加背景。最后使用text-indent:-999px;讓文字從畫面縮進走。

6、制作網(wǎng)頁的BANNER部分。我們這個顯示廣告的地方一般有兩種情況，要么就是使用輪播圖，要么放一個動畫。但是我們這個地方只需要完成一個背景然后在背景顯示我們的廣告語。制作過程。先讓DIV中顯示背景，然后在DIV里放一個段落去顯示文字

HTML代碼如下：

<div id="banner">
<p>
力爭行業(yè)<span>典</span>范<br/>
STRIVE FOR A MODDEL
</p>
</div>

CSS樣式如下：

#banner{
height:268px;
background:url(images/banner.jpg) no-repeat;
}
#banner p{
color:#FFF;
padding-top:80px;
padding-left:80px;
font-size:14px;
font-weight:bold;
}

解釋：1、讓這個段落文字顏色為白色

2、距頂與距左空一個間隔。

3、設置文字大小與文字加粗

#banner p span{
color:#FF0;
font-size:18px;
}

解釋：段落中某個字需要重點強調(diào)?？梢栽谶@個字的四周添加一個SPAN(PS：SPAN是無意義的標簽，就是為了添加樣式方便)。

7、導航的制作，是一個典型的ULLI列表。我們先寫出HTML代碼，而在我們導航列表之間有一個豎線隔開。

<ul>
<li><a href="#">divcss8.com首頁</a>|</li>
<li><a href="#">關于捷福</a>|</li>
<li><a href="#">產(chǎn)品信息</a>|</li>
<li><a href="#">新聞動態(tài)</a>|</li>
<li><a href="#">人力資源</a>|</li>
<li><a href="#">公司首頁</a>|</li>
<li><a href="#">公司首頁</a>|</li>
<li><a href="#">公司首頁</a>|</li>
<li><a href="#">公司首頁</a></li>
</ul>

根據(jù)HTML去寫CSS樣式。

#nav{
height:25px;
background:#000;
}

CSS樣式代碼的解釋：

導航的父元素DIV設定高度。然后設定背景顏色為黑色

#nav ul{
list-style:none;
padding-left:10px;
}

CSS樣式代碼的解釋：

讓導航UL去掉默認小圓點。讓整體UL居左空一定距離。

#nav ul li{
color:#fff;
float:left;
line-height:25px;
}

CSS樣式代碼的解釋：

讓導航中具體項目文字顏色改成白色，因為LI元素是塊元素的。所以我們?yōu)槠湓O置浮動。這樣就能讓導航同一行顯示。line-height:25px;是為了讓LI在導航垂直居中。

#nav ul li a{
color:#FFF;
font-size:13px;
padding:0px 15px;
text-decoration:none;
}

CSS樣式代碼的解釋：

設置導航的鏈接狀態(tài)，為什么設置兩次顏色，LI設置白色，最主要是為了豎線用的。而鏈接只能通過A這個樣式進行設置。而且padding:0px 15px;這個屬性是針對豎線使其在兩個導航文字正中間。

#nav ul li a:hover{
color:#FF0;
}

CSS樣式代碼的解釋：

設置鼠標懸停時。改變一下鏈接的顏色

8、設置網(wǎng)頁主體內(nèi)容區(qū)域：在之前已經(jīng)分析過了。這是一個典型的兩列居中布局。我們是讓<div id="main">4</div>先設置寬度，并讓其居中。然后在這個DIV中再嵌套DIV。然后讓嵌套的DIV兩列布局

HTML代碼：

<div class="sider">
<h4>公司新聞</h4>
<ul>
<li><a href="#">這是新聞標題1</a><span>2015-5-10</span></li>
省略……
</ul>
</div>
<div class="container">
<h4>公司產(chǎn)品</h4>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>HD32B68S</dd>
<dd>所屬類別: CRT外殼</dd>
<dd>名稱： HD32B68S </dd>
<dd>瀏覽數(shù)： 52 次 </dd>
</dl>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>HD32B68S</dd>
<dd>所屬類別: CRT外殼</dd>
<dd>名稱： HD32B68S </dd>
<dd>瀏覽數(shù)： 52 次 </dd>
</dl>
</div>

HTML代碼解釋：

1、 欄目名稱標題。我們采用H4或者H3標記，一方面有利于樣式的編寫，二方面來說。在網(wǎng)站優(yōu)化方面，相對比較重要的文字，在這里采用H4

2、 新聞典型的ULLI列表

3、 而右側產(chǎn)品。使用的是DL DT DD敘述式清單。DT往往用于標題。而DD用于描述。這樣的話。我們可以認為產(chǎn)品圖片是標題。而產(chǎn)品的各個屬性是描述。

最后進行樣式的編寫

#main{
clear:both;
padding:20px 0px;
}

CSS樣式代碼的解釋：

1、 clear:both;表示清除浮動。為什么要寫這個。是因為導航的LI元素寫浮動了。 而且如下圖所示：會有一部分空白。這樣就會影響下方網(wǎng)頁內(nèi)容。所以在主體內(nèi)容上要先清除浮動。

2、 padding:20px 0px;讓主體內(nèi)容居頂與居頂留一定間隔

#main .sider{
width:370px;
margin:0px 20px;
float:left;
}

CSS樣式代碼的解釋：

是個兩列布局，先讓左側新聞模塊。設置寬度，并且float浮動。然后設置與產(chǎn)品模塊的間距。

#main .sider h4,#main .container h4{
background:url(images/libiao.jpg) no-repeat;
text-indent:2em;
font-size:14px;
padding-bottom:5px;
}

CSS樣式代碼的解釋：

1、 新聞的欄目名稱與產(chǎn)品欄目是一樣的，所以用到一個群組選擇符

2、 我們欄目名稱小圖標做成背景。讓文字縮進，再控制一下文字大小即可。

#main .sider ul{
list-style:none;
}
#main .sider ul li {
height:24px;
line-height:24px;
border-bottom:1px dotted #ccc;
}

CSS樣式代碼的解釋：

讓新聞列表設置一定高度，并且垂直居中。在底部加一條虛線（border-bottom:1px dotted #ccc;
）
#main .sider ul li a{
font-size:13px;
text-decoration:none;
color:#666;
}

CSS樣式代碼的解釋：

控制新聞列表的鏈接狀態(tài)：去掉下劃線text-decoration:none;設置文字顏色

#main .sider ul li a:hover{
color:#F00;
}
#main .sider ul li span{
font-size:13px;
color:#666;
padding-left:60px;
}
#main .container{
width:570px;
margin:0px 20px 0px 0px;
float:left;
}

CSS樣式代碼的解釋：

1、 設置產(chǎn)品內(nèi)容區(qū)域寬度與浮動

2、 最后 570PX+20PX+370PX+40PX 正好1000PX。這個地方是典型的盒模型。要理解。這些值都是怎么得來的。

#main .container dl{
width:260px;
float:left;
}

CSS樣式代碼的解釋：

我們采用DL清單列表，這樣的話。我們的產(chǎn)品是并列。只需要讓DL浮動一下即可。也有利于后臺程序循環(huán)輸出內(nèi)容

#main .container dl dt{
float:left;
}

CSS樣式代碼的解釋：

讓DL中的標題DT浮動

#main .container dl dd{
font-size:13px;
color:#333;
text-indent:1em;
height:22px;
}

CSS樣式代碼的解釋：

最后控制產(chǎn)品描述的文字具體屬性就可以。

建議大家采用DL DT DD去寫

大家可以嘗試寫一下底部信息

作者：css教程 www.divcss8.com