psd切圖轉換為div+css格式

admin

第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫
/ ^' Z' E3 _  f6 d
8 d. s% A5 u, v body,div,p就可以了.不需要寫*了.
0 t" y& ?8 n: I2 V; f9 b9 O4 j
*{
) C- x2 Q. Z3 F! D0 y
margin:0px;

padding:0px;
) E. e  q  G7 U$ G9 L6 n5 }
8 E3 ^/ l6 {8 s2 L% V}

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

這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
4 n! o  C& w8 @* l% C' w/ I6 B" H
body{

' M% ~4 ^# Q; u0 [background:url(image/bj.jpg) repeat-x ;

}
: X8 m! {3 X1 M* a
: H7 j* c7 t2 f  y9 a3 s第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
; C, j) x; b: H) f8 N4 n
+ }6 Q, K% _6 I1 Y<div id="header"></div>
4 H7 A- S$ X- Z) x  Q$ m2 F
" i& M" |: x% m5 m, T  l* q<div id="nav"></div>
( b( j0 T4 Y* h
<div id="banner"></div>

<div id="main"></div>

<div id="footer"></div>
& u7 h7 {% O7 e
通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.
+ M" F: G, V; X* a) x( z, F6 S- A
#header,#nav,#banner,#main,#footer{

3 M' d* F: G, cmargin:0px auto;

width:950px;
# P" a" j4 i# }/ n" s: m
4 t" y( {! ~4 K$ A8 m$ E}
% F; ~: H0 i% t' A
0 t" v8 o+ @  M第四步：先完成header頭部部分

LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：
  j/ n6 `0 ?& a% q2 t; B6 g8 `* P- Y
<h1><a href="#">北京傑飛css網頁切圖</a></h1>

那麼CSS編碼該如何實現呢？
  s, z& _" I2 Y7 l) i4 o
# K( j, g8 {8 m- }' P大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下

1 @4 J2 h8 D; e6 h4 z) K/ K5 m3 o#header h1 a{
5 I) }2 R; r/ A9 v) ^
background:url(image/logo.jpg);

width:476px;
6 R5 A* t+ q) t6 U9 i
height:102px;
+ p- d. S+ ?1 C3 a; e
# f8 T7 y$ T4 t: s+ sdisplay:block;

8 @8 J* m' e, t: ?, N6 K% Ltext-indent:-9999px;

}

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

3 `* d, a& u) d/ X2 C6 Y9 z<ul>

, o4 m* ]9 P4 I  ~0 E( c<li><a href=" #">css切圖培訓</a></li>
6 B- D2 S4 a4 p9 ?  Z. _5 s0 D
! _0 n& ^& x& N5 }2 x2 x8 h$ I<li><a href=" #">設為首頁</a></li>
  l+ d4 r5 F; f' d- s) S# ^
<li><a href=" #">加入收藏最愛</a></li>

  o( ~9 G0 a8 Q+ a) t</ul>
& v% C; s4 a5 Q5 U: {8 V
" L+ V# c& S3 B! p4 a; r6 t#header h1{
: q: m* m4 ?! r+ |* p: s" I
float:left;
5 M8 b6 w* i7 |7 S! V* `+ l6 d6 ]. d
}
: _3 K; X/ x$ u0 \& _/ e
我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

" l2 Z9 i: K: [0 h0 G#header ul{

float:left;
2 }9 I1 h1 G9 K& h3 y. A
padding:50px 0px 0px 200px;

list-style:none;

5 y; R2 G' y1 `7 p5 G}
4 c7 o+ G& h- H+ l# d
& _* f9 b. l  I' a$ ^2 |2 e9 u為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
" C6 v7 @; J9 ~7 H9 y0 b! @
7 O* G& R7 b/ x4 B' u1 Y#header ul li{
# t2 }: S+ ^) a
" c! p) m" j+ ?) J- A+ mfloat:left;

