由設計(jì)圖轉pcsshtml網頁制(→∞zhì)作(zuò)實用(yòng)實例。®¥↓§psd設計(jì)圖是(shì)網頁的(de)設計(jì)效果圖，我們必須要(σ±$εyào)把它轉化(huà)成網頁來(lái)，這(zhèγ↑πσ)樣才能(néng)适合用(yòng)戶浏覽，那(nà₽"↔λ)都(dōu)有(yǒu)哪些(xiē)技♥₽©(jì)術(shù)和(hé)好(hǎo)的(de)路(lù)線呢(♠÷ne)，在此首創網絡來(lái)給大(dà)家(jiā)一(y‌₩βī)塊分(fēn)析學習(xí)下(xi ‍à)：

第一(yī)步:先把把所有(yǒu)标記歸置內(φδnèi)外(wài)邊距歸置為(wèi)0,其實還(há↕​₩i)有(yǒu)一(yī)種方法是(shì)根據根據BODY裡(lǐ)面所§&$€用(yòng)到(dào)的(de)HTML标記進•∏行(xíng)重置為(wèi)0.你(nǐ)也(yě)可(kě)以先£₹用(yòng)*重置為(wèi)0然後在根據BODY¶± ©中所使用(yòng)的(de)标記進行(xíng)重置.如(rú):我們∑™BODY标記中使用(yòng)了(le),p,p那(nà÷ σ)我們的(de)選擇符就(jiù)寫body,p,p就(ji₩÷↔>ù)可(kě)以了(le).不(bù)需要(yào)寫*了(le)∑♦'.

*{

margin:0px;

padding:0px;

}

第二步:把我們網頁整體(tǐ)的(de)背景實現(xiàn)☆≤★​,我們想要(yào)的(de)結果內(nèi)容居中,背景漸變始終鋪滿屏幕.

這(zhè)樣的(de)話(huà),我們可(kě)以為∏α(wèi)body添加背景圖片.要(yào)讓基∏✘在沿水(shuǐ)平方向平鋪即可(kě).

body{

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

}

第三步：通(tōng)過觀察我們可(kě)以先把我們網頁劃分(f←וēn)成為(wèi)五大(dà)部分(fēn),然後先為(wèi¶★∑Ω)其編寫相(xiàng)應的(de)html代碼

HTML代碼:

通(tōng)過PS測量得(de)知(zhī),這(zhè)五部分​&♣‌(fēn)占據950寬,而且居中.我們可(±₩♥kě)以使用(yòng)群組選擇符,先讓這(₽↔zhè)五個(gè)DIV居中.

#header,#nav,#banner☆•,#main,#footer{

margin:0px auto;

width:950px;

}

第四步：先完成header頭部部分(fēn)

LOGO：一(yī)般這(zhè)個(gè)部分β∞€(fēn)有(yǒu)兩個(gè)要(yào)求.1點擊L£$$¥OGO可(kě)以返回網站(zhàn)首頁.2要(yࣀ↑o)注意SEO方面的(de)？所以我們采<→用(yòng)了(le)如(rú)下(xià)HTM  λσL代碼：

邯鄲網站(zhàn)建設效果圖轉換html

那(nà)麽CSS編碼該如(rú)何實現(xiàn)呢(ne)？

大(dà)家(jiā)可(kě)以可(kě)以先想一(yī)下(xià)∏≠↔。然後在看(kàn)我下(xià)邊寫CSS代碼的(de)，其實這(zλ©♠hè)個(gè)地(dì)方采用(yòng)的(★®€&de)是(shì)CSS以圖換字技(jì)巧。CSS代碼如(∏∞∏↑rú)下(xià)

#headerh1a{

background:url(image/lo‍≈go.jpg);

width:476px;

height:102px;

display:block;

text-indent:-9999px×★ε;

}

好(hǎo)。現(xiàn)在我們接著(zhe)完成頭部右側 ™部分(fēn)，還(hái)是(shì)先∏"™進行(xíng)HTML代碼的(de)編寫

• css切圖培訓
• 設為(wèi)首頁
• 加入收藏

CSS代碼：

#headerh1{

float:left;

}

我們首先讓H1左浮動。這(zhè)樣右側UL部分(fēn)就(jiù)可(k‍¥≠ě)以在同行(xíng)顯示了(le)。

#headerul{

float:left;

padding:50px0px0px200px;

