psd切圖轉換為div+css格式

admin

第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫
* m! H" ^% s# C
7 L" a. W; `+ V% q: Y! F body,div,p就可以了.不需要寫*了.
# _  I$ k  o) _
9 U+ G) t8 h+ N*{

margin:0px;
: e; i8 y' f$ \9 S2 R* ?+ P) A
! F$ n( o6 A3 e9 S3 d+ }padding:0px;

. I  F; J( r7 W}
; w9 \$ D5 q6 I. H5 R4 g
; I7 o* j1 g* r% s2 ]; c第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

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

body{

background:url(image/bj.jpg) repeat-x ;

5 g8 ^2 b8 m, k/ i  m/ E}

第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
' B0 O7 K* p( v) a1 U
  J; C. L4 R! o6 \<div id="header"></div>

<div id="nav"></div>
" Y( [; d5 V, E2 y; a, e* M1 I# K
<div id="banner"></div>
, o' L3 u$ M$ @4 u: l
<div id="main"></div>

. X$ p0 l9 `0 v" r5 ^  l3 o' M<div id="footer"></div>
5 Z8 T! n6 z% P3 ]( z* ~" e
通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.
1 P6 t, F! x* }
#header,#nav,#banner,#main,#footer{
$ y/ L- v$ U: ~5 Z' H; d- u* a
8 b3 g+ w6 D$ cmargin:0px auto;
, D/ ?* O' V* s
width:950px;
  O8 X% Z2 E& |+ x* v2 U
}

第四步：先完成header頭部部分
( l0 U4 N- F, D
+ ?# e' }5 C* m0 i5 Y% R2 N" rLOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：
$ F- ]$ T: s; G; ?$ l* e
: D0 c5 Y$ }" W3 W5 ~$ m<h1><a href="#">北京傑飛css網頁切圖</a></h1>

4 }( E) a% P9 z3 C8 t& o那麼CSS編碼該如何實現呢？

大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下

#header h1 a{

background:url(image/logo.jpg);

/ D& \4 D6 S" Q" D# c/ ^1 o# q0 owidth:476px;
" f$ r$ m5 S" c/ i& T
9 _$ b- B  F3 [height:102px;

display:block;
. O' ?& {2 C% L! O0 ~- E
text-indent:-9999px;
! M* F) W' y4 \7 y' m
9 s( B+ L$ H# T5 f7 \% W}

7 K" i0 r& f, m2 l; `9 F好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫
- `4 _7 ]1 Q  }/ P
<ul>
) i0 K% a% }9 ~6 K' a, @
8 d1 {( p' z  Z6 M<li><a href=" #">css切圖培訓</a></li>

4 R2 A1 O  M1 N/ v<li><a href=" #">設為首頁</a></li>
4 f. e0 B4 V: z; T. O5 X
+ u/ n; ^+ t4 S) `5 i3 |# d<li><a href=" #">加入收藏最愛</a></li>
! ]0 W* f0 W) r7 c
# I* ~* \3 m" W; m</ul>
% ^' }4 Q2 b* L0 n. K1 g8 J# O
  H; x$ J2 B& ^6 R. y#header h1{
' n: x9 W* b5 b9 q$ G7 a
float:left;
) T2 ^, x  F9 Q* A! b
}

) |3 u1 Q7 D/ E. d1 b" O" `) |我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

+ t3 O% T+ f' ?! D#header ul{
. Z3 k8 U# y- J$ V. T+ |- w
float:left;

; q& [. m* ]& n6 M2 fpadding:50px 0px 0px 200px;

" x* _) y) k- F! }list-style:none;
; R% n& p1 c* _: [8 h# Q2 c
}
4 J4 s0 m& ~/ W: t
/ l6 v& A1 X: i1 R# e, N為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
& Y/ U' R1 Q9 p" U" {" q' c+ o
7 c+ j3 F+ x+ P#header ul li{
; |, v( }: p0 r& E5 y- P9 _
, b: [. k1 l2 _  Y/ jfloat:left;

padding:0px 10px;
: F" U8 [8 i" B: u3 ~: i
! L) h  h0 w8 g}
1 I0 k$ M$ r9 a% _" @- R6 }' k, k
上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。
$ z% i' H3 j, I$ A) E3 i* _
#header ul li a{
2 B9 d' f4 ?( _  a  u- A0 W5 P( a
color:#555;
* {+ B  N& a, J( r( f* a
3 t8 ?# S# @: @0 h5 Htext-decoration:none;

font-size:13px;

1 E- t/ k6 r. ~}

5 _  p8 S% @! R! L, X. v, P3 j# e#header ul li a:hover{
4 V8 I* z  ^8 T9 V$ J
% U  G% O2 l0 E6 R) B: pcolor:#000;

text-decoration:underline;

6 E% _6 Z" ]' X9 l8 w; l; M- `}
& O9 t/ [7 f' p4 p3 ?; X' c1 w$ q
* g+ e( ^, ~% l$ K- x# N4 Y第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。
3 _& X+ f" T, `+ l' F, E7 N
# U1 }. ?3 q8 u7 v' C0 BHTML代碼：

<ul>

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

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

<li><a href="#>網站製作</a></li>
5 Y" L3 ^& H* v" `
+ W/ l* J$ K8 C' h* R0 `; A<li><a href="#」>office培訓</a></li>
" g5 @% V" g8 O0 ?% G5 x, U6 j
<li><a href="#">平面設計就業</a></li>
  N; P  K% S- v# V& ?0 W% a
<li><a href="#">div css培訓</a></li>
+ @% L# u5 g, ?) {
1 G( C0 V- ^3 @2 ]3 t: R, @<li><a href="#">聯繫我們</a></li>
: D. \" k& @; K4 e) b) Y
</ul>
, p3 G& x, L- W: a, K0 O
現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
# N/ |3 ?8 c7 a
導航部分文字跑到header頭部右側了。怎麼解決呢?
' t- b- C& y' P5 k
其實就該我們萬能的清除浮動起作用了

  G+ ^! U1 l& h" s+ l+ NCSS代碼

. t; ?9 r% X  B" m9 k" c9 ]5 I.clear{

clear:both;
4 @0 s. x* \! N/ G, H; a( V
}

6 h& R9 E. i+ P這時候為我們<div id="nav"></div>
# _) q2 C2 ~& ^: p, ?" l5 F
' [$ U* E$ i0 @. M9 l$ e2 F4 v2 `# f變成了<div id="nav" class=」 clear」></div>
. b+ o! c9 t3 X! F) t
) n2 b! r! Q# b  L. [* ]; K大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。