; W3 H8 m" F4 f0 ]& J- Epadding:0px 10px;
% \& \6 |2 b/ U- I2 S# o
}

7 h" ?1 ~, Q& K4 J' W& r上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。

" k% e5 r$ C2 S* y- w, ?" z#header ul li a{
4 T! D) @+ ]) s. `+ E
color:#555;
! `! f" H8 y+ M( j" x' {
text-decoration:none;

5 s- P* x2 R( _. L5 Z5 e+ Lfont-size:13px;
' Z  o  u6 m" `2 d0 _
}

#header ul li a:hover{
, L" S3 I5 _) S  ?
color:#000;
2 A3 {! q" [8 H* y
3 x9 Y: M' F2 P( u- s% Gtext-decoration:underline;
5 L6 ]. N* \1 U7 d
}

第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。
2 j+ K8 N7 o, ^# ^% `
HTML代碼：

4 Y0 h8 z9 }3 R1 A" P0 }5 _( |<ul>

<li><a href=" #">網站首頁</a></li>
$ y3 x1 W- e! h% a5 [% R
6 [- v) q" C1 z/ l* t5 J<li><a href=" #">網站製作</a></li>

<li><a href="#>網站製作</a></li>

; z. A3 }1 n' _5 A<li><a href="#」>office培訓</a></li>
& C; I" S# t, Q/ v) D) T+ W
<li><a href="#">平面設計就業</a></li>

5 M7 |6 M2 U( m5 g$ V& A<li><a href="#">div css培訓</a></li>
: U; u* w. F& }9 X+ M- p& B
2 s1 C% d" ~) c<li><a href="#">聯繫我們</a></li>

</ul>

現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.

  r) u! j7 }: v  J, \+ F0 N導航部分文字跑到header頭部右側了。怎麼解決呢?

其實就該我們萬能的清除浮動起作用了

, H% ~4 ~$ u& X9 \% [* VCSS代碼
, i6 Q0 O+ b0 E  D) a5 l6 L
* t3 W* a* w+ k5 S& c.clear{
! d; h( W; B8 ^1 l* h& r3 ]7 l
clear:both;
" T* `$ @8 _# U8 ]! k! F+ I
* V/ z) F. r: S3 g- r. J}
' g! _/ H/ d! N& X/ r& Z  u2 S
這時候為我們<div id="nav"></div>
% n, x; a* c: e) i
變成了<div id="nav" class=」 clear」></div>
5 q9 W! F/ b, v4 ?. p; |& e. U
" ~7 ]4 J( B! t6 T9 P' [大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。
9 W: H! R0 I$ p8 y, h0 W! ?
) d% O5 L/ b; {: X  l2 i( K完成導航的CSS樣式

( ~5 v- s; x* P#nav{
7 E# V7 m1 E/ s; T
2 s1 |6 U- Q7 e' b% o* \padding-top:3px;
' T6 E/ W. T8 B. b/ E* C
}

#nav ul{

list-style:none;
# [" z/ Z# r  }2 h( F8 }: ]: _
; a3 ^5 |3 r) o}

#nav ul li{
2 ]4 J) T( G* r$ f" K
; |- W, C3 Z, B+ A4 q- Kfloat:left;
. c8 [* @) D/ d3 H! f
}

! I, j/ H+ H2 C/ }5 e! l預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
! ~, \4 N8 Y- D
: ~5 \' v/ M- L" y#nav ul li a{

4 j' H# E0 `5 Zdisplay:block;

