點閱: 1818|回覆: 0

psd切圖轉換為div+css格式 [複製連結]

admin

站長

等級：25 - 爐火純青

經驗值：0 / 246

魔法值：14428 / 14428

生命值：6%

升級 100%

TA的每日心情

	奮斗 5 小時前

簽到天數: 5801 天

[LV.Master]伴壇終老

發表於 2016-7-19 21:23:00 |顯示全部樓層

馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。

您需要登入才可以下載或檢視，沒有帳號？立即註冊

×

第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫

body,div,p就可以了.不需要寫*了.

*{

margin:0px;

padding:0px;

}

第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.

body{

background:url(image/bj.jpg) repeat-x ;

}

第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼

<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>

#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代碼：

<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" />



上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。

文章的最近訪客

使用道具回報

返回列表

帳號		自動登入	找回密碼
密碼			立即註冊