psd切圖轉換為div+css格式

admin

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

+ n( x1 ^0 }8 W/ ?8 I! o body,div,p就可以了.不需要寫*了.
  ?  X% I1 v6 r& ^9 g( _$ `
*{
3 d2 ?  G* T% j4 A5 z
3 H2 g# n1 B' V- |margin:0px;

. d" k# Q' S0 O, dpadding:0px;
& Z3 s, p( \; Q+ @4 Z8 S: a
}

5 c9 i. D* c, F- Z8 }' h: S第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.
' }! Y9 x7 q8 a! A
8 c" n3 |: z$ i7 j! W  p" K這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
% K- r" K! C. g, c1 d: K
4 D; u1 o9 m( vbody{

* d9 v& i4 C% o5 p% g1 Zbackground:url(image/bj.jpg) repeat-x ;
- y+ f( f" m2 H+ R( O0 A/ @
* b2 b' I" o+ S) G. Y. ]}
3 a# G3 p8 W& K2 Q
6 k7 J7 t# A  S2 x第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼

3 V/ `! O) \6 J* f4 E<div id="header"></div>

2 U- q' v" R: O2 l0 t' b7 e' a1 J6 ?: Y<div id="nav"></div>

9 I3 S2 l; a/ n: ]. c<div id="banner"></div>
/ |& X3 p& q  y* v4 }1 G/ @
/ Y% {# E/ y, S! M<div id="main"></div>

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

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

7 {, ~! m6 S$ ^( q, \5 X! V1 `& W, ~#header,#nav,#banner,#main,#footer{

7 Z  \( J' y5 x, f! z2 Zmargin:0px auto;
# G2 t8 W% b: }% ^6 x7 Y
width:950px;
* s+ W7 H( f5 n- ^) F8 V( ?
. r0 ~: q( N: i6 S) V}

第四步：先完成header頭部部分

LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：
$ l. [* K' u1 p. h* e5 K+ P
, u! _5 x2 u0 _# r<h1><a href="#">北京傑飛css網頁切圖</a></h1>
) I  y% R$ S* [
3 k, b# F6 i( G" Y! D那麼CSS編碼該如何實現呢？

大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
- n4 }0 ^3 T2 h! ~' L; ~
#header h1 a{

7 y4 S5 P2 T1 C- r( U+ ubackground:url(image/logo.jpg);

% @2 I& B2 N8 [3 P! dwidth:476px;

3 t6 _! {& E/ Z7 V) a3 kheight:102px;

display:block;
+ v- z9 Y8 i7 Q% {8 V$ j. h
" s4 I( E# m) Z6 h$ ptext-indent:-9999px;
! Y' o5 k: q( B7 p
}

6 b& J, |4 B) r* T好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫

# t( O3 j4 w' z5 R4 d  x; v! E<ul>
1 p) k6 |5 c: x% ?* d1 I
1 q) j5 B$ [5 Y<li><a href=" #">css切圖培訓</a></li>

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

<li><a href=" #">加入收藏最愛</a></li>
8 c1 M) d2 U7 k
6 a: A+ h, @5 z; V/ d8 c</ul>
* x4 |! {. }9 i  T' \+ ^
#header h1{

) y' w; ]& m! E; v8 Ifloat:left;
2 ?1 R( t7 j. B# R
}
( ?! ^! l) z' @0 E* {4 h
我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

#header ul{
7 n, q7 T$ e" H, ?/ c
float:left;

padding:50px 0px 0px 200px;

1 P' e2 P, {. dlist-style:none;

; {  ]# ~1 L5 z$ k2 W}
& [9 m# z( T# w' c' Y1 F+ v4 S
為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
1 D. B3 o( M5 z+ X$ m8 _
4 n% M% G4 L+ e) C#header ul li{

5 U; c0 r: D7 f$ C3 j% pfloat:left;

+ D$ D( b8 w* M% ]  y' W# epadding:0px 10px;

0 x  L* _. T; j  }}
7 g4 O! M% |, `2 g' \8 T
* o6 p* Y6 L0 i; [, F上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。

3 \" E! M% A! C- |6 U2 p#header ul li a{
& Y6 M1 A" u' V  ]
color:#555;

. y" u+ Y& `8 H; xtext-decoration:none;
6 Q) `# e, z6 Z: k
font-size:13px;
4 c' s+ s8 }) l$ E9 z- c! H
}
- P* ]+ Q9 `! I8 E/ [2 t8 ~* u. O
#header ul li a:hover{

6 s! V; G/ j. U" }( h4 ucolor:#000;

text-decoration:underline;
5 A5 D, N: W% V) v7 e) M/ L
}
& v+ G6 h, Z* f' n8 x. f: A; }1 G
2 L( ?+ e! v- e5 d: ]$ S/ R$ M第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。

HTML代碼：

1 i, A( f1 S" Y<ul>
5 g, A! S( {) o! i) O  q) ?
<li><a href=" #">網站首頁</a></li>

/ W7 |0 t3 e( j/ E! u( b4 q5 v<li><a href=" #">網站製作</a></li>

. P2 i* h$ ?' V, V7 P7 b6 Z5 z<li><a href="#>網站製作</a></li>
) B5 t8 \) Q; }
- k6 l1 |$ B2 l1 f% S<li><a href="#」>office培訓</a></li>

  d/ e# ^3 R$ T5 ?<li><a href="#">平面設計就業</a></li>