$ \. I- V' J1 ~完成導航的CSS樣式

" G3 ~0 ~* n7 z2 M#nav{

padding-top:3px;

}
+ {- _* l) Q2 @
' w0 ^3 F! c" h2 g/ s) |  F#nav ul{
6 R- K; o+ r8 |
# A+ s4 m/ m! W" A0 zlist-style:none;

}
/ x% \) u' d9 O! o' Z/ S) O3 d  {
. Q$ i" l+ u/ C6 Z8 O#nav ul li{
, u9 s2 }) `: H% x6 }
$ l' Y9 {! ?& n* L. Ofloat:left;
) p* X" f- K8 S7 \9 o' q
}

預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊

+ ]; r$ ~$ `2 D#nav ul li a{

display:block;
1 q+ J0 Q) s  k
width:135px;

( [3 Z* Z& k0 M0 }height:56px;
* c8 V( s. z. s$ a) }
4 [3 s) E( h* O7 oline-height:56px;

6 G  n- e6 p7 o3 Y7 Z% B; J* g7 k0 Ucolor:#fff;
8 h: t( ^3 W/ q) m. y" D) d8 v1 N
7 _( J" s3 n+ C9 H' n+ Qtext-align:center;
! D+ p" V- H8 Z. W% H. `( R
text-decoration:none;
" D1 ?/ E6 @5 y6 I7 P, C
' t! @- r2 f9 T. m% \font-size:14px;
6 s( g; t- R1 \% P
}
, N7 O$ E& b6 n4 Z' q  C) i
display:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
" w9 g7 c/ r, r  W" M
4 N, [4 r9 R1 @3 M' e/ F; b9 e#nav ul li a:hover{
( ^( K& ^, ~' K$ d. x; Y( V$ |
background:#177cb7;
: u# p! E( z3 X8 A7 H
}

, G, h6 r' ~+ b( N6 u現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。
. c; i2 s& M1 q* I$ R# h# o
其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

<a href="#" id="current">網站首頁</a>
# z, J* a/ I1 E8 \: a: n
接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
. D" C& k' d  G2 ^3 W* c
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片

- V( L4 }1 R$ l8 s$ h/ A, }% R<img src="image/banner.jpg" height="184"

$ {/ @- Z; F" }: X. q, [src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"

$ s5 m7 u$ F, v0 H' z- h width="127" />
- m" W% m  _# i% w9 Y; W) f# h
7 l9 v' y! W& R4 M' v! p/ R右側導航html代碼:

<div class="subMenu">

' Y. K& O# ]6 C<h5>培訓課程</h5>
, _: a) Q2 n- u) ^7 r" X6 Z
' \% T1 M7 F  R/ G- b<ul>

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

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

<li><a href="# ">網站製作</a></li>
) z4 ^* F' Q6 k) u1 j, i% f
. \: ]+ k8 p' [; J8 `5 o<li><a href="# ">網站製作</a></li>
+ x8 _: L: K* f* D$ F2 m! o& o
# g- u' n3 z3 F" p2 W+ c<li><a href="# ">網站製作</a></li>
4 d. A5 l# P: k% c/ k7 H
0 c, c, P) K+ _' v  y% p<li><a href="# ">div css培訓</a></li>
6 N" Y2 H, Z& A+ V0 ^2 W
) g) }7 n& n/ V1 r. R" B4 ~' k& x- g<li><a href="# ">div css培訓</a></li>

) X) b) ?4 d+ E2 e+ X. y$ \, }' s$ h<li><a href="#l">聯繫我們</a></li>