list-style:none;

}

為(wèi)了(le)避免問(wèn)題，可(kě)以讓U₽ ₽L也(yě)浮動。大(dà)家(jiā)可(k‍₹ě)以試一(yī)下(xià)，如(rú)果不(bù)設置浮↕→​動在IE各版本，火(huǒ)狐中表現(xiàn♥ ↑)的(de)是(shì)否一(yī)緻

#headerulli{

float:left;

padding:0px10px;

}

上(shàng)邊代碼在火(huǒ)狐和(hé¥'₽•)IE8中沒有(yǒu)問(wèn)題，但(dàn)是(sh★φì)在IE6中會(huì)出現(xiàn)問(wèn)題。我÷∞✘們會(huì)在後面進行(xíng)講解。

#headerullia{

color:#555;

text-decoration:none;

font-size:13px;

}

#headerullia:hover{

color:#000;

text-decoration:unde "rline;

}

這(zhè)時(shí)候的(de)結≤₽≠果如(rú)下(xià)顯示：

第五步：完成導航效果，效果說(shuō)明(míng)：鼠标放☆✔ ♥(fàng)上(shàng)背景變成淺藍(εγ↕§lán)色，并且要(yào)制(zhì)作(zuò)當前$©頁的(de)效果。

HTML代碼：

• 網站(zhàn)首頁
• 網站(zhàn)制(zhì)作(zuò)
• 網站(zhàn)制(zhì)作(zuò)
• office培訓
• 平面設計(jì)就(jiù)業(yè)
• pcss培訓
• 聯系我們

現(xiàn)在直接編寫導航的(de)代碼©✘會(huì)産生(shēng)一(yī)個(gè)問"♦(wèn)題。如(rú)果學過盒模型與浮動的(de)都(dōu≤₽)應該知(zhī)道(dào).

導航部分(fēn)文(wén)字跑到(dào)header頭部右側了≥'✘€(le)。怎麽解決呢(ne)?

其實就(jiù)該我們萬能(néng)的"✔♠(de)清除浮動起作(zuò)用(yòng)了(le)

CSS代碼

.clear{

clear:both;

}

這(zhè)時(shí)候為(wèi)我們

變成了(le)

大(dà)家(jiā)現(xiàn)在看(k'π♦✔àn)一(yī)下(xià)，是(shì)不(bù)是(s↑¶φ>hì)解決了(le)上(shàng)邊的(de)問(wèn)題呢(ne<​πε)。其實如(rú)果大(dà)家(jiā)按照(zh♠®ào)标準的(de)盒模型計(jì)算(s® ♣uàn)，如(rú)果計(jì)算(suàn)得(de)¶π♦當，不(bù)會(huì)出現(xiàn)這(zhè)個(gè)問(wè ♠α☆n)題。

完成導航的(de)CSS樣式

#nav{

padding-top:3px;

}

#navul{

list-style:none;

}

#navulli{

float:left;

}

默認li是(shì)占據整行(xíng)顯示的₩‍(de),所以通(tōng)過左浮動.使其在一"→→(yī)行(xíng)顯示。之後在設置A的(de)狀态，達到(dà☆< ÷o)咱們想要(yào)的(de)結果

#navullia{

display:block;

width:135px;

height:56px;

line-height:56px;

color:#fff;

text-align:center;

text-decoration:none;

font-size:14px;

}

display:block;讓A元素變成塊狀，然後¶↓好(hǎo)為(wèi)其設置寬高(gāo↕←)背景。這(zhè)裡(lǐ)面還(hái)有(yǒ₽αu)一(yī)個(gè)要(yào)點就(jiù)是(shì)l•€'ine-height:56px，同高(gāo)度‍₩₽∞56px對(duì)應，可(kě)以實現(xiàn)什(shéπ​φδn)麽效果呢(ne)。同學們想一(yī)下(xià)？

#navullia:hover{

background:#177cb7;

}

現(xiàn)在我們導航基本已經完成，但(dàn)♣÷是(shì)還(hái)少(shǎo)了(le)一(yī)個(gè)當前狀态的↓ ₽(de)導航效果。怎麽辦呢(ne)。

其實很(hěn)簡單就(jiù)是(shì)為(wè§∑± i)當前所在頁面的(de)A鏈接添加一(yī)個(gè)ID為(wèi↔×φ)current的(de)标記。如(rú)下(xià)：∞∏↕‍

