第一步:先把把所有標記歸置內(nèi)外邊距歸置為0,其實還有一種方法是根據(jù)根據(jù)BODY里面所用到的HTML標記進行重置為0.你也可以先用*重置為0然后在 根據(jù)BODY中所使用的標記進行重置.如:我們BODY標記中使用了,div,p那我們的選擇符就寫body,div,p就可以了.不需要寫*了.
*{
margin:0px;
padding:0px;
}
第二步:把我們網(wǎng)頁整體的背景實現(xiàn),我們想要的結果內(nèi)容居中,背景漸變始終鋪滿屏幕.
這樣的話,我們可以為body 添加背景圖片.要讓基在沿水平方向平鋪即可.
body{
background:url(image/bj.jpg) repeat-x ;
}
第三步：通過觀察我們可以先把我們網(wǎng)頁劃分成為五大部分,然后先為其編寫相應的html代碼
HTML代碼:
<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main"></div>
<div id="footer"></div>
通過PS測量得知,這五部分占據(jù)950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.
#header,#nav,#banner,#main,#footer{
margin:0px auto;
width:950px;
}
第四步：先完成header頭部部分
LOGO：一般這個部分有兩個要求.1點擊LOGO可以返回網(wǎng)站首頁.2要注意SEO方面的？所以我們采用了如下HTML代碼：
<h1><a href="#">北京杰飛css網(wǎng)頁切圖</a></h1>
那么CSS編碼該如何實現(xiàn)呢？
大家可以可以先想一下。然后在看我下邊寫CSS代碼的，其實這個地方采用的是CSS以圖換字技巧。CSS代碼如下
#header h1 a{
background:url(image/logo.jpg);
width:476px;
height:102px;
display:block;
text-indent:-9999px;
}
好。現(xiàn)在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫
<ul>
<li><a href=" #">css切圖培訓</a></li>
<li><a href="#">設為首頁</a></li>
<li><a href="#">加入收藏</a></li>
</ul>
CSS代碼：
#header h1{
float:left;
}
我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。
#header ul{
float:left;
padding:50px 0px 0px 200px;
list-style:none;
}
為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設置浮動在IE各版本，火狐中表現(xiàn)的是否一致
#header ul li{
float:left;
padding:0px 10px;
}
上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現(xiàn)問題。我們會在后面進行講解。
#header ul li a{
color:#555;
text-decoration:none;
font-size:13px;
}
#header ul li a:hover{
color:#000;
text-decoration:underline;
}
這時候的結果如下顯示：
第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，并且要制作當前頁的效果。
HTML代碼：
<ul>
<li><a href=" #">網(wǎng)站首頁</a></li>
<li><a href=" #">網(wǎng)站制作</a></li>
<li><a href="#>網(wǎng)站制作</a></li>
<li><a href="#”>office培訓</a></li>
<li><a href="#">平面設計就業(yè)</a></li>
<li><a href="#">div css培訓</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
現(xiàn)在直接編寫導航的代碼會產(chǎn)生一個問題。如果學過盒模型與浮動的都應該知道.
導航部分文字跑到header頭部右側了。怎么解決呢?
其實就該我們?nèi)f能的清除浮動起作用了
CSS代碼
.clear{
clear:both;
}
這時候為我們<div id="nav"></div>
變成了<div id="nav" class=” .clear”></div>
大家現(xiàn)在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現(xiàn)這個問題。
完成導航的CSS樣式
#nav{
padding-top:3px;
}
#nav ul{
list-style:none;
}
#nav ul li{
float:left;
}
默認li是占據(jù)整行顯示的,所以通過左浮動.使其在一行顯示。之后在設置A的狀態(tài)，達到咱們想要的結果
#nav ul li a{
display:block;
width:135px;
height:56px;
line-height:56px;
color:#fff;
text-align:center;
text-decoration:none;
font-size:14px;
}
display:block;讓A元素變成塊狀，然后好為其設置寬高背景。這里面還有一個要點就是line-height:56px，同高度56px對應，可以實現(xiàn)什么效果呢。同學們想一下？
#nav ul li a:hover{
background:#177cb7;
}
現(xiàn)在我們導航基本已經(jīng)完成，但是還少了一個當前狀態(tài)的導航效果。怎么辦呢。
其實很簡單就是為當前所在頁面的A鏈接添加一個ID為current的標記。如下：
<a href="#" id="current">網(wǎng)站首頁</a>
接著這個狀態(tài)和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態(tài)后邊在添加一個#nav ul li a#current選擇符即可。你完成沒
第六步：產(chǎn)品宣傳banner圖片，公司網(wǎng)站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
<img src="image/banner.jpg" alt="北京杰飛電腦培訓" title="北京杰飛電腦培訓"/>
必要的屬性是alt必須加上。替換文本，當圖片不能正常加載，還有就是為了優(yōu)化。
小技巧：
因為多次用到UL。都需要添加默認圓點。所以在*里面寫上list-style:none;.這樣其它地方就不用寫了。其實包含文字顏色大小等，如果很多地方也是一樣。同樣可以聲明到*選擇符里。
第七步：完成內(nèi)容區(qū)域
思路：我們可以把內(nèi)容區(qū)域劃分為兩部分：一部分是左側導航，一部分為主要內(nèi)容區(qū)域。這樣我先為進行HTML編碼：
<div class="container">
測試
</div>
現(xiàn)在我們先看一下右側導航的結果圖
右側導航html代碼:
<div class="subMenu">
<h5>培訓課程</h5>
<ul>
<li><a href=" #" id="current">網(wǎng)站首頁</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
<li><a href="#">網(wǎng)站制作</a></li>
<li><a href="#l">div css培訓</a></li>
<li><a href="#l">div css培訓</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
css代碼: 下邊這些代碼在上邊制作過程中都已經(jīng)說過了。所以直接給出來了，不再講解。
#main{
padding:10px 0px;
}
#main .container{
width:674px;
margin-right:50px;
float:left;
}
#main .subMenu{
width:226px;
float:left;
margin-bottom:10px;
}
#main .subMenu h5{
background:#19577c;
height:39px;
text-align:center;
color:#fff;
font-size:15px;
line-height:39px;
}
#main .subMenu ul li{
border-bottom:1px solid #d4d4d4;
background:#f1f1f1;
}
#main .subMenu ul li a{
display:block;
color:#000;
height:36px;
line-height:36px;
text-decoration:none;
padding-left:60px;
background:url(image/li.jpg) no-repeat 40px 50%;
}
#main .subMenu ul li a:hover{
color:#177cb7;
background:url(image/li3.jpg) no-repeat 40px 50%;
}
第八步：內(nèi)容的主體區(qū)域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產(chǎn)品時經(jīng)常性用到。
現(xiàn)在我們看看HTML代碼：
<div class="news">
<dl class="xuexiao">
<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" alt="杰飛logo"/></dt>
<dd>杰飛學校特色：實行家教式教學模式，小班教學的完美結合可隨到隨學，可預約上課，可完全根據(jù)學員實際情況教學，保證學會為止……</dd>
</dl>
<dl class="xinwen">
<h5>學校新聞<a href="#"><img src="image/more.jpg"/></a></h5>
<dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>
<dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>
<dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>
<dd><a href="#">淺談平面設計中配色方案</a><span>2013-4-14</span></dd>
</dl>
</div>
接著是最下邊產(chǎn)品部分的HTML編碼：
<div class="product clear">
<h5>精品課程<a href="#"><img src="image/more.jpg"/></a></h5>
<ul>
<li><a href="#"><img src="image/css.gif"/></a></li>
<li><a href="#"><img src="image/css.gif"/></a></li>
<li><a href="#"><img src="image/css.gif"/></a></li>
<li><a href="#"><img src="image/css.gif"/></a></li>
</ul>
</div>
現(xiàn)在開始完成CSS代碼的編寫：
首選是學校簡介與新聞，其實仔細觀察這兩個也是兩列布局，所以設定寬，并設置左浮動：
#main .container dl{
width:300px;
float:left;
}
接著是欄目名稱：因為這兩個效果是一樣的。所以直接使用群組選擇符把兩個都選擇編寫就可以了。
#main .container dl h5,#main .product h5{
border-bottom:1px #000 solid;
margin-bottom:15px;
font-size:17px;
}
#main .container dl h5 a{
padding-left:170px;
}
先完成左側學校簡介，讓簡介浮在圖片右方：
#main .container dl dt{
float:left;
width:110px;
}
#main .container dl dt img{
border:1px solid #ccc;
}
#main .container dl.xuexiao dd{
font-size:12px;
margin-left:25px;
float:left;
width:165px;
text-indent:2em;
}
單獨設置新聞的DD標記
#main .container dl.xinwen dd{
height:22px;
line-height:22px;
background:url(image/li.jpg) no-repeat 0 50%;
}
#main .container dl.xinwen dd a{
color:#000;
text-decoration:none;
padding-left:20px;
}
#main .container dl.xinwen dd span{
padding-left:25px;
}
#main .container dl.xuexiao{
margin-right:40px;
}
現(xiàn)在我們開始完成產(chǎn)品的CSS代碼：
#main .product{
padding-top:20px;
}
讓其距頂部空出一定距離。
#main .product h5 a{
padding-left:510px;
}
#main .product ul li{
float:left;
padding-left:10px;
}
讓LI進行左浮動即可。
最后一步：完成底部：
HTML代碼：
<div id="footer" class="clear">
<p>聯(lián)系我們：北京市石景山區(qū)皓月寫字樓328室;聯(lián)系電話:010-88685956;15910646335(陳老師)</p>
</div>
CSS代碼：
#footer{
background:#d1dce3;
height:50px;
line-height:50px;
text-align:center;
}
到此我們已經(jīng)完成了一個頁面的切圖。
幾個錯誤：頭部標記在IE6中有下面表現(xiàn)。所以通過下邊代碼解決一下：
<!--[if IE 6]>
<![endif]-->
上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
<!--[if IE 6]>
<style type"text/css">
#header ul li{
width:80px;
float:left;
padding:0px 10px;
}
Header頭部右側加寬度值
#main .container dl dt img{
border:1px solid #ccc;
}
#main .container dl.xuexiao dt{
float:left;
width:110px;
}
#main .container dl.xuexiao dd{
font-size:12px;
margin-left:20px;
float:right;
width:145px;
text-indent:2em;
}
#footer{
margin-top:-10px;
}
</style>
<![endif]-->
其中里面還涉及了一些別的知識。在后續(xù)課程會去講解。
來源:
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
