psd切圖轉換為div+css格式

admin

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

body,div,p就可以了.不需要寫*了.
5 Q& d% w; I% H: O# G5 p
! F4 I( }- C1 s  a( H* F*{
: i% Q7 Z: {, G+ p6 ~: e
margin:0px;
8 F6 {# M1 T8 r$ {
padding:0px;

* p6 p$ K% \! E: ]- E}
, Y9 A6 r# F; x( g' H
. ^2 g, I+ y7 z% C第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.
# {# c& h4 O: e$ N; a. v
, X) T; s" P+ c# a! r& n% a0 C這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
. t; b9 T; n, H" K( q8 v
body{

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

}
; A2 i- i  _9 G% M8 u8 C0 H
第三步：通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
* ^' X# V: A" _( P: K' f/ m6 R
<div id="header"></div>
* L2 z. b. e( Y% w5 ?: r# S0 m
<div id="nav"></div>
" Q+ }$ x! ^4 [, n, I- P/ e
<div id="banner"></div>
: K* c- v3 K& V" J8 g- X' r3 e
- C/ I8 {9 S* n6 V& R% a; T<div id="main"></div>
, u$ J  N1 L6 |+ L, c" A
<div id="footer"></div>

/ ?4 \, M9 ?3 X2 G2 a2 r+ X通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.

; X$ w; b* v* O#header,#nav,#banner,#main,#footer{
+ T7 n$ n  ]+ B" [" N
, p7 Q. C0 [; {9 |% U: e6 Xmargin:0px auto;
* z8 d2 v# }4 C0 G6 E2 t0 ]1 a
width:950px;
- O  V6 R% H* T+ _8 U
}

& v/ j0 H2 t( V- y第四步：先完成header頭部部分

LOGO：一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的？所以我們採用了如下HTML代碼：

<h1><a href="#">北京傑飛css網頁切圖</a></h1>
2 n9 _( T+ j7 R% I8 D3 x# u
那麼CSS編碼該如何實現呢？
3 E6 c; o$ r8 P1 m7 s- c1 A0 V% p
大家可以可以先想一下。然後在看我下邊寫CSS代碼的，其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
. e3 W3 Q5 v1 g9 H% m8 m! @2 M
#header h1 a{

background:url(image/logo.jpg);

9 g! j% m$ e) W0 B& D2 J. K% b% ]width:476px;
# @  i0 U; d1 ~& p& D
  V7 K; A- e, a' pheight:102px;
+ N) ?$ d6 t7 V+ H. @( D
& S" r- G9 \7 R1 {& K/ X, T3 fdisplay:block;
% n9 p" y8 d6 h0 T% u% ?
& T" R, `# o: c5 \text-indent:-9999px;
' \, o9 h3 i5 f, c8 v" U* D
9 u$ E" U3 _4 q( ?- t9 C9 T) t8 ], D}

! ]$ h6 y, G( K( O/ \% V7 T好。現在我們接著完成頭部右側部分，還是先進行HTML 代碼的編寫
8 i0 l+ I8 P2 i1 Y1 v9 d+ e# b
4 y4 W! m$ g) T! m& X  j/ }6 M<ul>
) t5 v3 a0 Q# ~! k: @# ?" G: V
$ H) }, {! v2 F<li><a href=" #">css切圖培訓</a></li>

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

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

</ul>
' T! w6 W! U- t) m6 d- T
( Y. O' A! D; }/ T6 p$ {2 l$ k#header h1{

! a6 W' N9 \; X. @float:left;

% |: ~7 M+ e/ }" ]}

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

+ F; e7 m. Q( b1 z: J#header ul{

- A, ?+ {1 ~# z3 ~# t/ E7 Q5 h, A2 Ffloat:left;
4 r7 n/ _% \: F! k
padding:50px 0px 0px 200px;
1 h2 H9 u* O9 d
list-style:none;

0 D  N& A( @0 O: |) o; Z  \6 E}

為了避免問題，可以讓UL也浮動。大家可以試一下，如果不設定浮動在IE各版本，火狐中表現的是否一致
6 U% s0 \2 O; P3 u
) W* J( k1 C) U5 k0 P#header ul li{

float:left;

: a3 s& @7 ^8 Z4 e2 Apadding:0px 10px;

}