網站(zhàn)首頁

接著(zhe)這(zhè)個(gè)狀态和(hé)鼠标懸停時(shí)↓★ ∞是(shì)一(yī)緻的(de)，所以很(hěn Ω)簡單，隻需要(yào)在鼠标懸停狀态後邊在™<♥添加一(yī)個(gè)#navullia#current選↑σ擇符即可(kě)。你(nǐ)完成沒

第六步：産品宣傳banner圖片，公司網站(zhàn)的(de)話(h&•≤uà)一(yī)般會(huì)為(wèi)一(yī)個(gè)動畫(✘€huà)或者是(shì)js/jquery的(de)特效‍€ε₽。目前咱們直接就(jiù)放(fàng)置一(yī)個(gè)÷β圖片

必要(yào)的(de)屬性是(shì)alt必<✘須加上(shàng)。替換文(wén)本，當圖片不(b$σù)能(néng)正常加載，還(hái)有(yǒu)就(j₹♠✔iù)是(shì)為(wèi)了(le) φ優化(huà)。

小(xiǎo)技(jì)巧：

因為(wèi)多(duō)次用(yòng)到(dào)U₩λL。都(dōu)需要(yào)添加默認圓點。所以在*裡(lǐ)面寫上(sφ‍¥→hàng)list-style:none;.這(zhèβ☆)樣其它地(dì)方就(jiù)不(bù)用(y≤∑®σòng)寫了(le)。其實包含文(wén)字顔色大(dà)≈₽♠小(xiǎo)等，如(rú)果很(hěn₽‌γ•)多(duō)地(dì)方也(yě)是(shì)一(yī)樣。同樣可' ₹✔(kě)以聲明(míng)到(dào)*選擇符裡(lǐ)。

第七步：完成內(nèi)容區(qū)域

思路(lù)：我們可(kě)以把內(nèi)容區(qū)域劃分(fēn)為ε♣ (wèi)兩部分(fēn)：一(yī)部分↓<(fēn)是(shì)左側導航，一(yī)部分(fēn)為(wè≥↔i)主要(yào)內(nèi)容區(qū)域。這(zhè)樣我先為(☆'βwèi)進行(xíng)HTML編碼：

測試

現(xiàn)在我們先看(kàn)一(yī)下(xià)右側導航的(±♦de)結果圖

右側導航html代碼:

培訓課程

• 網站(zhàn)首頁
• 網站(zhàn)制(zhì)作(zuò)
• 網站(zhàn)制(zhì)作(zuò)
• 網站(zhàn)制(zhì)作(zuò)
• 網站(zhàn)制(zhì)作(zuò)
• pcss培訓
• pcss培訓
• 聯系我們

css代碼:下(xià)邊這(zhè)些(xiē)×$¥φ代碼在上(shàng)邊制(zhì)作(zuò)過程中ε  ≈都(dōu)已經說(shuō)過了(le)。所以直接給出來(lái)了(le)¶§，不(bù)再講解。

#main{

padding:10px0px;

}

#main.container{

width:674px;

margin-right:50px;

float:left;

}

#main.subMenu{

width:226px;

float:left;

margin-bottom:10px;

}

#main.subMenuh5{

background:#19577c;

height:39px;

text-align:center;

color:#fff;

font-size:15px;

line-height:39px;

}

#main.subMenuulli{

border-bottom:1pxso®↔λlid#d4d4d4;

background:#f1f1f1;

}

#main.subMenuullia{

display:block;

color:#000;

height:36px;

line-height:36px;

text-decoration:none;

padding-left:60px;

background:url(image/li.♠®jpg)no-repeat40px50%;

}

#main.subMenuullia:hover∏♥ {

color:#177cb7;

background:url(image/li3.jp♣≥  g)no-repeat40px50%;

}

