psd切圖轉換為div+css格式

admin

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

body,div,p就可以了.不需要寫*了.
8 @8 X2 n3 V) l7 y" j# U
' w" P1 x4 s* J*{

margin:0px;

( c1 G, S7 `' p- D: f9 N: Spadding:0px;
8 e- X3 S- R' P0 z; V/ H7 C$ Q
, b6 E7 Q+ p$ ~. ?# E3 Z6 F}
- }$ I$ l2 U. ?  x
0 z. V5 J+ C# Z+ A- o$ h第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
; v7 U7 i- _% P% A& j
2 G/ A6 C+ \* sbody{

% m. P! R- b: M& ?background:url(image/bj.jpg) repeat-x ;

}

" p  o, i' l4 M+ @! `: W第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼

<div id="header"></div>
: ~# Z8 X& g. E8 v3 M9 U
: b" Z7 I+ |4 U: C$ `<div id="nav"></div>
6 K" t9 C# b! n3 o5 Z6 c
  d9 e: T5 E2 ~9 ^$ \<div id="banner"></div>

1 ^9 s1 {* {% n; k* ~6 J8 o<div id="main"></div>

3 y1 z$ E7 m6 ?/ y<div id="footer"></div>

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

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

margin:0px auto;

6 P0 k/ N/ F" u+ B( }2 h8 Vwidth:950px;
  }+ a* _- T/ V: F5 @
}
# j5 ]8 K. h6 ?+ @& b8 \
第四步：先完成header頭部部分
6 Y8 `& l5 S/ o& ^7 L5 M. d3 T
LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：

# A% `5 x# Q, }<h1><a href="#">北京傑飛css網頁切圖</a></h1>
) R3 j; }: y; E) h- N6 E: w- Y
那麼CSS編碼該如何實現呢？
2 {$ }, q+ ~" }! |/ U  K
大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下

% b3 c$ W1 v* D1 N1 b#header h1 a{
2 @  J/ k5 B' r) B) I
2 C* E1 j, U9 O1 p/ J. ]8 ]+ _" t) mbackground:url(image/logo.jpg);
9 l1 C1 |% g3 N. p. J" x
width:476px;
7 U$ O+ x5 B  W+ i  s* a
) {. T; K$ E: O3 a0 J3 h% dheight:102px;

' S2 q7 J% k: \: K! _. Kdisplay:block;
/ J2 w) i/ L  w  @+ C$ C
8 i& U5 W5 i  j; T2 j1 Z( b% w  m' P) vtext-indent:-9999px;

7 \* G; |3 C4 p9 n- l}

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

<ul>

4 i+ l9 r; {* S' K7 T& c! o4 A<li><a href=" #">css切圖培訓</a></li>
+ T& X$ ^& ]4 u3 m9 [1 S
8 t1 }1 b$ G% p<li><a href=" #">設為首頁</a></li>

<li><a href=" #">加入收藏最愛</a></li>

3 i* b3 [5 _1 x7 U4 d* D; a3 \9 t</ul>

) o6 a2 |% |+ Q# m0 m* F( w0 G. o#header h1{
. h8 ^7 `5 c5 m/ w7 S+ j3 Z
/ G% Z) z9 f- _% p% v% v- R2 Nfloat:left;

' ]+ m6 \+ Y4 l7 j}

我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

#header ul{
* n7 g5 Y- M) m( H2 T3 o
float:left;
. o" E; h, \/ }" A' W1 m& t
padding:50px 0px 0px 200px;
3 _3 E: j/ L4 x& T
list-style:none;
9 ~1 ]* a# a3 H& A! O$ }
4 ^, `/ H9 J6 h7 [9 w}
! X6 T3 k& i. V; q, E1 u
! `; b1 G. D; |為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
# _; ]& R; b' P& V5 d
#header ul li{
9 @" N' s) u# L1 \5 ~/ D
float:left;

) d9 N( j, |5 G- hpadding:0px 10px;

) E% \" X+ F' K8 f6 C/ m( Z. |. i}

& W' u2 i1 U1 v/ W  M3 w; d上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。

#header ul li a{
6 ?2 o5 H) f. ]% |4 n" z
, o: a0 r$ ^( d( a: n- _0 Ccolor:#555;
3 a* ?1 B2 d8 S/ s
text-decoration:none;

5 c+ n/ m( H1 e  G/ e$ cfont-size:13px;

}
& B8 }. o; }9 ~
#header ul li a:hover{

( S% S( k; X9 J" j8 ?color:#000;
$ I7 [: x+ `2 B
text-decoration:underline;
9 f  J% t  M/ N- M$ O
( M4 W4 A: ^& C8 ~( d}

第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。

# Z5 s" A# D) P) B7 jHTML代碼：

<ul>

/ m5 U; Q6 n% D' F, m+ S<li><a href=" #">網站首頁</a></li>
* r$ U6 E8 W) b' y9 R9 R  c! o* n3 @. t$ x
$ a( D" H. |+ C* x" \) S0 e. C<li><a href=" #">網站製作</a></li>
. f" A- ~* x( k) Y
1 i/ B& M4 X9 l: ^<li><a href="#>網站製作</a></li>
# @- V5 B0 W( s; x9 |$ @
<li><a href="#」>office培訓</a></li>
. y% P; j4 U/ U1 `
9 e/ [4 N5 ^8 L& l. T<li><a href="#">平面設計就業</a></li>
3 @8 g1 `1 s' e1 K8 F' L+ r
/ [) C' n: U9 z/ t7 z/ u<li><a href="#">div css培訓</a></li>