/ G9 z" g9 C3 T0 s/ \8 Y, y: W& N上邊代碼在火狐和IE8中沒有問題，但是在IE6中會出現問題。我們會在後面進行講解。
7 m/ U" x1 F6 b# O+ D
#header ul li a{
5 @- r" N, q5 x
( h& g9 W0 R2 l4 _, jcolor:#555;

text-decoration:none;
  s2 S$ _# J7 @* T. j% g8 u! P
font-size:13px;

}

#header ul li a:hover{
# I; R, A1 O) m2 o
/ x( U1 I' A. ccolor:#000;
3 u+ T+ V, C1 H4 W( U
1 ?3 Q; G) u5 X- |( Htext-decoration:underline;
0 b' O6 x1 @, v/ ]5 _% y) y
* o  H  Z1 X* K+ l}

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

; d* h. X( c  ZHTML代碼：
3 O, Y% p$ d; {7 j! }* W! F5 D
<ul>
8 p- r6 i: ^- H9 _
  Y- j" F' J8 k6 a3 P+ `<li><a href=" #">網站首頁</a></li>

, u; Q, k2 p- K2 q<li><a href=" #">網站製作</a></li>

<li><a href="#>網站製作</a></li>
0 G' Q4 ?2 G6 ?9 q
" e; x7 x: B+ Y0 @<li><a href="#」>office培訓</a></li>

<li><a href="#">平面設計就業</a></li>

  m* A0 i. L' S/ k; ~0 n. r<li><a href="#">div css培訓</a></li>

<li><a href="#">聯繫我們</a></li>
3 D* \' l3 P' X: b9 b6 d, o
</ul>

現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.

導航部分文字跑到header頭部右側了。怎麼解決呢?
- w2 c/ i/ Q9 c" n4 Y5 A
' E" v: ]" E3 m' O9 }9 _其實就該我們萬能的清除浮動起作用了
5 [" \9 F1 v) f
CSS代碼

.clear{
5 ?: h% o9 G7 i3 e  \% b; {
clear:both;
5 O6 v' r  g( c6 I" z, c9 L) o8 k
  ^% P* x- Y2 Z5 f0 z9 t  T}

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

8 l  H7 N& l; b, l0 q9 H2 X; P變成了<div id="nav" class=」 clear」></div>
. x2 V! R' [( T3 c( h" [+ f
$ r6 n( x3 M1 p" s' s; z' ^! }大家現在看一下，是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算，如果計算得當，不會出現這個問題。
# j0 J8 P& b! s" ~. O
完成導航的CSS樣式
7 i! j4 Y$ y$ y/ U5 Y, |
#nav{

padding-top:3px;

}

. M0 E) D* c  ^- z. o#nav ul{
% ]! Y) A' t4 d- [7 d6 _0 @! [
7 S: N# q' z, _2 Alist-style:none;
* _% t* Y2 }: x, V9 p6 Q# h
}

#nav ul li{

float:left;

}

( Z* I7 U6 z0 i/ U$ E預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態，達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
) M: R) g+ w' o/ V, `+ A) G
/ i  G2 M5 c' J. a#nav ul li a{
0 p6 y- ^# A0 F3 q3 @! S( P
display:block;

width:135px;

height:56px;
& \1 L. [" o; D
line-height:56px;

" p: b+ L( z& X( W0 l- Ccolor:#fff;

. ?8 M$ @4 _5 s- x1 ttext-align:center;
# T1 O8 p5 b4 M; Y  H+ d
text-decoration:none;

3 a  A- E/ ^+ I1 Ofont-size:14px;

2 Z: g2 E  f& v, i* S, k/ p+ D}
  Z( O! p2 U8 E4 I1 z8 z
display:block;讓A元素變成塊狀，然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px，同高度56px對應，可以實現什麼效果呢。同學們想一下？
4 M+ W* L! w. X* a2 I0 F4 p8 Z
#nav ul li a:hover{
% z  {# ~" K$ w* S* ]
background:#177cb7;
. B) h% k4 E  H- a
; _2 L0 G9 K2 O, i4 B4 d}
: u! K% |) G* F3 a$ J5 ~8 r
$ S+ f3 S+ V- |! @. G現在我們導航基本已經完成，但是還少了一個目前狀態的導航效果。怎麼辦呢。

