psd切圖轉換為div+css格式

admin

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

8 Q% u1 q. g( _! V8 k, J body,div,p就可以了.不需要寫*了.

*{
0 o/ _& _4 r; }. U' p  d/ N' ]( J
& V% |# I6 W) emargin:0px;

( H; ~9 S! E8 Q' y( g# S! ^# b8 l$ T) Hpadding:0px;

}

第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.

1 j. Z, V( L& y7 g; b0 j3 q/ M3 j這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
  Q$ \0 K% R$ B0 p' t# l6 ]' h3 ]
body{
' h6 m$ X3 T: D- b
1 U6 D, z1 @4 f6 ?8 e5 ]# w9 [& Dbackground:url(image/bj.jpg) repeat-x ;
: J" n4 A6 b; Z. V" P3 {
- a% o4 I" H& R" k- d! ?6 h}
' E, B" s: b) h! }
( v+ a' x  s" Z. z* A第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼

<div id="header"></div>
5 |. }) T* @2 g8 d* w
<div id="nav"></div>
# x; q8 K, N1 j3 |( s. U0 |7 p
' F# U& C  B! ~- u5 w* z6 e* c; E<div id="banner"></div>
9 ]# B  D$ @% r! u" q" a/ l
9 F& s+ a/ G& x+ @; U" U9 c<div id="main"></div>

/ H  y: G5 N, [: y- O- X/ `% A<div id="footer"></div>
8 b, r) p" r" _; u& C& f$ ~
8 _) j# m3 Q" k  M8 R( R通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.
2 O/ ^2 D+ p! W9 [0 d, q) }: s
: n+ f: d+ z$ |2 }8 A! U5 ^#header,#nav,#banner,#main,#footer{
' U, D1 C$ F+ R( @) U
margin:0px auto;

! U7 Y+ [% D/ u% v% lwidth:950px;

$ j# q: s2 K# E) \}
- ~) ^- D! i7 ~0 \1 g
3 R( s2 O9 C2 S) z' N0 @第四步：先完成header頭部部分
' U, ]0 f5 r  u& M: s
LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：

7 }  n! F# G/ R, Y<h1><a href="#">北京傑飛css網頁切圖</a></h1>
' @; \) P, j, c% B# S
3 l# y, y! P7 p5 ~3 j4 N( o那麼CSS編碼該如何實現呢？
1 Z' O# y5 R/ V1 W. D* u* S$ a
9 i5 u& Q2 B/ v- f: B0 K4 }大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下

#header h1 a{

8 ~/ Y$ t9 k: C+ f+ Ebackground:url(image/logo.jpg);
9 s, H/ y  z4 U7 M7 m6 Y9 C
width:476px;

height:102px;
8 C! U  N# D  ~  i& n; i
display:block;
. ^  v$ f/ z- ^& e6 y0 R
text-indent:-9999px;

}
( ~+ m) g/ U+ N* g! x' F
好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫
0 z4 a6 W  Q8 T! X8 m: f5 G
<ul>
; O# H8 x4 z9 X
3 w. u1 }# L. Z- y3 G$ s<li><a href=" #">css切圖培訓</a></li>
# _" W+ }4 ?" F% x" o7 H" N
<li><a href=" #">設為首頁</a></li>

<li><a href=" #">加入收藏最愛</a></li>
2 y+ [' O5 ]1 J  I% A: z4 V
</ul>

#header h1{
% ^2 Y$ o4 v5 h' N
6 h4 I4 @) C$ t$ n9 A+ i3 o* Afloat:left;

}
( E  }4 N% H8 ]! T9 X! X2 r4 M
我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。

  S3 `$ s0 `( N, x" I% n#header ul{
- r( ]; [) G4 f
float:left;

) [" O- ?/ @1 U6 V1 b5 p2 C: Zpadding:50px 0px 0px 200px;

list-style:none;
2 ]" c' ?0 |  P" s5 }( H  `
}
" k3 M0 N# l# ^2 O+ E) S% u
+ _! c8 r  ]: E: W4 j* s為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致