, K- j! _8 s2 n# w2 c! d<li><a href="#">聯繫我們</a></li>
8 o( f' z' e- Y' k$ f; y
0 h; c3 P6 U2 |( M* j( [+ Y) y</ul>
& }- @* M0 l3 G- o
現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
: h& H2 W5 k% A* _  P4 @
3 L4 O1 ?) N. Z, \% u: T. I/ O導航部分文字跑到header頭部右側了。怎麼解決呢?
! v0 A! j1 h7 m, e! G
' x0 D5 x# L' a8 {其實就該我們萬能的清除浮動起作用了
1 w- G$ b! Y1 [+ n4 k4 d! k
CSS代碼
" M1 K1 `* g$ y9 R2 O8 }
+ U6 o) \: W4 X* l0 U.clear{
- x8 Q7 r; ^" S3 W' J
clear:both;

}

這時候為我們<div id="nav"></div>

2 Q2 t3 `! m( h+ M6 C' i變成了<div id="nav" class=」 clear」></div>

大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。
. k, P; C# @2 R4 L+ d& P2 z' A
完成導航的CSS樣式
+ l  V6 Z1 f1 \* o+ Q8 h: u
, }' h: `4 \7 q#nav{
' R) p& T  x) R. u
& p- P( W5 z8 h: g  R1 C  rpadding-top:3px;

}

#nav ul{
5 T4 T5 {0 L* q$ k) d. \: f- }. S
; M0 W( n3 x1 g! @+ @list-style:none;
) q/ R6 H2 I, @7 o8 [
}
5 I8 `- c: b2 s+ M  B
#nav ul li{

- m" v# R, L" \* V( q8 lfloat:left;

: f2 A6 ?: a6 r# }. n" o1 n}
: x2 e# a+ g. Z
預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
* U3 r; t1 F! o  D3 F
' R3 c" n3 k; Q8 M#nav ul li a{

display:block;

width:135px;
# X. c) G- Z* t3 f/ b/ C+ T7 s( ]
; k' x( ~# B3 mheight:56px;

9 z, c* v  O0 d0 i: Lline-height:56px;
, A; j2 p  Q) f% o4 s
# V& Y  `! B2 H& L+ Ecolor:#fff;

* t  H$ h8 x8 K9 e1 H# P; a5 itext-align:center;

text-decoration:none;
/ F2 B5 A1 g5 X! J0 `, n% q
font-size:14px;

}

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

4 h8 w+ c- E6 a0 |5 T7 g0 M8 A#nav ul li a:hover{

background:#177cb7;
' x* t! B1 m& f* p2 I3 ?
  l: z8 \) @+ d+ F" f) q}
+ U1 s" E# W7 i6 p
現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。

其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：
; f$ |* |9 B: j, ]
! }9 w. x/ |( O( j1 a0 U. @<a href="#" id="current">網站首頁</a>
, p: \4 T3 L% J" J- Q; j
3 P  y6 j. z% e0 y- r) t" {接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
5 G# ~) F- j* X& E9 H7 G
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
! _% r& M9 g( H4 V( b: y0 R
<img src="image/banner.jpg" height="184"
# a' k7 h( V6 F# Z5 p
. K8 O0 ^1 K0 Gsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"

width="127" />

右側導航html代碼:

<div class="subMenu">
* f& S% i% y, O6 L' ]3 z% ~! x; J0 m
1 _. X8 k+ [# `- a2 M<h5>培訓課程</h5>

7 F6 h: \( k5 x4 x/ X5 L! U% h<ul>

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

3 _2 q) ]/ Y8 S  v$ w, g( e6 W<li><a href="# ">網站製作</a></li>

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

<li><a href="# ">網站製作</a></li>
4 Y6 @& z/ S0 u6 ]/ a; M0 D
<li><a href="# ">網站製作</a></li>
# t% y5 |0 `; ]6 {' b& B: p6 T
& y7 t( |$ g/ d% f  F! @% r) I: _<li><a href="# ">div css培訓</a></li>
9 E9 k# r6 h# Q: I: {3 ?
<li><a href="# ">div css培訓</a></li>
- Y& \1 K" D2 Q1 p' H( S
<li><a href="#l">聯繫我們</a></li>

4 J% [$ k5 T# e, ^# w</ul>
& @3 g/ z' n( o; Q: p/ G
6 L' y. f7 \. ~+ k</div>

) ]8 c- [* I! s$ g; ~: a7 Bcss代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。

#main{
$ X& u5 \% |, ~) B! D+ X9 _; ]
( H  P0 U" k3 R! f$ ^2 ipadding:10px 0px;
1 _' |: i* P" T: P2 k* c
}