( L# ~  _/ |& s# B- ?" _
, x$ I' V5 {( c<li><a href="#">div css培訓</a></li>

<li><a href="#">聯繫我們</a></li>
0 w/ i% i. E+ k1 s8 G7 l0 B
3 ^3 d2 Y" G" M9 z+ V, V. }1 U) V</ul>

  X2 w6 S5 ^) z3 m1 l現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
( Z( y1 e9 @- c* k
導航部分文字跑到header頭部右側了。怎麼解決呢?

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

CSS代碼
0 g; u% D$ ~& Q7 B$ i4 p* T* Q* M
.clear{

  C( n, e8 L3 P4 f  Yclear:both;

: O% g; t: e$ _4 c2 X; V}

  _, }) T& `8 x$ H1 f2 E這時候為我們<div id="nav"></div>
8 g/ P& c2 z5 K( b3 D
: H- ?! S+ H  a變成了<div id="nav" class=」 clear」></div>

" s7 B: k- {  y) I  [, t2 N9 n大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。
/ q1 v% D! f: o/ g9 z5 U3 }
完成導航的CSS樣式
! _" }1 {+ u- ?3 h: f
$ l* m* E: T3 X- ?1 a7 v$ q#nav{

padding-top:3px;

}

6 h  j: N4 S$ w1 {- \; H! ]#nav ul{
4 c: H7 M0 `/ v8 I" G
list-style:none;

1 o$ {: x" E; ?* e& c. J0 ^}
: }) r% ^+ k0 S
#nav ul li{
5 s3 r- u- W! b0 V: j
" O, |4 F% s8 |6 ]  G: \$ Ofloat:left;
, W1 W: [' m/ ~% f
}
9 f3 R3 }, \- a1 ^( c7 o3 S1 R4 S# n
預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
7 n0 y, N/ b: C9 ]' c+ _& w/ m
& N9 m8 `" u% X# U0 a#nav ul li a{

$ @5 B3 H1 m2 ~8 s3 D% k1 vdisplay:block;
" l7 v* c1 t0 b
width:135px;
& X8 p, o5 `- v! ~2 H& L3 X1 z8 b
height:56px;

line-height:56px;
- ?8 ?! F% r7 s" i) @+ e
' Z4 ]) \/ X  ocolor:#fff;
9 h  j4 g3 {8 P1 `, T: m7 K1 N7 f
text-align:center;
. i8 o8 W6 N7 N( J2 R/ ?$ R1 K
text-decoration:none;

2 q2 c: R, [4 ?1 Ffont-size:14px;

}

5 ?- w) z  s, Y7 I; Gdisplay:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
; g& g2 o: u) H5 R& g
5 Z2 u8 `- c: _#nav ul li a:hover{
+ t5 L% \1 A* v
background:#177cb7;

}
* s2 L3 ]6 z: ~, C3 }
現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。