#header ul li{
3 s" O2 u- C! u3 p: C2 c- L
float:left;
3 h( J2 ?; D; ?" O
padding:0px 10px;

; c) y4 M. }( [7 p: i}

7 W9 y5 n3 r" `9 F. s" F- L上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。

#header ul li a{
( y# @% @) g5 F/ z' x
( N0 o- ~3 S3 M! Wcolor:#555;
& w: |. K4 H; Y* d4 T
text-decoration:none;

font-size:13px;
- K9 T0 J3 \2 L/ [9 M  i% `; O/ [
}
, h' f' S3 l9 w& u: m# Q, ~( X9 @. P
- e' T& ]+ d  g1 W3 X2 m3 U#header ul li a:hover{
, z( d7 D/ b1 a' G
color:#000;
  H, m; W: S, t  ^0 ]
text-decoration:underline;

}
" Y3 o6 k: g2 s4 |
第五步：完成導航效果，效果說明：鼠標放上背景變成淺藍色，並且要製作目前頁的效果。

HTML代碼：
$ C6 U0 O$ M: ^0 e; e& d' q
1 h* E* p, X  ~' X# D% a<ul>

" V& ^+ d. q. F' @2 a4 G<li><a href=" #">網站首頁</a></li>
6 q$ S2 r6 D' `( w7 N8 _4 C- V( c
<li><a href=" #">網站製作</a></li>
2 C" M7 X4 Q9 H/ o
<li><a href="#>網站製作</a></li>

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

) D5 h# o* [' u0 ?5 K<li><a href="#">平面設計就業</a></li>
: q: k' h" k2 _- B0 f
) g; V- G! T+ R<li><a href="#">div css培訓</a></li>
% I6 u" L3 k- o! x9 m
<li><a href="#">聯繫我們</a></li>
5 u" t  D5 c" }( v; G
2 M( x8 u2 p2 S" W3 ^</ul>

現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
( o1 t' U* |, }: B! I+ n, Z: I* u
導航部分文字跑到header頭部右側了。怎麼解決呢?

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

9 u* @* {2 ]) A; m4 [CSS代碼
( ~( I- a/ P: e  G
.clear{
2 g+ p4 u, W# C) e
- G9 Q/ X. s1 |  e3 y' Wclear:both;

}
, z( h5 ~# O) w1 j+ m3 ?
' o- F' q+ @9 L, K) o1 X; `2 l這時候為我們<div id="nav"></div>

變成了<div id="nav" class=」 clear」></div>
2 M2 C+ ~! R; }6 `, M
大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。

完成導航的CSS樣式
# P3 R( V# k5 }, d1 R  A
+ }: k' |3 E: Z#nav{
. G& \0 j' w" M% j; K7 Z( q7 h
padding-top:3px;

! ~! h: |0 ?. N5 Q- o}
+ |9 w+ o  @: w( Q; ^: b7 F  ?
#nav ul{
1 a/ G  `) H/ \' V
list-style:none;
1 f! o- \% H6 s# ?5 F
}

#nav ul li{

  n1 m$ _& P: |1 q$ Cfloat:left;
; l0 v7 v: g# v% b
5 W/ |, E8 Y* d2 `6 j3 _}
- G8 Y/ F* q7 `
預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
, v* ^8 [' k# d
7 a) l2 E1 G+ [+ f; T" C#nav ul li a{
6 s3 [: n9 Y! y) q4 Z/ i3 N
display:block;

6 P  ^$ q( v# ?8 S+ y/ j' jwidth:135px;
, l4 s" O+ M% p; _
height:56px;

line-height:56px;

3 h; a8 Y3 a2 v& ?color:#fff;

, E& ~8 @$ o$ b) D1 O4 Xtext-align:center;
6 [$ u/ W9 T; ~6 n
, K, L2 b4 Y2 k0 mtext-decoration:none;
) E% D! r( m" A1 w
font-size:14px;
. Q$ Y( A$ o& d1 @& H
: ^4 o1 W' s# }5 X' s0 F}
0 {/ Z8 j- ~2 M% ?
6 Y1 a# h5 j/ s, D  m$ y! Q) W! l" p% Idisplay:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
+ k% `( l, l7 x' T% d; r
' W9 P! h5 a1 @$ |# O; j#nav ul li a:hover{

8 A1 Z  m) f: n: m3 g/ \background:#177cb7;
" n- n# |) A% v# v( ]4 s" N$ o8 \
: ~# `! |( ]  D3 ^. a8 H}

現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。
; t2 Z' o8 f" {, O% R
其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：

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

接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
8 A8 p: U  F  m4 X
' k( q, l- I( `1 U2 B第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
; s  f, C- g- B- S0 A
<img src="image/banner.jpg" height="184"

src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"
3 a% m" n4 l! T0 c; T. m
$ \( ~" C/ o; Q' I width="127" />

右側導航html代碼:

<div class="subMenu">

<h5>培訓課程</h5>

<ul>

<li><a href=" #">網站首頁</a></li>
% ], i; @* f* o% m5 i
: ?0 P/ e: P8 K* s/ }$ S4 @4 q- }<li><a href="# ">網站製作</a></li>

<li><a href="# ">網站製作</a></li>
. X* [, L# \2 i. @& j) u
, t" l3 ]3 n4 M7 ~8 `7 W<li><a href="# ">網站製作</a></li>
( g5 c7 S8 M' _9 H" M
: H. Q# }  X  Q. B0 m  ?# k<li><a href="# ">網站製作</a></li>
3 ?# N5 w3 N4 J3 x7 j
<li><a href="# ">div css培訓</a></li>
$ }6 E, C# C$ z: H5 x, {
% l7 W3 ^8 h! e- u5 m) C. C' |6 U: `<li><a href="# ">div css培訓</a></li>
9 [9 x2 W: }/ c1 `8 b( h
) }! R0 D+ z0 T/ t, Y<li><a href="#l">聯繫我們</a></li>
& l/ q8 a8 h0 C9 Z" c
</ul>

. O- h, @$ k# k' M7 u  e</div>

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

#main{

padding:10px 0px;
: R& u$ ?7 q- K! r* ]6 e9 L
% ~" h% [0 [  x/ H" h}
+ m6 c2 u# ~' M  q
#main .container{

4 E4 O* P& ]" Vwidth:674px;

margin-right:50px;

6 [. u8 W' G8 j8 k% o7 B0 ^" Yfloat:left;

}

#main .subMenu{
. q% o) D$ n) Y* i
width:226px;

float:left;

margin-bottom:10px;
# A! I" X' _6 p, j6 W; ?3 d
) t" d8 S- S: r6 x3 m}

" g5 o+ A( J7 h#main .subMenu h5{
" s8 \8 M5 ^4 L, w
background:#19577c;

height:39px;

  T" z4 G! D0 Htext-align:center;

color:#fff;
% J* Z! c/ I1 j( i6 d3 m7 ]
font-size:15px;

7 \( |- A* n) }8 e3 j* bline-height:39px;

! m3 o9 q8 }3 r0 a1 v9 E}
6 q2 [# Y2 Y1 _9 F4 y# T6 t/ {/ K
#main .subMenu ul li{

- l, H: k6 g6 q. v6 iborder-bottom:1px solid #d4d4d4;
8 G0 F3 I% w  N% a' [7 h
7 |: |2 a- \1 f! Bbackground:#f1f1f1;
" o& ^5 U/ X9 d( K$ B( v0 g
( e$ b+ Q8 r9 {}
; p' p8 ^3 N  a7 B% b5 Y
#main .subMenu ul li a{

display:block;
3 e' z9 S8 x0 i& w# Z8 k% w: q
color:#000;
/ x2 v/ [# M8 E
1 Q7 E5 l  T) theight:36px;
0 b# T" `) F" c1 W* z5 O; `& r
line-height:36px;
  V  }1 z* r7 r* L3 }. z8 D
) Q3 n/ b0 k% j; g$ s5 N: atext-decoration:none;
& ]1 g/ Z/ o  H0 @: G
padding-left:60px;
- @+ P. _  J! k; f& m: {, I" v
background:url(image/li.jpg) no-repeat 40px 50%;

' M' o: i! u0 S7 g4 j: u: |}