9 s* z: a( Y1 x# G% w  Y+ H#main .container{
* ^6 @- ~" E( z5 U
/ w* g& _( K3 Z4 f. O5 Bwidth:674px;
% Y4 E" r7 J9 I$ J
* c* ?1 w& ]& k  U, G- @: V# Mmargin-right:50px;
! Q* G9 @. P* }  _
6 G' |4 e: C/ N9 |/ g& n. bfloat:left;

! o) B+ B% H- s; \}
' l- W$ @7 L3 w/ I, k8 V
#main .subMenu{
3 U- L9 a6 p" K: j/ M
8 N1 W0 T- Q4 g9 p3 Awidth:226px;
" w! K2 J9 K  t+ a0 X% T6 S
float:left;

  q' a2 [( e( C& R1 Q1 v; Ymargin-bottom:10px;

}

#main .subMenu h5{
0 r& p& W2 ?' s4 F2 L& m0 w5 n
% A' b1 K6 b' m/ z3 dbackground:#19577c;

height:39px;
8 `1 [) `: B0 ~! ~+ F
text-align:center;
: g2 l/ K9 N, a/ c5 [
' E1 L$ m- [! O! J  A8 v7 Ocolor:#fff;
1 \3 _& ~' }' E" Q/ Z, D
font-size:15px;
) M  i; a  r. w. R: F& V9 r
3 g. m' E& \# t6 L5 n2 O! I/ j2 Yline-height:39px;

}

+ x8 S, [3 |2 q0 K7 N#main .subMenu ul li{

border-bottom:1px solid #d4d4d4;

background:#f1f1f1;

4 L) Y* {/ m) C3 f6 I}

8 J! Q5 f3 V' Z4 N#main .subMenu ul li a{

display:block;

5 S0 Y) N) v$ u' }4 ^5 ~& S5 G3 Qcolor:#000;
3 }7 M2 @( u9 _& s% R
' A8 ?; G  t. M8 w- \( U0 h( mheight:36px;

line-height:36px;

2 X8 f( @6 Q* y, Stext-decoration:none;
' }6 F; W- i0 }7 U: H
" O& o. Z- L7 I* e& V+ cpadding-left:60px;
2 L# ]8 E- @) ~5 t* c1 ?# S: Q
# H0 r' \+ v- x. @) Ybackground:url(image/li.jpg) no-repeat 40px 50%;

}

#main .subMenu ul li a:hover{
$ a5 f& Q, L# H7 L, b" `
color:#177cb7;

background:url(image/li3.jpg) no-repeat 40px 50%;
" y/ _2 F+ E. j% a' U. s
+ [# C+ J, K! M/ {( S  |}

第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
3 _8 n- k- e5 a: `
% ^! c1 n( V6 b" c現在我們看看HTML代碼：

. |5 c& t! W( G3 T<div class="news">

<dl class="xuexiao">
% [0 F* A) B7 y
- m, a/ L1 m* b8 ^3 K1 F<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
/ W' u- ^6 ^- g. j8 E
<dt><img

) J5 W2 y- h8 [" Q9 t9 W src="image/223.jpg"

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

width="488" />

. Q/ |" h+ S% g! |8 ]2 Y9 I5 H& ?<!--[if IE 6]>

' _$ o( V( N" z8 T% k<![endif]-->
$ u: `7 J( g% }# f
上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
) J4 {8 U' x  p8 a& I; a# f+ Y
<!--[if IE 6]>
. F8 Q* j; q. d
<style type"text/css">
7 V/ q. S& t5 v" S3 ^# z/ s- H) A
- @3 m: S9 j9 h#header ul li{
( n4 u; O% R8 ?5 p
width:80px;

( W' w0 `# `) p# y; A5 \9 ^float:left;
" r9 h9 s1 [+ d6 x0 d
padding:0px 10px;
* T. w- t( i  E4 k6 W( F) j
}
3 O0 h) Z1 d+ z. a, q
# E3 {" R& B, u% XHeader頭部右側加寬度值
: m. I2 ^6 S, r% H
#main .container dl dt img{

border:1px solid #ccc;

}

; P) p) S* w$ r1 k#main .container dl.xuexiao dt{
% o2 g- a/ C& G( f8 m3 Y
float:left;
8 T. k6 S  R/ [5 P  x. X
width:110px;
3 q/ R! s) V+ G1 G5 ?$ R; W
" |. N/ m9 F3 g, b, F& L6 J}
. J; L& c2 E7 ^) _. ~
#main .container dl.xuexiao dd{
6 S& H0 b" {0 K" H3 L# ~) p" d' ~
font-size:12px;
  H8 F: P) r# n- V7 `. y0 k2 a
8 k( o% W7 Z: v6 L* q: }margin-left:20px;

float:right;

width:145px;

0 W% X$ ~) q4 z7 [text-indent:2em;

}
( A8 h$ Z3 w* W6 U  I. _. ?( T
#footer{
' Q) N* i/ ]# }
margin-top:-10px;

}

7 P& J% [- d; F</style>
! h/ i% x" ?2 L
" c& G/ E8 M2 m5 |/ Y: a" V<![endif]-->