3 w1 [6 o- v: F. E, Z6 v# v* Rwidth:135px;
( y6 y) F; Y4 A. \6 L: O+ u. Z; B
height:56px;
# V3 z# O; N( ^0 B8 P
4 S/ H! [; v6 V8 D1 Q. ]! Lline-height:56px;

color:#fff;

text-align:center;

text-decoration:none;
  F& Q* Q$ m0 K# _2 u1 G: h
font-size:14px;

: a" f) a' ?" s2 u& B, I( u" @}

1 F9 R0 W' B/ {0 Q! o; Tdisplay:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？

#nav ul li a:hover{

background:#177cb7;
' Y- \4 _0 Z) }5 B! C6 Y) a
. d1 u( ]8 T( j. z- ]0 y}
9 `* C9 ^* v/ F- \1 N
現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。

5 s8 P% \4 N& p( h4 P其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

- ~3 G; J: S+ }- o& C- a( T<a href="#" id="current">網站首頁</a>
- i* {0 S4 {$ V& i1 x0 ?
0 t' Z$ t" f9 Y6 b  P  `6 V& S接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
2 h* n% p, V3 `' q2 o2 N
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片

<img src="image/banner.jpg" height="184"
" e& Q4 C  V5 V
src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"
, V4 A& C6 g1 U9 ~; M
width="127" />

右側導航html代碼:
. A% T. _% R5 O, @
# g; B9 b7 @8 f4 T& m: L<div class="subMenu">
+ n* j% y6 Y  \( c+ ^% X. l) V3 ?% j
<h5>培訓課程</h5>
3 S1 f. l4 I& ?6 W
0 ^" }7 y5 Q3 ^% R# n1 r+ [<ul>

8 X/ P) J& k3 y2 y% T<li><a href=" #">網站首頁</a></li>

+ ~, ^' D0 D* d) f' E<li><a href="# ">網站製作</a></li>

<li><a href="# ">網站製作</a></li>

5 b+ z, v" ~) L' @<li><a href="# ">網站製作</a></li>
/ ?( c# S9 E& ]6 @- C* C
<li><a href="# ">網站製作</a></li>
6 ~8 ?3 [% C. l) z6 H* t) ]
<li><a href="# ">div css培訓</a></li>
5 j/ Z1 I& u8 m/ B
9 X( ^) a: \" e, v% U1 C3 t<li><a href="# ">div css培訓</a></li>

8 i% N; C7 U1 @) D8 y) J<li><a href="#l">聯繫我們</a></li>

</ul>

6 R4 q7 \" h! M; ^+ k2 ^1 i</div>
4 x! m9 A$ g. r! m/ {; W& |5 X$ a
7 [  d. `# [$ T, }  q$ q, Fcss代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。
$ @' \- y  e* L$ d! n0 y
8 H8 O! M% m! ]/ a1 P+ n, ~5 i#main{

- Z/ A; R- V; v7 f: xpadding:10px 0px;
: ^- D/ K0 X0 c0 b0 `% b; F& n
9 V& i% o- x. N4 D7 l}

#main .container{
5 g/ b3 ?8 C$ F+ m: K
" K9 }5 Z) _9 X. uwidth:674px;
" B& X0 B/ m/ D9 B9 b
' P0 T; }4 A2 t' g' g' smargin-right:50px;

6 T2 m* d% d( d; Ufloat:left;
4 Z$ P+ W2 s% b8 {' s( W
}
0 F0 N7 P$ ?" [! ^3 k
#main .subMenu{
3 w+ k1 f* u5 w4 g& ]
5 j: {+ E+ R; Zwidth:226px;

float:left;
/ U/ b& m/ B/ {  F1 P0 n
4 m) g& x3 }, d2 U) P, J/ jmargin-bottom:10px;
3 Y, s$ ]1 L- t0 M0 r/ Y2 O8 P
* e$ R* c; n$ m}
7 d. c: I. S, B$ e
#main .subMenu h5{
8 i6 M6 J! t' K- Q6 A
/ `. G" s1 y# n- C; `; Zbackground:#19577c;

( L$ n* a; ~3 s) Y& p) Nheight:39px;