其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下：
0 E6 R+ y! M) K
<a href="#" id="current">網站首頁</a>

4 N' T" U2 w& X3 j$ }- Q+ G3 T- x接著這個狀態和鼠標懸停時是一致的，所以很簡單，只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
  E1 O1 @  l: ?% U
第六步：產品宣傳banner圖片，公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片

# u8 R' l5 l% {( J+ \$ [2 Z! N<img src="image/banner.jpg" height="184"
; X0 Y" Y/ b0 B
4 K2 T) K$ |) J: s+ Gsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"

" \" Z. _3 P* P8 m9 d width="127" />
8 X1 Z3 @6 ]' Q5 {
: L. w5 E4 H3 \右側導航html代碼:
6 B9 n; S  b( b8 G
<div class="subMenu">

<h5>培訓課程</h5>
& u0 i5 t9 r9 G8 c4 u' n
: L# ]2 p/ m( L" u, H# y<ul>
' U5 ?$ F2 c2 D1 g$ O7 w6 r
<li><a href=" #">網站首頁</a></li>

4 W) |$ O0 F. s' Z. G( ?: o<li><a href="# ">網站製作</a></li>
+ `) T, p9 f  Q4 u
3 o7 _1 G# ]: P, T1 l4 ?3 O4 M# I<li><a href="# ">網站製作</a></li>
9 u$ s" }6 O# |( |4 B& B
6 u  O! M# \7 f<li><a href="# ">網站製作</a></li>
& Z. J5 f4 p/ ^1 q4 P! O; [# w1 D9 R
<li><a href="# ">網站製作</a></li>
' {- a  c5 R2 c9 ^3 F  \. h
<li><a href="# ">div css培訓</a></li>
/ n2 g  j5 s% J; f, _
) j  @/ j" L4 H) c( I1 a) R. f4 C<li><a href="# ">div css培訓</a></li>
  F/ e+ F' M6 t. Y& f! y" E
<li><a href="#l">聯繫我們</a></li>
6 @3 H6 T9 j- }
</ul>

</div>
5 E6 ?2 t8 J: P4 u
: ]9 K. |5 Y1 m; ~" v' L6 G6 v$ Kcss代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了，不再講解。

#main{

: C2 d0 @+ ?' f( upadding:10px 0px;
5 S7 |8 s( N. f& f3 {9 w* |
# i. Z6 h. M8 h& M9 x}
% D6 g$ L6 U; L  G/ m1 I* i
5 Y. N3 G( F0 a6 C#main .container{

width:674px;
; b4 E+ G; d7 S8 G; a# P" X
margin-right:50px;
7 \) c) Q7 l7 U7 j0 @6 L; _" \
7 T$ Z5 ~( ?- k! A8 W; S% Bfloat:left;
/ j3 k- {$ z& Y! D$ l3 I
$ Q1 ]6 l( p* b! Y}

#main .subMenu{

width:226px;
4 [9 g3 r: V) y
float:left;

7 s2 u7 j  E+ l( Fmargin-bottom:10px;

( U# p, i1 z5 t7 r" s}

#main .subMenu h5{
+ J  B* u5 T+ B9 X
background:#19577c;
4 w* V2 H$ y% t% g6 o
height:39px;
8 F6 W/ @8 m7 p: Z
- j/ ~! u3 G5 z9 Dtext-align:center;
/ Y7 u+ e% Q9 M  M! Z
color:#fff;
* r$ _* S) S% N1 R* A6 i$ v
4 |6 p7 O& C% S" l( D: M/ E& k+ Vfont-size:15px;
' M% P% l# L- n5 L8 p
" [9 K, k- T& q- E+ x4 Y, xline-height:39px;
  l8 i2 _) w9 A" C
+ M8 L! k3 D/ N: K7 h+ [2 B}

#main .subMenu ul li{

' `2 o5 j: m+ I8 F$ b5 X  y5 P  Rborder-bottom:1px solid #d4d4d4;

