PSD轉div css網頁切圖示例css
第一步:先把把全部標記歸置內外邊距歸置爲0,其實還有一種方法是根據根據BODY裏面所用到的HTML標記進行重置爲0.你也能夠先用*重置爲0而後在根據BODY中所使用的標記進行重置.如:咱們BODY標記中使用了,div,p那咱們的選擇符就寫 body,div,p就能夠了.不須要寫*了.
html
複製代碼
代碼以下:
*{
margin:0px;
padding:0px;
}
第二步:把咱們網頁總體的背景實現,咱們想要的結果內容居中,背景漸變始終鋪滿屏幕.
這樣的話,咱們能夠爲body 添加背景圖片.要讓基在沿水平方向平鋪便可.
複製代碼
代碼以下:
body{
background:url(image/bj.jpg) repeat-x ;
}
第三步：經過觀察咱們能夠先把咱們網頁劃分紅爲五大部分,而後先爲其編寫相應的html代碼
HTML代碼:
jquery
複製代碼
代碼以下:
<div id="header"></div>
<div id="nav"></div>
<div id="banner"></div>
<div id="main"></div>
<div id="footer"></div>
經過PS測量得知,這五部分佔據950寬,並且居中.咱們可使用羣組選擇符,先讓這五個DIV居中.
複製代碼
代碼以下:
#header,#nav,#banner,#main,#footer{
margin:0px auto;
width:950px;
}
第四步：先完成header頭部部分
LOGO：通常這個部分有兩個要求.1點擊LOGO能夠返回網站首頁.2要注意SEO方面的？因此咱們採用了以下HTML代碼：
<h1><a href="#">北京傑飛css網頁切圖</a></h1>
那麼CSS編碼該如何實現呢？
你們能夠能夠先想一下。而後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼以下
複製代碼
代碼以下:
#header h1 a{
background:url(image/logo.jpg);
width:476px;
height:102px;
display:block;
text-indent:-9999px;
}
好。如今咱們接着完成頭部右側部分，仍是先進行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各版本，火狐中表現的是否一致
複製代碼
代碼以下:
#header ul li{
float:left;
padding:0px 10px;
}
上邊代碼在火狐和IE8中沒有問題，可是在IE6中會出現問題。咱們會在後面進行講解。
#header ul li a{
color:#555;
text-decoration:none;
font-size:13px;
}
#header ul li a:hover{
color:#000;
text-decoration:underline;
}
這時候的結果以下顯示：
第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，而且要製做當前頁的效果。
HTML代碼：
web
複製代碼
代碼以下:
<ul>
<li><a href=" #">網站首頁</a></li>
<li><a href=" #">網站製做</a></li>
<li><a href="#>網站製做</a></li>
<li><a href="#」>office培訓</a></li>
<li><a href="#">平面設計就業</a></li>
<li><a href="#">div css培訓</a></li>
<li><a href="#">聯繫咱們</a></li>
</ul>
如今直接編寫導航的代碼會產生一個問題。若是學過盒模型與浮動的都應該知道.
導航部分文字跑到header頭部右側了。怎麼解決呢?
其實就該咱們萬能的清除浮動起做用了
CSS代碼
複製代碼
代碼以下:
.clear{
clear:both;
}
這時候爲咱們<div id="nav"></div>
變成了<div id="nav" class=」 clear」></div>
你們如今看一下，是否是解決了上邊的問題呢。其實若是你們按照標準的盒模型計算，若是計算得當，不會出現這個問題。
完成導航的CSS樣式
複製代碼
代碼以下:
#nav{
padding-top:3px;
}
#nav ul{
list-style:none;
}
#nav ul li{
float:left;
}
默認li是佔據整行顯示的,因此經過左浮動.使其在一行顯示。以後在設置A的狀態，達到我們想要的結果 試驗下:讓LI具有寬高,而後A設置背景,能不能達到我們效果,A不讓變成塊
複製代碼
代碼以下:
#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對應，能夠實現什麼效果呢。同窗們想一下？
複製代碼
代碼以下:
#nav ul li a:hover{
background:#177cb7;
}
如今咱們導航基本已經完成，可是還少了一個當前狀態的導航效果。怎麼辦呢。
其實很簡單就是爲當前所在頁面的A連接添加一個ID爲current的標記。以下：
複製代碼
代碼以下:
<a href="#" id="current">網站首頁</a>
接着這個狀態和鼠標懸停時是一致的，因此很簡單，只須要在鼠標懸停狀態後邊在添加一個#nav ul li a#current選擇符便可。你完成沒
第六步：產品宣傳banner圖片，公司網站的話通常會爲一個動畫或者是js/jquery的特效。目前我們直接就放置一個圖片
動畫
複製代碼
代碼以下:
<img src="image/banner.jpg" height="184" src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg" width="127" />
右側導航html代碼:
複製代碼
代碼以下:
<div class="subMenu">
<h5>培訓課程</h5>
<ul>
<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>
<li><a href="# ">div css培訓</a></li>
<li><a href="# ">div css培訓</a></li>
<li><a href="#l">聯繫咱們</a></li>
</ul>
</div>
css代碼: 下邊這些代碼在上邊製做過程當中都已經說過了。因此直接給出來了，再也不講解。
複製代碼
代碼以下:
#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%;
}
第八步：內容的主體區域編碼：經過上邊的效果的圖片，你們能夠先想一下HTML如何編寫。我是使用的DLDD的方式，你們必定要學會這個標記的用法，很經常使用，敘述產品時常常性用到。
如今咱們看看HTML代碼：
複製代碼
代碼以下:
<div class="news">
<dl class="xuexiao">
<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg" width="488" />
<!--[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]-->
其中裏面還涉及了一些別的知識。在後續課程會去講解。