#main .subMenu ul li a:hover{

color:#177cb7;

. a( c9 e" n2 \5 w4 u  Bbackground:url(image/li3.jpg) no-repeat 40px 50%;
6 M6 C, {. o2 w
& u+ y) @1 Z/ E% A}
$ t, Z  Z6 j0 ?* d$ _3 k
第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
, o1 K5 p* ^( j- i6 a
現在我們看看HTML代碼：

8 R1 p3 q' Z" P<div class="news">
: v: q% ~1 R/ }* J1 d5 |5 F
! X2 T3 g( l5 Z<dl class="xuexiao">
1 h. n8 S' k/ I, s
6 k& H* b* y+ D' ]<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>

3 {* j2 F9 q( {$ E) Z9 s& M, b* |<dt><img
- l: c+ Q2 u+ h$ J8 o. `0 @( |
src="image/223.jpg"
: c4 B6 F  I! u; A: {* q
( p9 j% i! P6 q) i2 X; xsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"

width="488" />

<!--[if IE 6]>
" x$ y! E% k+ l* J) J
<![endif]-->

上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
: P. `$ r9 T; c0 L. b: N
. M1 E3 [/ v0 o/ b7 Y7 ]; b6 S: I) f<!--[if IE 6]>

7 @$ ]) E( D4 u8 G! e9 P3 F<style type"text/css">

, M6 y- |! m* n, R+ a#header ul li{

width:80px;

$ |- ]# u% F& t. P4 u% cfloat:left;
2 y3 ]9 y* X8 M; P# @9 {9 N+ @% r
padding:0px 10px;
$ V$ W0 v/ R3 O7 m& J0 \; u
}

/ H/ z& l2 Z+ q4 F& I  W1 a, xHeader頭部右側加寬度值
1 G6 T, ^: V8 f1 n% L
#main .container dl dt img{

border:1px solid #ccc;
/ s) Q$ g0 Z/ Y6 z7 E" G
- G6 U% a! U8 O0 U, N}

#main .container dl.xuexiao dt{
0 d( J( u8 x. K8 d+ r' z3 u
/ y" }% L/ A9 G3 W  G, Z; S7 Ofloat:left;

width:110px;

}

5 ^6 f, H& G! l' ~4 A5 L  C#main .container dl.xuexiao dd{

font-size:12px;

margin-left:20px;

6 T3 E: k) t# e/ n# Nfloat:right;
- m% U. I/ r. A( T3 Z7 k/ q5 G
width:145px;

text-indent:2em;
) C0 e+ O5 w1 I) E
}
9 }2 @* Q1 h9 M: e
8 \8 U# h2 n0 p- h- d9 _! S#footer{
9 u& Z! @4 c2 C  y9 V, `: j
margin-top:-10px;
+ y* {" j0 W) j9 x& H
}
" |. ]" A: u  W' @; u6 V
</style>
, i$ `1 |5 ]: B& j9 M3 V! N" i
* V+ E7 b5 p: @4 |<![endif]-->