psd切圖轉換為div+css格式

admin

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

body,div,p就可以了.不需要寫*了.
7 t- i+ ]* c& P1 T) [9 ?9 l* n! ^
*{
/ @! _4 v7 ^6 ]! K+ g0 ?
margin:0px;
, c$ w0 a, }3 X( N: ?4 v
padding:0px;
1 n% F" s: a, _) Z
}

9 D. b3 _' O7 K( o6 d4 H6 q- E$ H" D第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

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

6 E3 V5 G9 w" vbody{

/ I+ ?) y) f; _' {# Dbackground:url(image/bj.jpg) repeat-x ;

}
- }: q" A, r$ X' X3 k$ L$ }
第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
  g3 G( I/ ?& _7 B- W! L
<div id="header"></div>
) q6 O2 @$ y2 j( Q* Q, n( l
<div id="nav"></div>
5 O5 D' U$ Q; x. S( _% z+ C0 h9 q
<div id="banner"></div>

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

<div id="footer"></div>

; ^3 H0 @( e" }' \0 b8 }  _通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.

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

$ q7 S9 ^! v5 U, ]9 {margin:0px auto;
. v! m3 k# d  T3 }% G) V' Y
2 M3 k* O" p6 X( X4 wwidth:950px;

}
; ?& ^' S  o  Z- g% R& k
第四步：先完成header頭部部分

LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：
/ ]! b( y+ V0 r+ s
<h1><a href="#">北京傑飛css網頁切圖</a></h1>
' t/ n! w' p  w, ]+ O9 C
3 q5 ~; ^2 g: o1 U0 V$ e那麼CSS編碼該如何實現呢？
1 y" ~5 A$ W& b
6 E$ f! ~2 l* G. {& m* j大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下

#header h1 a{
+ }- b- q  V: b; T, D, i
* u  L- ^; Q# f) D% P9 Ybackground:url(image/logo.jpg);
2 @$ U2 F3 d- C6 n' ?5 Q* ^
: ~9 x! v9 e8 Iwidth:476px;

) X; ~5 P5 c  E4 b; O, g& ?height:102px;
# H. Z9 w( U' b+ X  f
* g  T9 b' n& y1 E- @3 w, i. odisplay:block;
! t( P0 e+ r( M1 t
text-indent:-9999px;

. P4 g: K0 m) u+ \}
1 x! I, X6 f4 V3 S/ R" s
好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫

<ul>
  w9 i3 j5 v0 p9 Q+ N
<li><a href=" #">css切圖培訓</a></li>

<li><a href=" #">設為首頁</a></li>

<li><a href=" #">加入收藏最愛</a></li>
9 I9 d- A/ k- K7 \0 r5 f
# q) \8 s- p5 Z3 y  ]. _</ul>
5 k0 x& u; k5 U0 k  F3 u
#header h1{
0 X$ T+ `- n# p1 {4 s5 w( v' A9 e1 I" T
float:left;

}
+ z, O, _& X# v' l0 S
我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

#header ul{
3 y+ A# R5 L) t) t
: ^- M1 I5 w! R, qfloat:left;
: m" r1 F( x& {& _+ T
; G  b0 G' L( f1 }8 ~padding:50px 0px 0px 200px;
2 U. i) X* T5 w
list-style:none;

}

為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致

9 F: P0 C& z# P: {8 _#header ul li{

float:left;
2 k* ^% n/ K- N$ w& k
padding:0px 10px;
2 T5 d! L5 I1 K1 W' h) v
}

上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。
% y* O+ @- A2 g, q/ W4 Z# C
2 ~" f( x9 W# V#header ul li a{
8 o  e- P/ p7 Z, Z
color:#555;

+ s: X& a/ y- L" c( ytext-decoration:none;

/ J) {  v/ x1 Hfont-size:13px;

}

#header ul li a:hover{

, A! x/ h1 C+ X, Y" _color:#000;
$ [/ A2 i9 h& m& a
text-decoration:underline;
9 A$ P- R8 b) |  f) t
}
0 x% h- w% d, C' u7 N" ]$ F
第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。
( N4 H, ]; Y5 K9 \1 c0 Q+ A& n
4 Y  R+ |/ `) [) r6 \HTML代碼：

<ul>
, A  j7 u7 }  o  |
<li><a href=" #">網站首頁</a></li>
4 G9 d+ ~6 h8 ^. @; s
<li><a href=" #">網站製作</a></li>

. N, P: G( _& C<li><a href="#>網站製作</a></li>

<li><a href="#」>office培訓</a></li>

<li><a href="#">平面設計就業</a></li>
4 T6 H4 Y9 X- o- I7 n# {& d  Z2 ~+ O
<li><a href="#">div css培訓</a></li>

) ?+ ]# A3 m# I7 j<li><a href="#">聯繫我們</a></li>