% R9 t" J, @1 M3 P+ X/ ]background:#f1f1f1;

}

8 O+ y! ^* D' n! y8 s/ R( v#main .subMenu ul li a{

2 q' v3 X6 F. X3 Z& `% u0 edisplay:block;

color:#000;

# _3 ~; S# M* Y" Dheight:36px;

line-height:36px;
4 p5 |: `) J" A1 o/ _) d
7 `4 Y4 }& R3 m; U; B: T( }text-decoration:none;

padding-left:60px;

" s- i) ?9 Y( B) J* @7 t& kbackground:url(image/li.jpg) no-repeat 40px 50%;
; ^, G+ i" B9 ?6 l
}
- y7 Q7 A& \3 Q' }: A! U4 K* g$ I, x
5 b7 @8 c" q2 G1 \0 e. [#main .subMenu ul li a:hover{
, \3 P$ }* G1 q
color:#177cb7;

: c: p  i  _( }1 |+ ~- Cbackground:url(image/li3.jpg) no-repeat 40px 50%;
' }, l! m3 @5 L' E( ^- D
2 K9 U# p, U: k3 E7 P9 B}

& p6 t" \# L3 }% M8 F8 F; D第八步：內容的主體區域編碼：通過上邊的效果的圖片，大家可以先想一下HTML如何編寫。我是使用的DLDD的方式，大家一定要學會這個標記的用法，很常用，敘述產品時經常性用到。
2 i# {9 H2 \" p. n7 S, ^% u
現在我們看看HTML代碼：

<div class="news">
+ p. Z" Y3 r; i6 r
5 T8 ^; r8 e2 M6 e! `* T" Q<dl class="xuexiao">

<h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>

<dt><img

8 ]1 f9 y+ I5 V& s src="image/223.jpg"

src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
) @  C& D/ a9 `. k
4 S. a# W5 G% Q' M* G/ C width="488" />

<!--[if IE 6]>

<![endif]-->
, L8 s( _9 Q6 J" p+ Z
3 Q7 _) K% l0 D" E上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
0 f- w. W! m3 I7 T
% E2 b- x3 ^0 c) d2 t" _* [2 F<!--[if IE 6]>

+ r0 e0 V8 k$ D  Q5 y8 z- c9 O<style type"text/css">
$ o) e& {! ~. B
#header ul li{
4 G) G; [. F* M/ ^- N( P
1 P% v( J# m5 X' S$ Swidth:80px;

float:left;
' c6 i' u% i8 @1 L$ _! C
padding:0px 10px;

}
' M4 m+ o* i/ Z4 K; l" i$ R
Header頭部右側加寬度值
) {/ i8 u$ D* _; m# r
#main .container dl dt img{

border:1px solid #ccc;
  y9 M; {/ j* `* N
, N! e4 w* k+ ]+ P}

#main .container dl.xuexiao dt{

" Y- D& j! C3 Z( y7 J+ ffloat:left;
# ?9 k/ r: Y: ]* W" X0 ^- \
& Z- o+ M+ u" P5 z5 V. W: a, l, }+ Lwidth:110px;

% P4 n* `7 k& N2 `% P}

7 h/ X# [  k) W* n  _# g#main .container dl.xuexiao dd{

: ?9 [+ e7 T! W7 _+ v4 d! E0 b" zfont-size:12px;

margin-left:20px;
2 ?1 n. g( w: F  r& `# S' X
3 R: g: p9 A5 \9 R# O0 y: Gfloat:right;
# y5 k* a+ D5 z( G' m
% B7 l. }/ C" Ywidth:145px;

& t2 w7 N+ Y2 }, C: c; u& v: b- gtext-indent:2em;

}

: Y; n  F3 c5 s$ E2 U#footer{

( y! t, Y5 j' @+ t* T4 f- X% w) }margin-top:-10px;
- G& q, M, ?5 J- M# w, W; g* S
}
7 I  A/ ]8 ]9 J& B  X1 z
</style>

! P& }8 x: r0 v<![endif]-->