psd切圖轉換為div+css格式

admin

第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫
' V5 t$ {% A/ A( Z4 D. S! q
body,div,p就可以了.不需要寫*了.

  W/ z6 |% N/ h/ Z5 d9 R5 C- R*{

margin:0px;
  Z. p; n% ?7 J. d
padding:0px;

}
* z% l* h$ t# p2 N" ]
第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

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

body{

# D; z$ d. o2 M! gbackground:url(image/bj.jpg) repeat-x ;

}

第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
9 ^6 h* Q. R( {5 l5 U
3 H1 W/ J* Y) }9 z0 f<div id="header"></div>
/ S& n; e0 I: ~) K6 e; ]9 D
/ S5 j. ^; O9 W* n& X, z0 l<div id="nav"></div>
/ T" \4 ]; G# n" V: U, T
9 u# H: M$ z" J7 P<div id="banner"></div>

<div id="main"></div>
. {  h# K# B; n) t# e
<div id="footer"></div>

通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.

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

margin:0px auto;
* P8 |$ m$ T6 d
( r- K* N/ U) [width:950px;
* x3 U3 s/ n  N+ S5 F' n
}

# x" f, @4 y) h  G第四步：先完成header頭部部分

  X; |9 _7 X8 m- WLOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：
- t) S, a9 V* T1 V5 H9 G6 l( c9 ^
: i2 R! G) |  ]2 @- C6 I<h1><a href="#">北京傑飛css網頁切圖</a></h1>

那麼CSS編碼該如何實現呢？
' b7 @; i  ?' \! w. H7 ^
大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
. J9 R% X0 n) U0 W5 p
#header h1 a{

background:url(image/logo.jpg);

: `/ R$ v7 _6 K) \2 H9 _width:476px;
. V5 r; P( ^" ?! {
; Y& E$ Q/ w; O, t& ?height:102px;

: N7 u# R3 Q2 v- K( N2 Adisplay:block;

  S4 o: d- O9 L) G2 otext-indent:-9999px;
  F2 L# \: i# r; m. W# I; d, U
}

好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫

<ul>
5 L/ u3 E* Q" t
# S( c) c+ \, \$ n<li><a href=" #">css切圖培訓</a></li>
5 ?( c! ~$ Z4 m. w0 `
<li><a href=" #">設為首頁</a></li>

. X# @2 d2 [: V0 ~3 b" y$ O<li><a href=" #">加入收藏最愛</a></li>

</ul>

  O8 H: ^7 ]9 r+ H  M8 N( ~#header h1{

float:left;
; w+ K) A8 z- \* e, @3 \" v
$ `. l- Y! i. q}

% ^' A' ^8 A! p9 d  U6 I, r. {7 N我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。
$ D/ A: z; Z) q* g. F) X
#header ul{
, _. M4 B5 D/ V  `: K
float:left;

padding:50px 0px 0px 200px;
7 j7 p8 C* j2 q/ w
& \0 ]4 S2 m$ F& U7 x* `) n$ W, Klist-style:none;

- J. a+ \) u2 I) w6 n}

為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
$ J6 _2 r* W% s5 l
#header ul li{

float:left;
0 S* U8 x6 t' d. t# n( V
* Q) w" l, P/ j! K$ J  t# |- ~padding:0px 10px;

}
7 y7 W. y/ t! `9 C: T
1 \4 A! f2 o% C# \4 o5 @上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。
% q* y2 N$ W# l0 j+ ?7 U' {4 @
2 b3 i# T# F( ~$ v6 P#header ul li a{
5 V1 l6 V) c, H2 }4 t
$ Y8 d5 L% }9 b- g- Z9 E6 Vcolor:#555;
0 \; S& I9 A$ K
text-decoration:none;

* K: r# r# ?: x% ]- J/ A+ yfont-size:13px;
2 F& L; t! h" T- H! r- j
, {7 c% D# l3 [+ `5 s}
# ]- D1 r$ G' Z8 k4 k
9 E4 Z- c1 w; h% M9 \) C#header ul li a:hover{
8 |* c6 \! G% ]# U8 O% @# n
color:#000;

2 O5 }* Y- t9 K, rtext-decoration:underline;
' A$ F& u) E: h  ^3 Z; d
/ D, g% P+ L: f}
# w, O+ U7 `1 W5 k
, [" d& H8 l6 W0 H, B, h第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。
7 v, [, M4 G1 o
HTML代碼：

) g7 j* ^5 {8 |+ g* ~2 U4 j<ul>

<li><a href=" #">網站首頁</a></li>

<li><a href=" #">網站製作</a></li>
) e: N  T' h4 t/ v7 g) |
<li><a href="#>網站製作</a></li>

<li><a href="#」>office培訓</a></li>
0 E/ w# h! M" ?2 h+ G& {
<li><a href="#">平面設計就業</a></li>

& W  @* {6 @: u<li><a href="#">div css培訓</a></li>
. ^0 l0 i) O6 x8 y/ X+ X/ s& _  p
2 F5 y7 O) c: l5 X) R8 d<li><a href="#">聯繫我們</a></li>

