psd切圖轉換為div+css格式

admin

第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫
' r$ @* s& M* s; C# |
6 B3 }+ P8 M) h4 Z) V body,div,p就可以了.不需要寫*了.

*{

2 h# G8 S. M; ^7 _& _  F: Amargin:0px;
- t9 G+ H0 p4 y/ B
padding:0px;
* i  p' s" ~5 J: N7 ]
}

5 _- Q' h5 S# C& N' }2 i' z第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.
2 g( [/ Y6 r: B3 l& @$ P
這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
  P( m" s# U6 s0 N+ K% b  Y
body{

background:url(image/bj.jpg) repeat-x ;
7 k# G- W$ [* ^% `& T
* I8 J3 p. q; |3 s* A) q( l, ^}
5 ]7 h3 H) f3 s9 k1 X. P+ [
第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼

<div id="header"></div>

1 n$ _0 @3 w, b! {<div id="nav"></div>
9 \5 k4 }  E5 L& A& O
) L* @" ?/ Z4 O* U+ o8 S6 s<div id="banner"></div>

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

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

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

5 z0 T& }/ T2 C  r6 P7 E#header,#nav,#banner,#main,#footer{
6 l0 H$ f% G( U
+ C8 T0 R, p6 i! c% v1 T$ @margin:0px auto;
( n0 Z0 _( M* v3 y8 e5 R
width:950px;

% U# z8 i- [" Z0 C9 V- k}
. o3 n+ P- d2 E  m0 s0 k2 m
第四步：先完成header頭部部分
% P" ]- F, S* T  g% d, g' f" Q4 o
LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：

: f" p5 x( O# q; b<h1><a href="#">北京傑飛css網頁切圖</a></h1>
5 k" `/ q- O6 g4 I* l8 x0 h9 A
那麼CSS編碼該如何實現呢？

! [# e6 t, V% a' n2 \3 S9 W大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
+ F9 d+ B# a, M0 p! [# N2 J+ [) p
#header h1 a{
# N! e& U$ w- y0 [# R
9 ]& \6 H; `# x: ~2 [8 U1 abackground:url(image/logo.jpg);
4 G3 E6 Z0 B2 u* L! ~; T" ^2 r
6 Y  W1 a- V. r5 Q1 v3 n6 Pwidth:476px;

1 n4 `, G- N$ _$ V  Nheight:102px;
2 n/ ^2 ^. C3 e3 }
display:block;
( Q1 t3 k6 j1 n* F
2 f, n# [$ W& Y" B" S1 ntext-indent:-9999px;
/ E6 f( \' x& m7 C& T# s2 B
}

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

<ul>

2 ^" ?2 _! p$ c, J8 i$ L$ B; v<li><a href=" #">css切圖培訓</a></li>
+ b' q4 x" `& S8 p
<li><a href=" #">設為首頁</a></li>

, }% n, E4 u2 v( M<li><a href=" #">加入收藏最愛</a></li>
, e  q8 _9 z+ G' t0 K  l) N6 a
( K. C# i0 W1 E" x" \9 @</ul>

4 y* @( [" W/ ~* H$ v: N9 U#header h1{

float:left;
1 l, B% w2 I1 ~# s; n) k/ |
7 W7 _& b. q5 V5 f! z* [7 c4 q. Y}
/ v. h( d9 @# Y9 @+ a1 w1 d5 n
) @, F# K) A  Z% d8 [/ s* ~3 X, B我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。
% q* D! b7 s! }4 [, B
. g$ K0 b( Z- a2 q; T( G# f#header ul{

float:left;
* f( a/ D2 t6 ]5 s& d' g2 n% w
padding:50px 0px 0px 200px;

: F% p& U+ Z' m. llist-style:none;

+ u: M. l% y6 _3 {9 T}

% j% D; L; G( F4 j: c6 N7 G為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致

#header ul li{
, H8 K: M8 P& }& ]
float:left;
, i5 |% n9 P4 ^' }) H' M
padding:0px 10px;
8 H2 u1 f& y, L3 Y. V' s
; r: e+ Q6 t1 ^% A3 b  N! G; h' [}

! ?/ N# Y1 L+ t- |上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。

  s7 V7 \5 H( k/ [& O#header ul li a{
( d. c% P& {& b, _0 d
' i( o. b2 z: b, }1 pcolor:#555;

$ a$ H) r( S2 r; f% Ltext-decoration:none;

font-size:13px;
' c5 n" ^. Q; c! t, W; i: y
5 y- o$ Y8 e" F6 T3 Z1 e}

1 `% T1 o4 P9 c, r% Q1 b) y#header ul li a:hover{
6 u! d7 Z" H3 t
/ D, O3 Q7 n# Z. r# Zcolor:#000;
& @1 T7 Y9 B2 C2 \9 n2 f, _8 ^: T
text-decoration:underline;

}
3 ]0 V9 H  ]; s9 c: w. c1 ~, X" @
第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。

HTML代碼：
2 _: A4 i+ r' n- H
<ul>
8 T& {- \" M5 R5 C
4 M( X+ u# S  y1 S0 S<li><a href=" #">網站首頁</a></li>

+ C4 G% w/ ~; f4 @$ Q# a3 p<li><a href=" #">網站製作</a></li>

2 D. s7 o. }! p2 D. w<li><a href="#>網站製作</a></li>
2 F/ Y; T5 T" z+ j  u
# n, b6 y: z% S  r- z' N- y<li><a href="#」>office培訓</a></li>

<li><a href="#">平面設計就業</a></li>
5 j6 `' @: `  b
<li><a href="#">div css培訓</a></li>
& q. J5 l2 t' q6 |
( z$ p+ o  a/ T# M3 @<li><a href="#">聯繫我們</a></li>
5 j2 ~4 @* c4 \, g7 n# G1 J
</ul>
. w2 V5 ~: Q+ Z! E4 Z6 f3 F" X- M$ i
現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.

導航部分文字跑到header頭部右側了。怎麼解決呢?
4 S! l, z, `. c* ?5 F# G2 y. J
: u4 a1 ]' r& [9 F) g0 }3 b其實就該我們萬能的清除浮動起作用了

CSS代碼

" a: l- d! F6 T$ {+ }  G2 U.clear{

clear:both;

}
' X2 n  \0 _! n% P1 C2 m# _- L, k; E
( Z1 m- b4 i: S1 E, {4 K% h這時候為我們<div id="nav"></div>

& u  T  q1 e* p* v: Z  n' d( c變成了<div id="nav" class=」 clear」></div>
/ C1 G/ l! l4 i+ l+ z
大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。

完成導航的CSS樣式
. [+ B. t- f# U% G! ?+ z
5 F5 ^+ ?& o  L, c3 m6 b$ x- a. x#nav{

padding-top:3px;

}
+ m7 ~( P& ^  c+ Z4 G! i
! u0 M7 n1 `" J3 b6 M* h. W' q#nav ul{
# k: C9 T% w: Y( ~$ g
" l9 l! D0 X- |0 h9 R8 B8 n! nlist-style:none;

}

  i( o9 u0 R- Y3 Z# W- M& f% m4 n0 W#nav ul li{
& H5 u/ T8 I& r/ \
- |" u# K. K' T# |$ j! M& ^1 Afloat:left;
2 J* _, V: m+ k
& B; ]  S; s7 W7 `8 V3 W5 Q}
3 b  Z. E, ^1 p! [7 x- b7 X
預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
* K( r) y3 |8 S& H% f) z" B
9 P% v+ K1 _0 O  u#nav ul li a{
6 y5 P. j$ @% [- P: k
display:block;
' y- U* b. v9 Q4 L
width:135px;

height:56px;

line-height:56px;

color:#fff;

text-align:center;
1 F* E" t- B! _3 D" W: O- m: D
# l6 x5 [$ o9 W7 P/ Rtext-decoration:none;
. L' s8 h$ m% \' w0 O" V) T
5 ]2 w  k$ L2 u: Xfont-size:14px;
1 F0 l0 l" E. D4 n9 R
4 B8 s  m9 p1 u) Z}
4 S4 ^! k( A+ F, X0 Y% Z
3 L! ~2 {1 W: q; }display:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？

$ t( j; a# L5 |7 M- @0 K0 I7 x#nav ul li a:hover{

2 Q: Z. P7 ]& l& w# K- Gbackground:#177cb7;

}

) A  l8 L; Y& U, M) i4 R0 R現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。
# ?. F6 @9 J! ^0 l2 B1 m) U
: f1 O1 W0 W4 J' [* Q其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

9 x7 i+ y5 H; k& r; N<a href="#" id="current">網站首頁</a>
0 ~0 u" h1 ]" t* i" }" |/ V' z
接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
; E2 L" \; Y. y2 [+ K
0 r$ A  T3 X/ J" k3 z第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片

<img src="image/banner.jpg" height="184"

/ b/ r1 y( Z# [: ?8 \6 a+ l6 \2 nsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"
, i# ?8 c- ?4 j  ^6 N
width="127" />
7 z' D+ V& i% i* `' r
右側導航html代碼:

<div class="subMenu">
. |4 g8 x2 O( R1 T) ?. r* \
0 ~) A( L3 j# |7 U% Z. Z<h5>培訓課程</h5>

) @. Y$ L) Z, f<ul>
. p; {; O7 W) L+ Y' @  z& a
& g, Y3 ~- k4 K1 m( j<li><a href=" #">網站首頁</a></li>
1 t# r$ r0 G0 A
* V4 _3 L- ^' {% D, k) L0 s- n$ j<li><a href="# ">網站製作</a></li>

5 b& }) J, k2 Q<li><a href="# ">網站製作</a></li>
; s  C! O; t8 y6 M7 S0 v
<li><a href="# ">網站製作</a></li>
7 j6 Z4 |0 S. n: t3 f+ Y- ~( D1 p2 a
  L! A- n9 E8 s2 |+ L<li><a href="# ">網站製作</a></li>
% Y2 R; N  Y& O! @
: V) J/ k0 C+ z# g<li><a href="# ">div css培訓</a></li>

6 n( J' z0 z, Q8 G<li><a href="# ">div css培訓</a></li>
7 J4 N# {$ b& T9 c
4 l2 y1 U, D% N8 ?' v  i& f3 {<li><a href="#l">聯繫我們</a></li>

) @% A- ]$ Z# ~6 s1 N1 x</ul>

$ t( U) Y, b) ?</div>

css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。

#main{

padding:10px 0px;

6 W( @2 C, ]0 s' d& G% m$ W}
+ H* ]5 W+ ^6 `7 L& i& O
/ q/ _1 p0 ]8 H. ^6 I#main .container{

width:674px;
$ j/ T+ g! C4 ?  M1 \' V
- U- @; F6 o' f; P! \6 ]margin-right:50px;

float:left;
# Z9 t% T6 M' r: y
2 ]2 Y& G7 ^4 l' A$ x}

#main .subMenu{

width:226px;

float:left;

/ s% x& K* Z; N/ v8 Fmargin-bottom:10px;
+ y+ o" u9 _4 S' k
}
) J; s; K! I- U. E/ f, j7 I
#main .subMenu h5{

background:#19577c;

, |6 Q8 @; Q+ ~  K: ]height:39px;

text-align:center;

color:#fff;
' C% J; ^3 H1 I6 d) N  v
font-size:15px;

4 Q$ n5 Y9 Q/ R3 U; tline-height:39px;
# n/ X) R- p' O) d  T; \: ?  R2 s% E
}
5 t  L( Y9 e* U& m
#main .subMenu ul li{
6 l, }9 p! j0 S: O7 t2 s) w' }
border-bottom:1px solid #d4d4d4;

background:#f1f1f1;

}
8 O; V/ W# u! O+ [& U
: a, j9 H( b/ ~, G" A$ Y#main .subMenu ul li a{

1 `0 _" H. @) _- u6 Udisplay:block;
9 o7 o, B1 j4 u. w6 Q$ Q
4 U& ]" T- \9 n' V8 gcolor:#000;
& x) `1 Z) Z; a3 Y
height:36px;
$ m+ x+ A! z% ?
: z/ B+ Q) D" Hline-height:36px;
; E9 e$ P# v; U
. u9 S6 _. r7 P( M- G% ^text-decoration:none;

padding-left:60px;
  `; J: {+ \( R5 f" g  ^9 |
$ P( K6 D' D4 f% E0 Xbackground:url(image/li.jpg) no-repeat 40px 50%;
4 }# T7 a3 v* o  g5 l  g  {. s& ^
}

#main .subMenu ul li a:hover{
& j# `$ m: Q( R$ B2 C
color:#177cb7;

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

}
) j  m0 K5 N6 f  a4 e/ H; R- X: {
第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。

現在我們看看HTML代碼：

# ]) ?: R" g0 Q# y<div class="news">

+ q7 ?+ l7 y( ]/ E3 n<dl class="xuexiao">

1 \0 m8 u( Z( G. _5 u7 ~  N9 k  l<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
0 ]7 e- z  B- o+ v3 K
2 K1 Y5 @4 S* ^+ ^6 c<dt><img

; h! w4 P' v- f src="image/223.jpg"
$ f# Z) V( ~# A% _  Y* m1 f$ N8 \
" r' I" C% E* l. ksrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
( o+ K8 k' I/ J3 C: r" r
. U* m" K* k5 R1 T' Z width="488" />
+ O1 b' L: L+ X/ x3 Q
<!--[if IE 6]>
: s/ G0 y7 A  V
<![endif]-->

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

<!--[if IE 6]>

0 A  U- L- I" u0 H+ J5 v<style type"text/css">

#header ul li{
5 l7 W8 p1 k' d) z0 _
width:80px;
: }3 @$ m' R4 W2 I7 r9 ?- o
* Q4 F$ r2 C9 Z: hfloat:left;
/ h: \" C* U( k1 O: [8 f; I
padding:0px 10px;
+ m8 }$ L8 X9 P$ p2 r
}

Header頭部右側加寬度值
; e6 g% M6 b! T2 ]4 i: x2 H
5 ^2 ?1 l, P: p5 L& l#main .container dl dt img{
( m6 ]9 u" n/ @+ P/ X
border:1px solid #ccc;

}