其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

<a href="#" id="current">網站首頁</a>
( a; k: n% Q* I8 k) ]7 f% N
/ t$ N/ @$ l# H2 }% a接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
  {3 s' t% _* L' R8 n- @+ b
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
) N9 J' `& t) f3 J7 z: z
1 _  Q% O# o3 `<img src="image/banner.jpg" height="184"
7 ]8 p$ C$ d4 m* f
src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"

width="127" />
* G1 ]8 |; @/ ~
右側導航html代碼:

<div class="subMenu">
% f) [2 @! Z1 v0 X5 r
<h5>培訓課程</h5>

' f, h4 ]: {& x$ ^& q5 m<ul>
; z# d5 i. S( X- Q
, k( \* t) t6 z9 o& X7 w: O<li><a href=" #">網站首頁</a></li>

/ F! s% P: A9 q9 s6 M" ~<li><a href="# ">網站製作</a></li>
& t; x) q1 p$ h6 U" m
% ]# ^. i4 e5 ~5 A+ E( b$ K5 F" n<li><a href="# ">網站製作</a></li>
* T; M9 e1 u5 A4 Y- d
) G0 K& E  U* H2 U<li><a href="# ">網站製作</a></li>
! e1 T6 Z  m) F
<li><a href="# ">網站製作</a></li>
% c) K& F& b  A% }, J: u- b
) A% X6 i" w  d/ i4 R+ Z# v<li><a href="# ">div css培訓</a></li>
9 B- F) s9 @4 ^8 ^
# \3 n8 g* \# \<li><a href="# ">div css培訓</a></li>

<li><a href="#l">聯繫我們</a></li>
# W( r7 o  g, t, |' G9 V4 v1 E& N8 N
! U0 i! L5 j1 R8 K. w: R5 [</ul>

, @+ W: k+ {) A9 }5 F</div>
* k+ q' x4 c- d
7 ?2 \, `$ M! v# F8 S" O1 K/ {css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。
$ x! H1 O$ q6 D1 ^) v, n  i/ A8 Z5 Z
#main{

" b2 d; c5 E  Y4 J7 e) Zpadding:10px 0px;

4 L5 |4 g: i, @; s/ G}
8 Q" B4 i. ?* t, o  m
#main .container{

  D' g( [! q+ u, G, e, Q% ]. F9 Iwidth:674px;

. ]  q; {& ^* _  Y4 T6 F' y( i( r) Imargin-right:50px;
" ~  L$ v# t3 I) W8 K
float:left;

/ c. B* d8 F/ k4 b% m}

#main .subMenu{
. Y/ [' J# d7 p  U
width:226px;
5 _0 ~+ E- @; T% f/ o  e
float:left;

margin-bottom:10px;
' i% E4 B  n2 Q, ^
}
3 k. V( s- a6 K- ^
#main .subMenu h5{
. w. Y; T1 {: M! ]' U- i1 ^
background:#19577c;
; S5 k' b) M" E4 s* g, d7 K( W+ j
6 X( a* l# w2 G+ I  h% u+ Eheight:39px;
+ y  t: k0 X, M4 R) C  ^
/ D0 W) a) g$ t6 Ktext-align:center;
2 |* Q1 A* G" y) C; @
color:#fff;
% _8 \7 ~& [2 x9 B. @( n8 }, H  Y
font-size:15px;

8 G2 Y) ^( Y" O( }; t4 rline-height:39px;

}
6 }) w; Y) t/ P7 h
#main .subMenu ul li{

- t' V, Q0 e7 |3 Rborder-bottom:1px solid #d4d4d4;
3 K0 i# z5 J3 Z9 J' X# q4 K0 T
background:#f1f1f1;
0 @$ u; ?6 a( ^+ f1 [! ]2 C
}
6 x' @# E% ^% A, _" ~3 P, u2 ^
( b* z( n3 P3 ~#main .subMenu ul li a{
8 J+ W5 w- j" `' a5 _
display:block;