</ul>

! S! P" f3 u) g. o; _2 }/ [現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.

導航部分文字跑到header頭部右側了。怎麼解決呢?

9 w/ g+ Y+ j- P) [- t其實就該我們萬能的清除浮動起作用了

% V& D, `4 l! H+ K8 l4 CCSS代碼

.clear{

3 o  y7 _8 Q, @# D+ W- Yclear:both;
; J# ]$ U& N5 {' q
8 |8 R4 `% o! @' R) s}
; q# H# I8 x$ G* ]% q- Z
0 K3 d* J7 b; j- s; _這時候為我們<div id="nav"></div>
$ u2 ^8 t  O1 X- \( X. r  f* ?
變成了<div id="nav" class=」 clear」></div>
9 w, E/ m+ g) y9 c0 z
大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。

完成導航的CSS樣式

#nav{

padding-top:3px;
; l$ u7 I6 f. y% u! O' U5 D( Z! z
+ s9 L& `& d: k7 y( C* |: f' h( }}
, D/ {! S( |3 K" g
#nav ul{
: D+ p7 L! `) m+ R
$ L5 ]5 s0 \7 v. E, Wlist-style:none;

$ S! j! _$ ?, D) ~$ l! P}
6 R: R+ w7 N' }% I: q1 H) O- l
; t  I% G( _- w! N2 N8 s#nav ul li{

5 a* b3 [; g3 O2 Z0 q7 I' j2 |float:left;

}

預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
  D" S  j8 L4 Z7 c& T, `1 E
#nav ul li a{
5 J6 `3 o6 c/ y- e1 `
* _1 x8 C' W5 q9 U1 Xdisplay:block;
  `: A) K5 Z! W, U% E- r
! h5 W2 p4 S7 Y# d1 Ewidth:135px;
+ a. r8 e1 P9 a/ g# z2 V
height:56px;

& |$ M2 {: C3 r) z7 g. Xline-height:56px;

color:#fff;
0 ^+ m1 D$ D  |: r% \
' I' A. P( E7 r) q) n7 N3 z# Rtext-align:center;
' }! Y0 E- Q4 k& h. b: v: V
text-decoration:none;

font-size:14px;
& e7 p; f! ^1 c% p, I
$ w6 D* ^! }, u0 t/ c! N}

display:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
* N9 S: a' z" A
/ W0 Q. j, Y  H! K- v5 f2 G#nav ul li a:hover{

background:#177cb7;

}

- N; `& }& ^' [& S現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。

/ R. d7 B9 p* n% N8 j) d其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

<a href="#" id="current">網站首頁</a>
8 r' e7 j. e- @& ~
" i/ r$ {) \, K9 @  X接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒

第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
  f  l$ ~) N+ g4 T- i' H5 y# L5 g2 ]- B
<img src="image/banner.jpg" height="184"
8 Q' c" a7 @7 T, b( `
3 h$ }% X' I5 {5 @! i8 s0 @$ Gsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"

width="127" />
! v* q1 a" `2 A
2 `. U8 [1 h/ H右側導航html代碼:

<div class="subMenu">
# R' S6 O2 \7 X/ O! `* v
<h5>培訓課程</h5>
8 z6 n9 j3 D# W& h& Y+ O. K
<ul>
" q' u& I; i( V4 H
" f1 H# V4 D8 ]) |<li><a href=" #">網站首頁</a></li>
# v! M* ?8 C5 M2 Y1 Q3 O6 [
; E& ?- i! x, N# T, C: o2 W<li><a href="# ">網站製作</a></li>

0 a, ]! w: t2 |; R& j, b) h: T<li><a href="# ">網站製作</a></li>
1 c7 Q. C0 m8 W8 W' c$ }7 W
<li><a href="# ">網站製作</a></li>
" o+ N+ ^7 \, `! w
+ o& s, o- O2 N<li><a href="# ">網站製作</a></li>

& r9 B# N9 Y! b7 Y<li><a href="# ">div css培訓</a></li>