</ul>
9 B' V1 c2 o* C, R6 N# M
現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
9 W1 z# v/ l. H4 j3 ]% f( e
導航部分文字跑到header頭部右側了。怎麼解決呢?
% N% D. G5 \5 [+ ^5 b: ]5 ~. d
# h0 x2 U7 y5 }% W其實就該我們萬能的清除浮動起作用了
7 ]4 X# l5 i7 i! b
8 X* h" Z- P- \$ {- g" X+ R& dCSS代碼
5 ]$ ?1 Y5 ?: u. x( F8 X
* Z. Y$ n, _1 C6 G; H. q9 y.clear{
3 g  y& f" v) I" Q) s! e
/ J. f5 t$ C* ~4 P! Q( vclear:both;

}
" J, L9 P2 |! K& g. G
這時候為我們<div id="nav"></div>

3 P/ A8 V  H& J變成了<div id="nav" class=」 clear」></div>
& {; G3 x7 R+ a. e% Q
8 B$ l% w$ j; Z( \& u' @大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。

" a$ l* u8 o$ ?9 c, I完成導航的CSS樣式
/ d- N, W" l- K
#nav{
, M* R  @4 g- j, U  r
padding-top:3px;
6 P# j: _# w' _6 F! A4 C( x) X) x
}

% J: `; e3 x! ?0 Y" x* ?+ f#nav ul{

list-style:none;
0 l$ S- j6 g" w# t( p
* o6 C; \: o9 w}
7 w# {; I1 X+ y* S1 f5 c
#nav ul li{
5 `% ]7 o5 J: n8 o& ^
float:left;

}
9 r$ w2 A  E0 s/ S0 a: U
$ ], S; S) C0 @9 W4 c- r1 ^9 C預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
! D5 }2 n9 s! W4 p9 s2 M# y, L, H2 u" h
' t2 t* ]  H- @& H" p#nav ul li a{
; @0 s/ p6 ~+ E5 x
display:block;

# A1 D! |- q* C4 |8 ?+ X0 E: nwidth:135px;

height:56px;

5 K& s6 H) {& aline-height:56px;

color:#fff;

text-align:center;
, X; x& \7 ]  q' u0 s* h
' |1 h6 A: M0 F: K& gtext-decoration:none;
3 p( x( x0 ^; [1 J2 N
font-size:14px;

}
0 j7 `" x% T3 j2 u* v
display:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
9 x, f9 i2 E- D
#nav ul li a:hover{
! l  Y% y) p2 `4 W- E
background:#177cb7;
4 ~* ]( W# |6 y  c/ @
: P- Q9 W" \, f4 V}
6 Q) \1 Z7 @0 p- `. Z/ `* l& m
現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。
7 ]: ]. b$ o% I
4 P. n1 m( [( T! ~; q其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：
" P; Y& ]# f- |/ _
<a href="#" id="current">網站首頁</a>
; P* U) _$ U( A) A/ |" A, O- b/ @
! E0 N: Q7 X; Z/ S/ s. |4 S: C6 ?# K接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
; Z$ v; p  }% }+ A0 ?- d, O
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
9 @2 j5 f$ o( ]" S7 X
' U# j$ N+ J+ L% Y5 N3 C7 p<img src="image/banner.jpg" height="184"

$ a3 v6 i; m! y' f' V+ ~' Vsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"
" K+ H/ t0 N8 B+ r% X
width="127" />
3 }0 t$ d2 w6 w* T+ U- G
右側導航html代碼:

<div class="subMenu">
! k4 u; w$ n' P* W- Q* z
<h5>培訓課程</h5>
7 i& h2 h. O) W. L6 j: ~/ p6 X
8 X) u& f7 O; Q, v, k<ul>

+ c- S& p" @: C+ p<li><a href=" #">網站首頁</a></li>
: g, D6 d8 ?: g3 H% X: |
. r; @0 I" C! p<li><a href="# ">網站製作</a></li>

* d) b, C2 l% ~5 s<li><a href="# ">網站製作</a></li>

  K  H2 R+ n  r# j$ h( e0 b0 e<li><a href="# ">網站製作</a></li>
2 {. M" U9 |1 q! @' [: w8 H
<li><a href="# ">網站製作</a></li>

. B# }' \' \7 `8 R2 p<li><a href="# ">div css培訓</a></li>

+ Y8 y7 |% ]5 R. ~. n' I  f1 o<li><a href="# ">div css培訓</a></li>

<li><a href="#l">聯繫我們</a></li>

</ul>
9 s& X: n" V" N( H; ~& L7 D
</div>

css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。
4 R, v9 O! ^2 v( p6 I9 P1 p0 b
' z9 Z# ]/ h$ _7 f5 l) Z- i2 W#main{

4 K* q8 y* Q" fpadding:10px 0px;

  w5 i% i" M  m6 B8 G6 g5 X}
+ r: Q" {2 b& \$ T
7 Q$ D  n/ d' o# b; p#main .container{
; s' {3 N) L3 J7 E: E0 C
( ]  U, s0 p+ k. D1 @4 M% v  |width:674px;

, J9 |1 c, Z6 ?$ M/ n: O7 vmargin-right:50px;
  @9 R0 U. M) {9 _0 D! x5 \# |
& X  N. I8 K$ O! x- rfloat:left;
% L% _! ?6 \. i4 n5 ~$ T% t+ F
}

: ]( l/ |% B# W" e5 K#main .subMenu{

width:226px;
* p" I5 m6 k+ h# f" I% |( C5 |: \
3 v9 S) u) I* D8 i1 I' _float:left;