2 K$ {3 R8 Y$ O% Ytext-align:center;
: D! B  W9 E1 n: |) C9 V
color:#fff;
% c' W* s: g5 I3 U; c  l6 c# W6 L
font-size:15px;
1 [8 m" t) \6 B9 e" F/ ]
% J! \& h1 l' ]$ T7 |& Kline-height:39px;
# l, b+ |* |" P
" k6 m4 a4 f+ [1 ~* D}

#main .subMenu ul li{
0 F0 N! U% [) b4 X/ q& J: _
border-bottom:1px solid #d4d4d4;

background:#f1f1f1;

* _  g4 ^0 r- Q}
& f# v: O  M3 f" f. i
4 F- ]1 Q8 p3 v5 F4 S#main .subMenu ul li a{

display:block;

color:#000;
# V9 Q5 u1 A) H
height:36px;
6 a; P$ I! ?, R3 m9 q( l
% \+ s& {' W! i& `) e+ \line-height:36px;
; Z+ o) k* p0 v& G/ B" o2 @8 ^' v
text-decoration:none;
: X  Z2 u; s; G5 P
padding-left:60px;

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

% I- v+ f6 O: [1 c9 q7 @' c}

  q& {. a% N& P- k#main .subMenu ul li a:hover{

color:#177cb7;

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

}
( t* f0 m) d  p
第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
, a' }% A9 u) x
現在我們看看HTML代碼：

<div class="news">
1 I; u4 m; l& T+ Q" J& m
+ a+ _% q, I$ f3 {<dl class="xuexiao">

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

<dt><img
& s, e/ \: J" ]) w) o7 l, j9 P. p
5 r7 p9 |( u- Z' L% I6 ] src="image/223.jpg"

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

0 y! V" ~. X! u9 W4 Y width="488" />
9 V" {# l" m0 m" `. F
2 c6 u5 d- o3 w" G3 l8 c6 V<!--[if IE 6]>
7 e" \) ]' {$ [* A1 ]6 |
<![endif]-->

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

  }7 K& r: k0 ^5 w<!--[if IE 6]>

<style type"text/css">

#header ul li{

6 ~$ R$ A$ Z$ }1 K0 Pwidth:80px;
3 I8 {5 e7 z/ R/ a6 a
7 |( m. X# N( S3 mfloat:left;
/ `. o0 L7 v& j* l
padding:0px 10px;

}
& _) o4 ?0 }' O
Header頭部右側加寬度值

: q! {& V5 r; d. A0 E4 c7 R#main .container dl dt img{
& T* B3 [1 t! Y- N+ i
; |9 e  c1 j) W+ eborder:1px solid #ccc;
4 n; o$ {6 S% O% r1 O
}

6 Y; M0 M7 S0 I#main .container dl.xuexiao dt{
- [" r5 }. D: z% Y( Y9 T
6 a& i. |: y) a5 P9 {8 Gfloat:left;

  |7 n7 c6 }/ C; S1 r5 R# n* Awidth:110px;

}
1 ]6 t, `5 g% G3 X
# ?8 R5 p9 g& F, _/ X#main .container dl.xuexiao dd{
! m9 x9 Y* I6 W  Z; U& s9 q
, h' \' f& Q" z( ^3 Q) Q1 mfont-size:12px;
5 K4 K5 Z& v" l! I
- m+ z: n7 R/ ], C1 N- c: cmargin-left:20px;

3 y& x: i) m: T) M7 Mfloat:right;
3 i% ^. m$ i; a0 v$ v
& \- P- {$ v: j0 o( i, v  hwidth:145px;

9 o4 R. q0 j4 o5 Q( I2 ntext-indent:2em;

}

#footer{

$ W% z- }* M/ k, F9 O& p6 a1 Vmargin-top:-10px;
+ j( b1 M& G) M- g
$ f9 a& b3 y9 q  x7 Q7 {}
) Q, S/ ~2 ~" [4 Q# Y3 V
# s* L9 t) {/ E% J# P</style>
6 Q0 q3 k+ Q$ g% Q" D
<![endif]-->