3 u, i1 q. l0 @6 M1 }) X</ul>
4 I7 B. {; t2 [: q7 E1 Z9 `
</div>
8 p" ]. {4 h; a: S$ [0 P" _
css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。
1 V3 H$ v2 U3 F
#main{

padding:10px 0px;

}
5 K3 [4 U* b0 T. s
#main .container{
% ~) K8 f9 w3 x; Q8 t) V
width:674px;

margin-right:50px;
' G1 C; r$ ?) {9 t2 v, s
float:left;

}
9 f$ j, }. h* u1 [$ C7 L
7 p; _9 C" e* k% s3 M#main .subMenu{

* O) R5 K8 Z$ B: a+ H0 lwidth:226px;

, ^" Q4 g+ Z: ^) ifloat:left;

, o. i; U' p2 L) p& cmargin-bottom:10px;

% ?$ \! a2 B+ A}
0 R3 X1 @; n6 V8 c
! B" B0 R; @6 s! W1 P#main .subMenu h5{

background:#19577c;

1 l( Y  [, J1 B0 J6 ~$ c8 {; mheight:39px;

text-align:center;

  v/ Y* M$ a8 d" Kcolor:#fff;

font-size:15px;
& W0 }3 X0 {0 \% @- H% @
line-height:39px;

$ g9 N* L. q8 I1 {- c. ^% J}

8 n8 g$ {6 c  y8 l#main .subMenu ul li{

% a+ `- x1 O, z6 p+ ~$ sborder-bottom:1px solid #d4d4d4;
+ A& F: w* ?3 C2 i/ r
' y! F) |  Q# b; ^background:#f1f1f1;
! m" v( E$ m( W( f- b: Q7 C
}

#main .subMenu ul li a{

2 K5 q% K9 x( B4 ]8 A+ P1 p* \display:block;
2 l! m# D3 O3 X' s3 e
color:#000;
3 c1 z% V; H& ^: t9 F" G+ o6 S' t
height:36px;
; K8 E2 T. _0 h
+ n" @% c' E! E7 X/ r( W2 \line-height:36px;

text-decoration:none;
+ R* M& Y7 ]( P  Y' _+ S
2 m. v8 ~- T) f0 ^  Bpadding-left:60px;

! }3 K- @$ T/ G5 c0 lbackground:url(image/li.jpg) no-repeat 40px 50%;
# f, m7 d% M* X' p; S3 w
# _  x$ I+ D1 [4 A}
+ G9 R1 ?5 G  L  D2 u9 }: v) H( \- _
0 j0 k, w& d+ @$ l% u#main .subMenu ul li a:hover{

1 n7 L, ~- F6 Acolor:#177cb7;
7 g1 j+ h. B# @1 ~
background:url(image/li3.jpg) no-repeat 40px 50%;
. L7 ?3 P6 ~3 z" O- T( S2 A; N
/ Z: r0 K7 P! E7 U}

% ?) V! G- v8 k. _& {第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。

現在我們看看HTML代碼：

<div class="news">
0 D8 @7 M  }% h8 G! ]
<dl class="xuexiao">

<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
+ |& {# X0 B+ N
8 a9 D7 v6 Y6 a) K<dt><img
' R; ]5 o! F- Y1 O  d1 L
src="image/223.jpg"

' @! N$ e5 H; [3 I8 ]: g1 ^src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
) B# `1 R$ N2 C; \+ b, t# ^
width="488" />

<!--[if IE 6]>

<![endif]-->

上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
0 N9 r' z4 I- J$ N1 x
% W+ f( P) D2 V& }& p7 S7 R; ?<!--[if IE 6]>

( B2 \7 w) p, \<style type"text/css">
, f3 y6 H7 c- S
#header ul li{

/ |. ^' s9 t2 c2 Z1 dwidth:80px;

/ n. R# b9 K/ y+ ~0 K# M- Xfloat:left;
2 a4 V. F+ M& ?( r
/ E; E1 S/ W- I1 e9 o5 O% Zpadding:0px 10px;

}
- ^  u. ?' R- e+ Q5 O) M, N9 s  x6 L' G
+ |. Y* E7 @4 ?+ ]Header頭部右側加寬度值

#main .container dl dt img{

border:1px solid #ccc;

, Z1 y1 h. ^6 p1 A2 {+ {}
( U. k4 K- h* F
  p& h' E$ l* g( a/ `, @! x( V& t#main .container dl.xuexiao dt{
9 p1 O9 R& f* E' |3 p( W& ~/ Y
5 n9 }) t! U3 |float:left;
, L! a% N3 y% ?) A, B
width:110px;

}

#main .container dl.xuexiao dd{

+ x" R  P3 i$ X8 [font-size:12px;
6 A: u4 J: v: N. T! S! f3 J& s8 U6 [
margin-left:20px;

float:right;

width:145px;

text-indent:2em;
: J3 |$ c5 W0 Q! }3 V/ a9 s
# ~+ _0 l( q( q1 D% O, a/ t* r}

#footer{
" D' ~( S" A  k: C
margin-top:-10px;

% n$ C, X5 c- f}

</style>

<![endif]-->