margin-bottom:10px;

/ F) O6 P1 u2 W* m2 o) A' [}

#main .subMenu h5{
7 I2 w. w) F/ ~  Z6 [
; K5 ~" g+ x7 V5 a+ E+ Cbackground:#19577c;
; ]& V$ `+ m" Y' |! \, R2 i
height:39px;

text-align:center;
2 N) ]5 d9 ^1 a: I  W; ]( D
color:#fff;

font-size:15px;

line-height:39px;
( I6 [2 T" [! B; l' O4 b  x
* f+ W" V5 J, H) s}
; e# P8 z9 A; M
#main .subMenu ul li{
! D/ N% u% R* N9 q4 ^; Q  F
border-bottom:1px solid #d4d4d4;
2 e& W5 G+ x$ S- ~6 X7 d$ K- F
background:#f1f1f1;

}

( X/ P9 n7 r* c4 f! \% |#main .subMenu ul li a{

0 O% R8 r/ P: h' S% h9 u0 a& \display:block;

color:#000;
; Q8 p. e) p- x: K, s+ z) \2 b
0 x- J0 H3 q7 c: e) H+ e6 X9 lheight:36px;
: p# {" e' [5 ]( ]  }" F8 s
line-height:36px;

text-decoration:none;
, i9 t" P5 Z1 |" h, X# o# A0 f
7 ?0 u8 ]: A: G+ e- k- _" e4 Y- Rpadding-left:60px;

- }( d+ V  C) c: ^background:url(image/li.jpg) no-repeat 40px 50%;

}

, k5 L4 D3 X# r) Y0 e: c/ f0 o" u6 h$ o#main .subMenu ul li a:hover{

* w; D1 B) d* Z" g0 B0 n+ Y! fcolor:#177cb7;

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

}

第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
9 m" k- U0 m1 ?* ^
現在我們看看HTML代碼：

( L7 M+ c3 h# Q6 f<div class="news">
; s6 V3 _* v, |8 m/ @( m( M2 O  p4 m
<dl class="xuexiao">

& H/ ~9 r, W% i4 m( `5 q1 y<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>

7 K9 b% }! J  i" y. o$ Z- o<dt><img

& z, G4 e1 A. R src="image/223.jpg"
$ W$ K. ?6 w. K# g: |* F0 |
src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
# Q: k( v1 I& |; V' p5 R
width="488" />

<!--[if IE 6]>
( \' c8 ?+ U5 A
( U9 q& n1 i8 N$ r9 ~<![endif]-->
" v0 K  R5 P9 ^! ~
上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。

<!--[if IE 6]>
5 b( T! v  _9 i6 g/ G1 s7 D. Z2 c4 Z
* D$ l$ Z7 }  G4 {0 c) A6 Q<style type"text/css">

#header ul li{

width:80px;
( D# `- \8 X/ U" j; R) C
, J0 r3 ?# b( e8 `. H1 Cfloat:left;
. l& v! S' X' o. z
padding:0px 10px;

" {8 i/ [) P! ?% p: W, Q8 S}

( n+ c* X% _. V4 T; J6 j8 @Header頭部右側加寬度值
6 x* U4 R% s7 s& s5 [" s) f, m5 i
#main .container dl dt img{

' \+ N' D1 l: G) Lborder:1px solid #ccc;

, b' @5 w1 c$ X+ Z: H$ \( `}
5 Q/ |' T4 z. R" ]2 T. Q
9 u! w$ S; r" ^5 ]% g#main .container dl.xuexiao dt{
9 z. `) ?6 ?7 Y* M" M" C
, O+ l# w5 J6 F' e7 v% ^float:left;
- m2 N) v6 w- P* @/ c$ p2 i/ Q
0 J( R# o( h  fwidth:110px;
$ Q) q7 E" X' N. f2 F  y1 Q
}

#main .container dl.xuexiao dd{

, m, H' ]& X6 ]) i1 a; nfont-size:12px;
- A  _1 f  Y! @/ d$ r# }6 z
margin-left:20px;

2 ~8 |' ^: E" a6 P* yfloat:right;
+ H6 v' O7 M9 y' ~* J- ~7 z$ E
width:145px;
  _. P* I, ~& w) U$ X
text-indent:2em;
- f! B/ k2 {% X3 w: |
}

#footer{

margin-top:-10px;

}

0 M4 M2 K: M2 s" R) P" v</style>

<![endif]-->