' v  E! U& Z' S#main .container dl.xuexiao dt{
" F& I: f+ t( k
2 a) r) p2 @/ f: O, W( d8 zfloat:left;
" k2 K7 T  P$ n9 d$ e, }
3 E) g; x; t9 p) b* Ewidth:110px;

}
. b; J: Y8 P$ f/ C& v
#main .container dl.xuexiao dd{
' K% \" B$ w+ S% m9 @3 c- d
& Z( i/ g) Y8 @% L" Ffont-size:12px;
3 g! I$ e. W) u; E1 i& \
margin-left:20px;
4 D: Y- I8 J6 [4 D
" f; a+ X2 E/ J; d) tfloat:right;
3 N; ?  b6 r" i5 ~; i
width:145px;
2 Z; r! C. P5 S1 r* E8 y* o
text-indent:2em;
( y) I" l$ j5 Z3 {" P
& c3 Y# h' [, h5 X# N}

#footer{

margin-top:-10px;
' M0 n2 E- Q' ]: w+ p3 \1 M
}
( Z& }; ^. `8 |$ C/ m
% D5 t) `3 ]4 w4 y7 j6 z</style>
' W2 W# \* X- b: y7 F: o# H( v; }
5 t" ~# b3 X$ l) l9 Y9 }8 H. R1 r" }<![endif]-->