color:#000;
" R0 ~4 J* S: J* F
; k0 i# k* J: \6 Dheight:36px;

1 ]2 ]% p( V/ M6 X# P2 A1 wline-height:36px;
+ N' T! o4 Z% h3 t% l
0 |) j5 D1 e% \text-decoration:none;

# y6 l4 o7 s8 Z; x! W  jpadding-left:60px;

1 Z8 v2 v1 m5 X3 n  Obackground:url(image/li.jpg) no-repeat 40px 50%;
2 a+ @; C. p2 w# |3 x" g) u: s; e
3 S8 I9 m7 d0 w, W, t5 D}
- b7 t) B- u/ j; O" Q" k
#main .subMenu ul li a:hover{

color:#177cb7;

3 L, `; F+ h- I/ U1 Z9 ubackground:url(image/li3.jpg) no-repeat 40px 50%;

2 h) ^" U; p( Q9 W/ T}
3 B2 E1 Z3 u4 @3 ^- |
: t2 |( `3 m$ h4 f+ a& k第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
% X( K* k' k$ ~, f6 p9 R/ y
現在我們看看HTML代碼：
; B! N0 }, ]8 V  }
<div class="news">
. q+ k$ J& q! g# R6 F
<dl class="xuexiao">

<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
. X3 p4 L0 @% w  Z
: e& f) f" d: I. r$ i/ O$ s<dt><img
0 R$ q, }- Q* B7 @$ I1 o
( e( ]( ]& p6 c4 o src="image/223.jpg"

src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
1 Y7 m$ h* r% Y& U$ m9 t
  A% h$ w$ N0 X  z& G! Q width="488" />

, A5 e! ~$ X( B% Y) v9 p" y<!--[if IE 6]>
* I# D$ Q: a* ?2 d( t" i
% @/ [6 F  P& L' U- y<![endif]-->

上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
3 D& ~9 k( S; J5 [( c
<!--[if IE 6]>

<style type"text/css">

0 Y9 t7 ^+ a; u' x" ^#header ul li{
" j! {, a, o1 L) }+ w& M( J
width:80px;

float:left;

padding:0px 10px;

}
3 ~- J. E! g5 h5 d* V9 J9 o' c2 _
Header頭部右側加寬度值
4 D4 X2 Y0 o; {- s; U( u3 W, E
#main .container dl dt img{
+ J& i1 \! o. b5 q- h2 E# b
border:1px solid #ccc;
6 k, Q' \5 Z8 g
}
; R% K9 Z% [$ U/ v; u
# F+ E% y% U0 G#main .container dl.xuexiao dt{

float:left;
% H5 ^8 u: |  {9 T
/ {6 M& |% }, O9 kwidth:110px;

}
( m6 q" Y$ H1 v. d9 V: [
#main .container dl.xuexiao dd{
0 y, w) U; c; D: v
% I2 n  A% H- o  d. |* i- Rfont-size:12px;
. T0 d. v; m' J7 X
3 {' u! N- |! E9 h. ~4 `margin-left:20px;

float:right;
" [9 G' Z: L; W7 N
7 c- P  @3 Z) e- j/ }( @% Swidth:145px;
% y- j& G$ o. d( s
3 F3 X! N  s$ w/ ~text-indent:2em;
; e& P6 _6 s2 r( @
& H' U) u: v4 J; J. @+ p}

5 `9 |, h6 I1 v/ R  e#footer{
8 y! f, j  j$ E4 d$ n
' r+ ?, H" p" k  emargin-top:-10px;

}
% }+ S% z! T8 D) I( h8 |6 v
</style>

4 F9 X' d1 s  f! T, v$ y7 o% d# V<![endif]-->