找回密碼
 立即註冊
搜尋
熱門搜尋: 活動 交友 discuz
點閱: 1752|回覆: 0

psd切圖轉換為div+css格式

[複製連結]

等級:25 - 爐火純青

經驗值:0 / 245

魔法值:14276 / 14276

生命值:5%

升級   100%

  • TA的每日心情
    奮斗
    15 小時前
  • 簽到天數: 5745 天

    [LV.Master]伴壇終老

    發表於 2016-7-19 21:23:00 | 顯示全部樓層 |閱讀模式

    馬上註冊,結交更多好友,享用更多功能,讓你輕鬆玩轉社群。

    您需要 登入 才可以下載或檢視,沒有帳號?立即註冊

    ×
    第一步:先把把所有標記歸置內外邊距歸置為0,其實還有一種方法是根據根據BODY裡面所用到的HTML標記進行清除重來為0.你也可以先用*清除重來為0然後在根據BODY中所使用的標記進行清除重來.如:我們BODY標記中使用了,div,p那我們的選擇符就寫
    : o: c6 ?5 S9 t) j9 i  R( U
    ; A* F  T- P" z8 r! t. ^3 A+ A body,div,p就可以了.不需要寫*了.  k+ {5 @. N' q  Z1 ^
    / `7 ?. T3 E* I
    *{; e' X4 B8 I2 J9 }# R6 m
    * ?  l0 w8 w+ K: R9 l4 j2 h6 h3 _
    margin:0px;/ ~" N! v1 \* @$ @% o& d) I

    " v3 v! y& R  @+ Q  ~padding:0px;1 ?# F1 s% X4 X- K* f
    9 y% U9 q7 G8 U; Y4 h" I3 o
    }
    2 Q( U# q: d! Q# u$ f: z9 _2 ?, g
    % {4 Q  {" U6 I0 v第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.
    7 T/ x4 A# |  e3 }! b$ \6 S. s1 I6 Z- s
    這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
    ! J. M" m, j1 I; j* |; b  }' r' y
    body{* x) x. G7 X/ Q+ O3 a/ a. G, F
    0 D& o' j( z9 ^
    background:url(image/bj.jpg) repeat-x ;5 D6 W* J/ X6 o$ T
    ) r* A9 J" B0 x9 G8 Z- [# J. n
    }
    4 o* P! [: e8 |8 B1 V7 `* ~, m# T  J% V
    第三步:通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
    # C& q6 ~; D! n) M
    % {  ~+ g  p( C3 u/ a<div id="header"></div>: Z! V7 |& i* v) r& s
    $ h1 H8 _: L; K. a- T
    <div id="nav"></div>
    $ @( Q3 r0 G' S- x9 I- }0 u. l' V+ n) K2 }9 G
    <div id="banner"></div>
    2 s( Q& g7 c; x2 m6 C, r
    ! j( W; A! }, T. a% \) f<div id="main"></div>
    : [% Z0 C  U* K$ _/ X* Y6 H  [* X' Y
    <div id="footer"></div>
    ; p0 ?$ N5 l3 S; J
    8 U+ v2 x2 y7 c* U' A1 @7 l通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.0 [, s6 D4 I( \0 I" \( G
    " e# g' k1 X1 e; B0 N
    #header,#nav,#banner,#main,#footer{7 [# Y/ }) a5 h0 N3 U, N! a
    + M7 s* q- B! p6 G
    margin:0px auto;" I; B& x$ t0 V5 ]0 ?

    1 d5 ]5 f) M9 C* P; e$ q$ Iwidth:950px;
    ; P/ G& t; v0 N/ ~% I
    , |9 g3 b- q: I- @7 W4 @; Y9 u% \}
    1 T# n( w/ e& O8 g2 x, P! j+ `0 E' U; n/ x8 E# g; }
    第四步:先完成header頭部部分
    3 U) s1 x) G* b' s* h1 u4 q8 u9 p4 i
    LOGO:一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的?所以我們採用了如下HTML代碼:; W5 R9 Y& o! [, _) ^0 {

    + X0 C$ R/ k' d+ z<h1><a href="#">北京傑飛css網頁切圖</a></h1>9 R1 C6 K3 M: b% a! u- X# h* z7 Z

    8 L8 C3 w  P  ^# W& S$ y那麼CSS編碼該如何實現呢?' c* D. {& a7 w2 u! W

    9 Q$ K' V7 }4 ]  ^2 Q大家可以可以先想一下。然後在看我下邊寫CSS代碼的,其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
    8 k& n2 Z' X7 L" [; N/ S+ l; N7 s" s
    #header h1 a{
    $ ?% e, y7 W5 n5 U" h) `
      ~2 |* u% P6 abackground:url(image/logo.jpg);
    : Y5 l6 ^# B' n  b0 I+ B8 `: o7 E+ x( X6 M, _; b
    width:476px;4 z7 m+ ~( s- P. u
    / j) r! m( \" p
    height:102px;5 V% y/ w  M- i* N" w( ]5 Y* Z
    1 Q, o- E8 c* L4 \( c1 M9 ~
    display:block;5 M' r0 ~/ O5 P# S0 F" N* j
    ; U& ]5 W$ }1 f0 p
    text-indent:-9999px;! f$ v; \+ V8 _6 B+ o1 Z3 @
    # @4 n; ^. V% m) o
    }
    7 ^' M9 o$ l, }' K4 e4 S  d& Q
    % i6 v" [- i/ K, [" Y7 q好。現在我們接著完成頭部右側部分,還是先進行HTML 代碼的編寫6 k7 S" h7 G0 }* y

    & i- b  g% }- L+ _1 {9 s* T<ul>2 R8 s- B% t2 n' N& c; I: @/ R+ M7 E
    - Q1 k1 w' H$ l" F8 ^% `
    <li><a href=" #">css切圖培訓</a></li>
    3 ^5 O: Q- u2 X: b: P' G
    . Z% t9 e2 f1 I% U5 {<li><a href=" #">設為首頁</a></li>6 m9 [- H. {' T9 ^  C5 x2 h
    * j. F( f" X) ^* d7 y! M4 I, M2 f9 x
    <li><a href=" #">加入收藏最愛</a></li>* \: N: W' k* A" b

    . A1 M* P5 x! C6 {+ i! M2 Y</ul># F; s  H4 N( N4 }8 {$ P' q
    $ A- G0 p& c" |7 D+ X
    #header h1{
    # c8 H, h/ M$ ]- D9 Z
    9 q8 P$ w$ b. Dfloat:left;
    7 D3 b" {6 T1 z, Z5 r8 |, x% u1 @5 i. T
    }3 Q; z, j$ g4 D1 X7 S- n6 s9 F
    6 ~3 r6 E5 E" b, e: d) J$ K$ E
    我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。5 M1 S5 z& {  ~0 e

    " P4 \8 f0 w& x2 ?! r#header ul{
      h1 K7 ?7 z. g& m) I; S6 U/ R# X" P) z, P, M2 t8 `
    float:left;' k9 O# N( h3 i

    5 Q0 A( @) _. Q( A- e7 mpadding:50px 0px 0px 200px;
    + S# P" a. T: n* {( V+ A
    : S* D; p9 F8 o: Q( S$ h' `list-style:none;9 i6 ^5 v; e- y. N  ]9 O8 ?3 o8 c
    ' P# f9 @0 c/ W& @
    }8 z, r) H; e; R& e% |
    6 @' s3 s) e; a) q$ L; v
    為了避免問題,可以讓UL也浮動。大家可以試一下,如果不設定浮動在IE各版本,火狐中表現的是否一致
    / P6 H7 B8 A" ?
    ( Z. R9 V& z1 a8 R% t2 u5 n#header ul li{
    ) J. y! y- Y. J0 M6 o0 q0 V1 L+ U( d8 Y. `# K$ }; `5 N
    float:left;' }, a& u& I0 N$ h1 T. @7 Q- s

    0 M9 X; {4 q; c9 ?padding:0px 10px;
    , z' F* ?9 g) K- g5 B6 ]4 v' p# x$ R" `/ t1 u. N
    }
    8 ^) @9 Z: p: J; L& W. F
    " C% p# y4 }# K* T" ]0 ?) m+ T& M上邊代碼在火狐和IE8中沒有問題,但是在IE6中會出現問題。我們會在後面進行講解。
    . M. X& u! ?% M+ z' G  t0 g; C6 X
    . W1 Q2 P/ r0 Q* B& }( X#header ul li a{
    7 h" o! h3 d' T4 ^, p5 Y& z4 G
    , [" |7 K( k$ M( \color:#555;
    0 q5 |$ O+ K: }+ j2 p5 D
    , n. ?6 ~3 S  W. F' e' ~0 ^text-decoration:none;
    ( R5 O9 h% W7 Z/ ]- D# F. x! }7 L0 v) _+ Y' J
    font-size:13px;6 p. q9 `5 q# h) J7 A

    ( `6 d/ n2 w) l, T$ [/ Z) b4 Z% \8 \* r}) V$ d1 g2 ?. I; k
    - t: {" Y. L8 l
    #header ul li a:hover{
    ! A/ f* v8 M) f7 o
    3 X+ E% v2 b: b6 }* u3 ~2 p. e' B2 Vcolor:#000;
    4 s0 ^4 {5 \3 O# {! R) g9 d, G; Y+ [: j$ @! k4 v) [; ~- \- }
    text-decoration:underline;
    & i) A3 g+ U' H+ O6 l8 g1 w4 K6 ?7 O1 g, |; O" I4 c$ f
    }
    2 P8 H6 @% j$ y5 Y- I4 O
    , b0 I# o( Y# O; H: P" W4 D第五步:完成導航效果,效果說明:鼠標放上背景變成淺藍色,並且要製作目前頁的效果。0 |4 ?7 h! E) V
    ; \3 B9 @- I5 t, o7 u/ |
    HTML代碼:
    8 i8 h7 _7 p# S* V9 l$ {7 L6 V
    ( H/ p  n( T4 o' Y& U6 w. P- k<ul>
    " d% o* I( a) C" j( ~
    / {* j. S* B, p" X<li><a href=" #">網站首頁</a></li>% v# w0 Q- d( d* x1 E
    5 G. V2 [% j  U( |: K6 Q5 V# D3 \. O
    <li><a href=" #">網站製作</a></li>
    7 L6 a$ a: }  N
    6 X, D8 F! b* g2 J" [; a. \1 @<li><a href="#>網站製作</a></li>0 g6 R; f( {9 ~

    ) n/ T  |0 k& y' |  y9 u) t<li><a href="#」>office培訓</a></li>6 C5 w  G$ \2 ]/ C- x( |
    , E3 N- n- q8 F0 e/ c4 h
    <li><a href="#">平面設計就業</a></li>  h& {9 u9 U0 ]  V' N5 S' K" n
    ) ]+ K+ Y* |# }
    <li><a href="#">div css培訓</a></li>
    - B9 u; e3 p& {* |+ h5 ^3 p' j7 d5 I
    <li><a href="#">聯繫我們</a></li>, H: y, Q+ Y$ g% M. B8 |+ c
    " R8 O! [0 j2 |" P  \- _
    </ul>( j) l& ?+ F; L+ E6 ]4 f

    / o. r4 f# K' Z8 O- J# u現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.
    9 X, O) d0 t8 A1 P; R, k
    # T: X+ {- e) k2 z& [% P1 H導航部分文字跑到header頭部右側了。怎麼解決呢?  k8 l6 s/ C) f
    - i5 P8 P+ M) d+ p* Q; {
    其實就該我們萬能的清除浮動起作用了0 [$ N$ ?1 j" {. w- e2 ]# w  V
    ! T) ]# q! q0 r" S7 F( F
    CSS代碼
    / d. G- O" k# ^' i& k$ z1 R" x; I: O2 s
    0 P3 a; u4 |. }" Y9 M.clear{* ~( Q" E4 x9 C

    4 n5 B: f# ]1 L; fclear:both;+ H& `! o' ^- R; t% f
    4 r; }1 B6 u( p& s# ~
    }7 C& l3 ]2 t" h9 Y

    ! ^* r8 M0 n  f  d# ~5 \# @- a( l這時候為我們<div id="nav"></div>
    / B" c* p* r) ]8 I" \
    6 H5 ], u- S3 J$ \# k& V- N5 w變成了<div id="nav" class=」 clear」></div>1 N4 C' p2 f7 r
    * D3 C5 V* [! k4 s' n2 t# D7 f
    大家現在看一下,是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算,如果計算得當,不會出現這個問題。9 _. v+ |$ P+ o8 ~
    . v& u, _+ b, v
    完成導航的CSS樣式1 V0 v' Z3 M  L+ z5 C

    5 `' X3 t  m% w; C" z2 |& _: I( J) N#nav{1 Z: a5 [; Z; x: z: T# I6 `  E2 g
    " ^3 ^9 [; o: M& r7 H2 s. m
    padding-top:3px;: t1 w+ B3 {4 k) {, i% Y1 ~; }
    - M' K* C& }8 e$ s+ g6 y
    }4 J  U$ n1 D) i3 S7 c
    5 C' O* Z7 c8 \
    #nav ul{
    ; w/ h1 J  P  ~) B" D; ^' {
    & A; y' q7 Y: t( d3 V6 t% r! Klist-style:none;3 u4 R& U; \. u9 L2 y
    2 ?4 L( Y7 O8 m1 ]7 T
    }
      i3 a5 e/ m  d1 V% a4 D! x9 n, e
    $ ^7 _, _  Z& k( a: M' [#nav ul li{
    0 Q0 F( B0 k3 Y
    $ I  l% I  ]2 @9 X4 G, |float:left;
    4 i. Q6 x  j0 D, A' K
    2 B( Y% ]' Z2 K7 v0 \! {# C; q}% @  u- c8 D) \! H. A8 ~

    7 e% s- g1 N5 D( f; e預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態,達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
      X. r) U. V3 [* B5 ?
    9 ]/ r7 v! `1 ~3 l, M#nav ul li a{2 H6 S5 c5 L1 i& d# R* a

    " h- }# v/ O- P* w+ e5 U# Odisplay:block;7 ?1 `- M7 k9 W- B; T1 C2 y
    ' b7 e) O+ j. c2 D# J$ f( J
    width:135px;) E- M. W4 s; a, `! [0 g7 E7 i/ f- r

    2 A# E6 f% z/ ~4 q4 x" _height:56px;
    , H/ q; z* `9 Q! ^
    2 s6 K) t2 V' O% X5 r7 o7 Aline-height:56px;5 A% V: I) C9 y+ Y0 |' W

    % S$ n! O: K* {" e+ M, _' o( }: Acolor:#fff;: D, v# H/ ^' t+ T# w$ k7 W1 D
    + i& ^$ r, X1 }, {
    text-align:center;7 j) P) n0 D4 c' f6 F0 ~% J

      \$ y) j' r( c. s3 E! v2 y/ L  \& Ktext-decoration:none;. [8 n* u% n; F$ s$ L
    . D/ }% K5 s6 R' b" @# \& Y
    font-size:14px;
    7 v) r: c/ a! V4 n# e% n; N& a& G4 {; Y( Q9 r. _: ?% D0 ?3 k
    }
    8 f+ g: k) @4 C8 L9 y$ {8 h7 z: B; [, N  Z
    6 n8 }& l# d* X# n( ddisplay:block;讓A元素變成塊狀,然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px,同高度56px對應,可以實現什麼效果呢。同學們想一下?4 Z$ [4 o3 a& ?
    3 |! X. D4 D1 N6 x$ B9 h
    #nav ul li a:hover{
    / V' {, G& N6 c2 x/ U& W0 D4 f3 g( x  [
    background:#177cb7;$ G  p( B: x5 ], l3 F
    & J( C5 ^/ S" o2 `3 M8 W1 v
    }  A: L1 F8 B1 A+ b/ Q% W& |

    0 P( p7 b" r( o% `現在我們導航基本已經完成,但是還少了一個目前狀態的導航效果。怎麼辦呢。
    ( l6 c4 G$ O/ ]$ l7 b$ M& a( p$ q: A" _3 O3 n/ R6 [
    其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下:
    + R9 I. d# j# C% S$ T- S* h1 c2 d$ z5 Q. j. e! l) Y$ w
    <a href="#" id="current">網站首頁</a>0 ]+ N; z: @( Q. s! O# ?3 A
    + t% S5 f, {9 q/ y* u; Y3 L1 p
    接著這個狀態和鼠標懸停時是一致的,所以很簡單,只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒0 w# _3 D# B* u0 s0 J. u5 S# p

    2 u# W3 ^  Z5 |- A第六步:產品宣傳banner圖片,公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片
    ' f. C& I8 w, _+ A  C4 I! a2 {/ }& `6 d# Y: t) `0 z
    <img src="image/banner.jpg" height="184"
    5 X+ g% }1 P3 w2 m  x* o5 u% n. j0 {/ k& w  r! `+ H
    src="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"
    8 ?5 z; C% ^' ^% P
    " Z: r0 U' j$ t% Y8 J, K8 ?1 | width="127" />, P, s# t- ]  Z! \% Y; Z
    , U. ]# }- a) l- L' \
    右側導航html代碼:1 C8 U- [, \- k# w; X8 }- E3 W

    ! z! [, d7 p  n& {' b<div class="subMenu">
    , c2 Q% i4 E" k% e" n& L2 G3 b6 r9 N
    <h5>培訓課程</h5>
    + X  \" X( B" ?4 e+ e
    : V& Z" x. S) I, b<ul>2 P9 I6 x. t% |7 ]* v

    1 ^* ?# r4 H  g/ s% s7 y<li><a href=" #">網站首頁</a></li>
    , o) y  j3 D0 E9 A0 ]
    6 w" U& {4 e; k: d# Q% y<li><a href="# ">網站製作</a></li>5 z! B" l+ `! K' j% i, h

    4 b; Z3 f+ E' J/ x5 t<li><a href="# ">網站製作</a></li>
    6 D; l+ H$ ~9 i- ?- k: L# P3 p* ^4 _  J1 `7 Q4 v6 v! Z
    <li><a href="# ">網站製作</a></li>
    $ x; H/ Z4 z* E8 q  Q7 }6 s7 d- Y2 _
    <li><a href="# ">網站製作</a></li>
    5 ?. s; k$ d- ]+ U9 }9 ]% G) s& m% A! m; s  `$ m
    <li><a href="# ">div css培訓</a></li>
    0 X3 z* t' P* F* m3 z2 L
    6 P0 A8 R5 o1 i" q) b<li><a href="# ">div css培訓</a></li>: Y# H' @* A9 s! n( _& ~, _& h" O
    1 {  _1 f+ V; f
    <li><a href="#l">聯繫我們</a></li>. _& r5 X* [8 @' V. h
    % `& G. o" z, w, Y4 L  A4 m9 Z1 u+ x9 l
    </ul>+ V' _3 C0 ?8 N  n! n% C* Q* t
    ! [% ~; L8 e% m1 a, m
    </div>! U4 M, c' p/ Y. _

      a! x( H% L4 \. F! M( ^css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了,不再講解。) V: N& Y  T6 {* C+ S& @0 E+ Z
    : B& n: |+ [+ S3 b
    #main{7 m  ^8 g' q9 ]

    & l) j1 z$ I5 G9 j0 j3 G1 Z( U, spadding:10px 0px;' w# z6 y, F  B
    . b; B" u3 Q! i! Y2 d& x; d
    }7 h6 n& v: e& }% f2 k/ n0 J
    . K1 q( r' H, R% P/ i
    #main .container{
    0 b) P$ F7 @, p. E+ G( U9 Q* e- v
    width:674px;
    + t3 B9 V- O7 k$ O7 W% M# N% p6 k8 Z4 F1 a6 H
    margin-right:50px;
    8 M% Q+ Z) O) e$ Q: E! F6 t. Z% |# q  h$ w5 G. k
    float:left;! `) W  Y6 d8 B

    # U" \$ M; |4 ^}. \' |: b6 Y7 s' f, s" ?4 m% r! M- \
    5 N: L  u% W2 C
    #main .subMenu{' ?' h1 v2 O" @! A
    , W' D: I2 l1 ]
    width:226px;
    6 E4 i; u& a( P+ t  q; v2 ?# b1 s* g5 X3 p' t' x
    float:left;
    ' q: i- s. g  W* d! z. K( R2 F
    / q0 o1 d3 Z* y! e; D, U  c0 Gmargin-bottom:10px;
    . G2 @2 ^8 }  o4 q& |$ ]
    8 i" @6 }" f1 o% v5 G( l}7 \3 F) ]3 x0 ]7 H' A
    : @- ]. J' h) [
    #main .subMenu h5{8 R9 y# ^1 ^/ I' v% z
    $ }* T( L) B0 D; X" n
    background:#19577c;( n3 {  ?1 ]4 K; D# v3 t5 V

    . M" G+ A' S" X2 A4 Y/ y& O$ Iheight:39px;8 r* ?7 u) N, Q5 h/ W

    1 z- y& W6 ]& {- C* utext-align:center;) N3 h+ F" Z1 ?- N% n2 B/ b& O; B; u

    # {- @6 L( {/ q: k6 N  Gcolor:#fff;7 W4 c5 L, V9 _  p" B5 x

    ' E6 \- m' W% Q" n0 gfont-size:15px;
    / H* F6 D3 Y$ Y( t
    8 y/ b4 n, y. I: s- `, e* \. ^line-height:39px;
    & m: e( k% v4 D/ ?3 X9 q, d
    1 P6 P# I" ^  J$ h}0 F+ U% ^( {& c3 G( {

    2 M! q2 H- M3 z  {#main .subMenu ul li{% z2 n/ ]3 E5 U4 g" l- X5 ~
    , d: T( s. U* E, C+ b7 R  t
    border-bottom:1px solid #d4d4d4;1 v1 r& u  p+ U, t% t- [

    * }/ `' v  ^% @7 S! cbackground:#f1f1f1;
    $ s' K+ r, |3 U  J7 X2 W, j8 U' @9 }/ C9 p, H% N8 N& C
    }
    4 g  n# t6 q+ X9 j, x9 E' ?
    4 g, \% a# \/ {3 C' O8 U7 E#main .subMenu ul li a{$ f0 i1 \; H( S, B
    # y4 I! Q, K) d
    display:block;
    , ~0 |' G0 N% Y
    & [; o7 w  d% f' x# icolor:#000;4 D% e; X! }& M: d

    * T$ F/ O6 Q. @1 N: _& jheight:36px;7 X" U2 u0 I: j0 p, l. e6 i

    # J/ E7 h# S& j6 Q) G& Z7 cline-height:36px;
    9 f4 w$ i- l  P, g( G
    * d" Q+ |: T6 N* ]9 g' g) \( V* Vtext-decoration:none;
    8 T, s, `( u0 Z2 w
    ; ^- o" i7 H( t' q& }8 mpadding-left:60px;& H/ [) X" F/ S& L. n" C/ O( Z
    $ |) m' m8 R5 `. E% p& g, o+ ?' q2 H
    background:url(image/li.jpg) no-repeat 40px 50%;
    6 s9 m( X( ]$ o' P
    ! P$ e* {+ L/ u}; _: e; ]6 q( ^/ L
    8 G$ d) M1 g8 X. c# I! s& z
    #main .subMenu ul li a:hover{: g5 I" F+ d* ]' t
    1 z: H5 q" X" ^9 v. G1 D4 }
    color:#177cb7;6 P2 t! j) v) U& f$ b7 A/ |0 M9 g

    & |" Y& b; p, vbackground:url(image/li3.jpg) no-repeat 40px 50%;
    / g" C7 h* k2 }
    " @  @+ n: r1 @/ v# T4 \}
    9 N0 e& ^: a! e, W  _* M- g! o
    % c+ C0 |1 q) Q  ~7 f1 A) i* @0 Z1 \第八步:內容的主體區域編碼:通過上邊的效果的圖片,大家可以先想一下HTML如何編寫。我是使用的DLDD的方式,大家一定要學會這個標記的用法,很常用,敘述產品時經常性用到。
    0 W' H% ?- p1 G8 V! E! n7 i% s' h
    1 J6 s+ C: q$ q1 y5 G. J) T# q1 r. Z現在我們看看HTML代碼:3 v- k1 r9 K; y3 v+ Z, j- C

    2 @* N6 l" A4 d% e/ X<div class="news">
    ) y8 w8 m8 Y% L5 E6 X) N$ {6 h7 A( U2 V% y! s
    <dl class="xuexiao">; _4 j. f5 R! }* p. m  y  h
    ( @  ]+ Q- o( k- _" m2 k% ?, d
    <h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>  f: ^. v* Q+ O7 X$ E) L& Y0 D, U
    9 g, n" T3 z/ V3 y  E, W" x$ E
    <dt><img
    0 P  L$ i1 L- Z& U$ S% h6 W- m. B2 P" v! N+ p  F/ }0 s8 h
    src="image/223.jpg"* B; w+ x3 }8 N5 w* l( k

    ! }, a6 }( |! F; A( ~. x2 X3 C8 usrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"' a- M" B2 y7 ?- g; F/ A

    # R/ \0 N! n/ \- K8 V( s* j width="488" />& {, w% w% D$ j4 ~" O7 x

    5 n* u9 N# R& c! P6 m* |<!--[if IE 6]>; s. M2 F& q- K) K7 M- K; a
    1 l; |) \! V, d
    <![endif]-->
    / b" S  W' g8 F! ]" w
    4 u# w* ~( W0 C" n: O上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。6 s- A4 E+ C9 b$ @0 W2 s& z( l
    % u- t- q) L9 R/ a8 R; p
    <!--[if IE 6]>7 P* j2 M* l9 y

    ) ?5 u- X* z+ r0 Q5 b<style type"text/css">
    ! S  w2 ~' Z0 y5 `
    ; P! e' x3 x+ I. ?7 t8 q#header ul li{9 `5 r' g! e& l

    1 g3 Q* o3 O0 r, D/ n. ]width:80px;
    ( s3 D% d1 e) R; m# m$ g1 ?: j$ X8 ~; t9 J6 A- H
    float:left;
    ) q2 W9 y+ ^: M) f) R* M" Q( n0 ]' {' w( Z1 Q9 Q3 n
    padding:0px 10px;
    9 e: ]  B% e% w# a# I
    8 ~4 s. m) f0 `5 c) Y4 T9 e* R) \}
    ; {  w2 g! y4 Z
    3 W7 g7 Z/ K5 N7 CHeader頭部右側加寬度值
    # D( S9 i- G$ T# @& k8 o4 W. V2 _4 y. S5 a2 m
    #main .container dl dt img{
    6 w8 r& ~9 t9 m3 y) i& p7 ^4 u5 w& T0 ^/ r7 p( P+ p. j
    border:1px solid #ccc;
    . f0 ~& Q3 x3 D# Q7 j; D
    7 f6 G- l+ k# t. x9 K}
    . D5 y+ `. j2 `8 m6 @5 C$ F: @% p  J6 h9 V1 c
    #main .container dl.xuexiao dt{
    9 @7 t9 Y" M3 ]. x0 B' H% T/ U( J: m2 a: k
    float:left;' F2 M/ K# j0 {9 _4 P: `( f
    & d+ T; |7 K( k0 f& V, u  {
    width:110px;' n$ ?+ ?8 Y9 H  D3 v
    ! ?; {# O) A+ m1 \1 u$ h, K
    }
    7 Q7 P+ a* ?9 ^8 _4 D1 u
    ! S+ ~, d! q% p#main .container dl.xuexiao dd{+ N# O' _' v) B; d( F/ B  d1 @% f

    ; U  T) k! ]8 i& Z+ c; b  B2 C* m/ [font-size:12px;
    & ^9 D9 q; E  F) `3 v! ?, M) y; g8 O: h! I* W
    margin-left:20px;
    8 Z1 {# ]7 v6 E8 L" `# M
    & b5 [" m/ {$ j6 W5 x2 O! u$ Wfloat:right;
    ' i, A# ^! H! s! ~1 R% f8 \
    " U+ r! J8 Q- \width:145px;; V/ g8 ^! t/ Z( _4 n! b

    ) T  r) d3 j/ p1 J7 U, _) qtext-indent:2em;
    ) T9 x  `. j/ R. o. S1 t8 i; S! ?; E' C% ]! d
    }
    9 N; V: s5 Q9 Q
    " b$ t  |3 X; x2 g# T#footer{
    , g( }* L( T9 O0 `$ r! j# z, |$ p  t2 t7 Z1 U$ Y: d" O3 h9 J/ Q
    margin-top:-10px;
    9 L7 q% @* s" u) Z
    1 q- p# n. C8 P+ r. J; ^5 ~$ ]( _, x}+ N: S) ?+ F/ O

    4 V8 ]  ~5 o9 c( u</style>
    * M$ w. o' E8 E+ N& b( \& `' b
    2 z. w5 R* Y6 a! @<![endif]-->

    文章的最近訪客

    您需要登入後才可以回覆文章 登入 | 立即註冊

    本版積分規則

    QQ|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)

    GMT+8, 2025-10-22 16:09 , Processed in 0.013050 second(s), 8 queries , Gzip On, Redis On.

    Powered by Discuz! X3.5

    © 2001-2025 Discuz! Team.

    快速回覆 返回頂端 返回列表