第八步：內(nèi)容的(de)主體(tǐ)區(qū)域編碼：通(t♦♠σōng)過上(shàng)邊的(de)效果的(de)圖片，大(dà)∞λ家(jiā)可(kě)以先想一(yī)下(xià)HTML如(r‍₽​®ú)何編寫。我是(shì)使用(yòng)的(deΩαδ)DLDD的(de)方式，大(dà)家(α≥δjiā)一(yī)定要(yào)學會(huì)這(zhè)個(gè)↑≤标記的(de)用(yòng)法，很(hě♣←σ≈n)常用(yòng)，叙述産品時(shí)經常性用(yòng)到(dào•β ')。

現(xiàn)在我們看(kàn)看(kàn)HTML代碼：

學校(xiào)簡介

首創網絡技(jì)術(shù)有(yǒu)限公司是(shìε•↓)邯鄲一(yī)家(jiā)專注高(gāo)端品牌網站(zhàn)₹∞建設、網站(zhàn)制(zhì)作(zuò)的(de)專業(yè)服務商， α始于2005年(nián)，七年(nián)網站(zhàn'≠)建設運營經驗，以網站(zhàn)建設、網站(zhàn)制(λ↔zhì)作(zuò)、網頁設計(jì)……←δ‌€

學校(xiào)新聞

淺談平面設計(jì)中配色方案2013-4-14

淺談平面設計(jì)中配色方案2013-4-14

淺談平面設計(jì)中配色方案2013-4-14

淺談平面設計(jì)中配色方案2013-4-14

接著(zhe)是(shì)最下(xià)邊産品部分(fēn)的(de)HTM♥φL編碼：

精品課程

現(xiàn)在開(kāi)始完成CSS代碼的(de)ε​®≈編寫：

首選是(shì)學校(xiào)簡介與新聞，其實仔細觀察這(z∞ε&↕hè)兩個(gè)也(yě)是(shì)兩列布局，所以設定寬，并設•₽£¥置左浮動：

#main.containerdl{

width:300px;

float:left;

}

接著(zhe)是(shì)欄目名稱：因為(wèi)這(zh₽λ®è)兩個(gè)效果是(shì)一(yī)樣的(de)。•π™所以直接使用(yòng)群組選擇符把兩個(gè)都(dσ≈ōu)選擇編寫就(jiù)可(kě)以了(le€≠γ™)。

#main.containerdlh5,#main.product¥αλh5{

border-bottom:1px#000solid;

margin-bottom:15px;

font-size:17px;

}

#main.containerdlh5a{

padding-left:170px;

}

先完成左側學校(xiào)簡介，讓簡介浮在圖片右方：

#main.containerdldt{

float:left;

width:110px;

}

#main.containerdldtimg{

border:1pxsolid#ccc;

}

#main.containerdl.xuexi$↕£aodd{

font-size:12px;

margin-left:25px;

float:left;

width:165px;

text-indent:2em;

}

單獨設置新聞的(de)DD标記

#main.containerdl.xinwendd{

height:22px;

line-height:22px;

background:url(imageδ♠/li.jpg)no-repeat050%;

}

#main.containerdl.xinwendda{

color:#000;

text-decoration:none;

padding-left:20px;

}

#main.containerdl.xinwenddsp™♠₩§an{

padding-left:25px;

}

#main.containerdl.x±βuexiao{

margin-right:40px;

}

現(xiàn)在我們開(kāi)始完成産品的(de)CSS€←♠<代碼：

#main.product{

padding-top:20px;

}

讓其距頂部空(kōng)出一(yī)定↕δ​®距離(lí)。

#main.producth5a{

padding-left:510px;

}

#main.productulli{

float:left;

padding-left:10px;

}

讓LI進行(xíng)左浮動即可(kě)。

最後一(yī)步：完成底部：

HTML代碼：

地(dì)址：河(hé)北(běi)省邯✘<鄲市(shì)東(dōng)柳大(dà)街(jiē)15号←‌" 126室  電(diàn)話(huà)：±β♦γ0310-7979386

CSS代碼：

#footer{

background:#d1dce3;

height:50px;

line-height:50px;

text-align:center;

}

到(dào)此我們已經完成了(le)一(yī)個(gè)頁面•αα"的(de)切圖。

幾個(gè)錯(cuò)誤：頭部标記在I₹♥'E6中有(yǒu)下(xià)面表現(xiàn)。所∞•©以通(tōng)過下(xià)邊代碼解決一(yī)下(xi✔ à)：

上(shàng)邊代碼的(de)意思是(shì) ©僅IE6可(kě)以識别。這(zhè)樣我們∑≠€‍就(jiù)可(kě)以單獨為(wèi)IE×δ∞✘6編輯樣式了(le)。

其中裡(lǐ)面還(hái)涉及了(le)一(yī)些(xiē)别的(de)••"γ知(zhī)識。在後續課程會(huì)去(qù)講解。