; G1 j7 {& ^( Z, e<li><a href="# ">div css培訓</a></li>

<li><a href="#l">聯繫我們</a></li>
1 V6 @& V6 y7 H8 G
</ul>
/ O6 U7 G2 h& K8 e; j) W( L
. B: P. b4 B. C# m# P</div>

css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。

$ F0 c, U+ [+ e, u2 W3 j7 m/ {#main{

* ]9 ]! a. a( Z# m+ r" C9 Rpadding:10px 0px;

+ S' S$ K1 @, D}
7 U8 P7 A& d0 F+ X( N
#main .container{

width:674px;
. O! J: }2 c5 ]$ s+ f, o) `
margin-right:50px;
% A& ?( _  J0 l' ?+ g7 B
float:left;

7 c, x: ?4 b0 o- H+ L& Z7 U7 D}

1 [& I# G+ N7 y# n! p#main .subMenu{

( g. S0 {& {$ `( |width:226px;

float:left;

margin-bottom:10px;
7 U  l# G1 s6 g# ~. r6 h% b7 c8 Z% ~6 C
}
: h+ G) n' x: A5 V' W0 e4 K# [
#main .subMenu h5{
2 W/ t; Q+ c# j. s" V9 G- C; x7 r
6 e+ ]& r  e" b0 wbackground:#19577c;
8 k7 `7 i( c1 f3 b1 \% g; W
height:39px;

/ z1 ~9 I* o" y6 ~4 Dtext-align:center;

color:#fff;
8 Q8 y8 t+ S$ A! I9 I
font-size:15px;

line-height:39px;

}

, ~* Z$ m3 G6 X5 Z( W#main .subMenu ul li{

border-bottom:1px solid #d4d4d4;
- J9 p3 I& [/ z7 K6 A3 i
background:#f1f1f1;
& ?" f1 S) O$ t3 V1 R9 J
3 Z/ k- D3 E! j! g1 O}

#main .subMenu ul li a{

display:block;
/ c6 `0 i* z, X: V2 I
color:#000;

$ \. L& w* g1 W/ E; l. B7 m2 Iheight:36px;

5 ]3 h. I9 }5 \1 u6 d3 |3 ~% A# `- ]# Oline-height:36px;

' g' S  b9 r8 p$ T* d. ^' x9 N  Otext-decoration:none;
/ ]; s* C& h" g( K1 A
& g( A1 m! I- E7 y7 I( Spadding-left:60px;

0 d1 m. O/ k. k2 \0 ]% ?' ^- S/ G( Abackground:url(image/li.jpg) no-repeat 40px 50%;
! K1 ?/ l( J: E& t
+ T4 A" P1 ^4 o3 w7 S% w}
6 }6 `8 x! f3 Q9 x
#main .subMenu ul li a:hover{
# T/ m7 K( k1 D, l. w
color:#177cb7;

background:url(image/li3.jpg) no-repeat 40px 50%;

) }! k8 S0 Z) d+ u% M  i0 E  i& z}

+ }1 Y" ~% w* \- D; ]第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。

+ v! g0 y& r2 B3 J! K現在我們看看HTML代碼：
) G! a, @, j! A6 ]/ I' I0 s; s
<div class="news">

3 I( g% ^4 }/ V7 V5 J<dl class="xuexiao">

<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>

2 s/ W" ~( M" [! J<dt><img

src="image/223.jpg"

src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"

width="488" />
# n. J/ _1 \% [) y
<!--[if IE 6]>
* n8 R& K- |1 F8 x, u2 _7 y! k
$ P+ Y7 v" ~5 C1 E<![endif]-->

6 u- f: s3 Q  L7 J) ?( R上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
4 t7 Y6 B9 ]" N, g
<!--[if IE 6]>

<style type"text/css">

#header ul li{

8 t1 I9 d, ~. Q8 \width:80px;
% c5 b0 m" s1 w! D' h: S. ]
float:left;
% l3 s/ w: ?/ d) U0 Y* v5 G
) \# f5 y9 d4 x. B, |  h' xpadding:0px 10px;
. k9 ^1 p5 ?' J! U
}

Header頭部右側加寬度值
4 o0 ~- ^8 a3 }( v* i
#main .container dl dt img{

border:1px solid #ccc;

" n8 j2 q" |2 V% L% \3 i, s) E}

#main .container dl.xuexiao dt{
/ y) m8 q* Q$ r- J  j& b" R* j
float:left;

width:110px;

}

#main .container dl.xuexiao dd{

/ c# c$ e+ N4 l* d9 Zfont-size:12px;
% R5 h; T  [& W4 m2 z
( w; k' r2 V& i; l/ k2 l0 ]9 W/ Qmargin-left:20px;

9 ^" }3 h4 t. n  F5 i4 [float:right;
1 m+ ?4 g4 m; [- Y$ N9 d
width:145px;
' {, D0 m( ^! L
text-indent:2em;
/ a/ ?  b( E- H4 G0 S
4 o1 Q3 z6 O* N3 n}
. \+ F. r8 W+ f0 N0 g- M3 v
& g3 t* o& v4 O7 T, E( W5 D#footer{
: v4 A7 r! f0 h& ^: E
margin-top:-10px;

. p+ D6 E1 y. s- Z9 \}

/ L6 y& U2 q# E2 u</style>
7 ^: M6 E/ @4 o# }( E0 S
* N3 ~8 O  f+ Z0 |2 m* J<![endif]-->