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

psd切圖轉換為div+css格式

[複製連結]

等級:25 - 爐火純青

經驗值:0 / 246

魔法值:14759 / 14759

生命值:6%

升級   100%

  • TA的每日心情
    奮斗
    昨天 00:44
  • 簽到天數: 5883 天

    [LV.Master]伴壇終老

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

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

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

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

    5 t, P5 b: _9 h! C" y# w; W' r* w body,div,p就可以了.不需要寫*了.
    : N& s2 w5 o( _0 {6 j
    5 _" ^- B; }: p" t9 Z*{0 }! @% }# c$ j/ u

    : G* }" t  l. @; G* `* P( y: x9 Mmargin:0px;  d3 M5 m$ h& R7 K& {: n# R; T  R! X

    6 E3 Q- @3 @, u( p  c. c8 zpadding:0px;
    # q7 x. n% I. W  }- E8 V5 p* \( X' T7 X; `' x7 Q
    }4 x3 [0 I& {. h8 k; M: e- y

    9 Y, O; }1 ]6 i0 w第二步:把我們網頁整體的背景實現,我們想要的結果內容居中,背景漸變始終鋪滿屏幕.: y) s7 j4 n% w% U7 P& Q

    ! C2 M6 I1 A3 o! B+ ]3 ?/ u這樣的話,我們可以為body 增加背景圖片.要讓基在沿水平方向平鋪即可.
    / M0 ^8 C9 T$ _, k, ^
    ' k$ x' T" U4 A' m5 w% Abody{* K% ]9 \# t& b9 _( ^
    0 W% f/ k2 y3 Z) p: \0 q* y
    background:url(image/bj.jpg) repeat-x ;
    . l/ m& `: A% J2 Z5 ~
      |  J8 b' O& g2 ~}
      ?. P' U8 P; N& C8 W
    5 S8 a2 T  }2 h第三步:通過觀察我們可以先把我們網頁劃分紅為五大部分,然後先為其編寫相應的html代碼
    ; `5 O& _- u2 I, D3 q  o' K
      K" X$ E+ }) Q9 J<div id="header"></div>$ _$ D4 b* O5 a* ?3 a3 Y1 t

    8 r! b+ Q* H9 a<div id="nav"></div>+ w! c5 W1 S1 X  P4 ?
    4 O7 {5 X2 R3 V: h% ~( E3 g+ L
    <div id="banner"></div>5 P  R/ X4 Y; Y  i& x5 q3 k3 P
    ) `7 p4 }. Q* w7 e# L; U
    <div id="main"></div>/ l% B' z0 s+ b9 X
    / \, E5 K+ s6 Y3 _  n8 x6 Y1 H
    <div id="footer"></div>
    ' ?/ ?3 f1 S6 l' h/ L
    5 O0 Q! G  b7 j" s3 M. }通過PS測量得知,這五部分佔據950寬,而且居中.我們可以使用群組選擇符,先讓這五個DIV居中.6 r0 I' @5 v3 ^. ^9 V; W
    ! t# M9 K+ E5 b2 o2 m6 i/ A) Y
    #header,#nav,#banner,#main,#footer{
    / C5 e9 J& a' V% s. W( e$ [3 ?+ {
    7 A+ e1 D" R# t: K- F1 _margin:0px auto;
    6 k. a% j+ R7 t* N6 Y4 ?9 @0 z6 ?  o- T9 g' ]
    width:950px;
    $ M6 }8 J. _  c7 A3 L+ p- t
    . S7 W4 m% I; I1 f}
    ! @) ^0 e6 s$ a$ p- P7 x7 K1 g: t4 |" [3 S3 l2 _) Y' ?$ Z& E
    第四步:先完成header頭部部分
    ' c" L& X7 p2 R; }0 y  z, m; S8 v6 n! M
    LOGO:一般這個部分有兩個要求.1點閱LOGO可以返回網站首頁.2要注意SEO方面的?所以我們採用了如下HTML代碼:
    7 P5 t# t8 v% j4 t' D6 b- z" _! S6 [) g9 s+ F" l
    <h1><a href="#">北京傑飛css網頁切圖</a></h1>
    2 [- o/ F( j  }( o0 N
    . g, y/ v+ c0 V& m; `0 u1 J那麼CSS編碼該如何實現呢?$ x+ s) I5 c+ E7 S8 F) \
    % o" D7 q1 e8 p4 t: {% X% C
    大家可以可以先想一下。然後在看我下邊寫CSS代碼的,其實這個地方採用的是CSS以圖換字技巧。CSS代碼如下
    & h  A* S, y- J% N
    % k5 l0 K5 V9 |" G#header h1 a{
    ; m6 s$ q' w6 b6 B# `* k) L- v) u/ n3 Q1 ], J
    background:url(image/logo.jpg);8 {% b1 h$ t% d0 k  S! H

    # U( U  m% P9 k8 Q! I. `0 X1 r" swidth:476px;
    : b7 u3 {! {( \# b; M1 D( d3 m* j$ ~! G8 V9 i; \, N
    height:102px;
    , t% c( F, w, N/ z7 M) o2 M- d
    " N% f% K+ l0 w: e  S# u9 f$ h9 Gdisplay:block;
    0 k, T- M$ b6 G% E- W/ d  y! E9 C% K$ M1 O. b, b) T
    text-indent:-9999px;
    7 P; i4 T' e) k' z# z3 |, x3 N0 _/ S; i+ v8 q) ]8 F$ x& K6 t
    }
    . Z. R- ]0 `! o4 e2 A9 w8 s- ?" |' P
    好。現在我們接著完成頭部右側部分,還是先進行HTML 代碼的編寫
    0 C- A+ _0 I. d. }' N
    2 c7 H+ N3 I5 D' ?6 }: b<ul>, I4 y4 {  }( Q: u

    # m  V" l/ M1 ~<li><a href=" #">css切圖培訓</a></li>
    4 L% F) @; Y* W5 `- z. X+ u7 a
    9 Q) \1 S( g9 S4 f. t+ s7 k<li><a href=" #">設為首頁</a></li>
    3 m& T; R8 {! t; w+ Q8 m1 L2 U- y; |, _' J+ V/ Z  B6 j  P
    <li><a href=" #">加入收藏最愛</a></li>
    * |5 b% ?) m5 @5 {
    8 X+ k$ l8 U: [. K</ul>
    ; X8 u: g' F' O/ U, C4 I
    6 c1 h2 h) F5 ^0 o: f. [5 ?#header h1{
    # W  ]. j" ~* j/ c* j2 J* g) c* M! f, P, L/ g
    float:left;" W# R; k* O" K/ }% y; R

    . n% P& f) {, K4 s, C! o}7 q. _+ u  A: _9 l8 I( ^

    - N3 H! e! W4 V我們首先讓H1左浮動。這樣右側UL部分就可以在同行顯示了。
    2 M$ `1 s$ e0 ?7 X! n
    2 {7 R* {2 k. ~3 m#header ul{! w, ]1 }" ~' J8 ^8 M* ~7 A+ X

    # Z) C# E, R& _float:left;+ M, I2 F! k- c8 `& `

    3 `9 O) B# q, {6 b+ Xpadding:50px 0px 0px 200px;
    & n6 Z. U$ y: r6 A
    " D  i7 q% c6 M; ^0 {7 Klist-style:none;0 ~; f, I' _' Y9 R) F
    ) B) O5 P2 j7 r
    }
    - a. q6 Q* U$ I9 d( Y0 a+ i* Q! I' e! z/ R) h
    為了避免問題,可以讓UL也浮動。大家可以試一下,如果不設定浮動在IE各版本,火狐中表現的是否一致& h1 Y2 Z, y% A

    0 A2 w3 e& i3 A2 s#header ul li{
    ) k3 B5 P, ^" U" z5 f$ y
    ! Q  B0 `  j+ \float:left;- R8 g! I' s4 H2 G
    - n3 }- `& V0 O; X% G
    padding:0px 10px;
    - Q5 H! I4 Q  D" ]4 R! Q/ h7 I
    ' u" S' g1 U- v3 f# e2 Y}3 \2 [# Q% A3 t. _

    % }* [* B7 u+ \! Y0 b3 U! _上邊代碼在火狐和IE8中沒有問題,但是在IE6中會出現問題。我們會在後面進行講解。
    2 m( u6 R3 Q, q0 _' z! W
    + e$ f4 x; b! K) c8 X#header ul li a{+ Q% k+ @+ K0 F1 e" Q0 i
    / E$ p: i0 V' U: h
    color:#555;
    , \" v' _1 n3 m' E! p$ `$ I% a. Z
    - `" C/ ^  f' k2 ^0 Ytext-decoration:none;, Z( [4 m# U% q) ?/ [* h
    4 s; M8 u% T4 C
    font-size:13px;) P7 |8 f9 v* p4 d0 _
    ' t- E' ?4 r/ g" J" t" O
    }
    % x/ _. d5 }6 n0 }* E  [3 O
    ( m4 j" p4 d- Z8 x#header ul li a:hover{
    " E" S6 @- f( R; b0 l
    ' B0 ^  H* H9 r+ P6 w2 Vcolor:#000;1 d4 j' X) s& c+ M5 q

    % }/ {) I" [& z% Rtext-decoration:underline;
    $ P3 s9 ^7 O4 C
    3 \, ?# M+ P( U3 e5 D, b}
    + \1 z. f/ n; Z: s2 B
    ' k' G  Y9 t( V7 L- w/ X3 I第五步:完成導航效果,效果說明:鼠標放上背景變成淺藍色,並且要製作目前頁的效果。& w, ]3 U5 w9 h( \$ N, S/ q

    7 A* w. y, ?; @6 q( i( J" PHTML代碼:0 X" O3 ]+ d' w1 j3 T5 Y8 z9 S

    9 v1 d& m, O0 q<ul>0 J- M# l! M$ }/ X' x

    . G) n3 h9 e  Z- W- N' K<li><a href=" #">網站首頁</a></li>
    ! j( O) |/ P2 f  C, T4 o/ Q/ Z
    <li><a href=" #">網站製作</a></li># t: l% g2 C( R0 r7 r. s

    ) g# q& o% k; p6 Q( f<li><a href="#>網站製作</a></li>
    1 ]- ~& {: c: A& T& g5 J
    4 c/ i; `5 a0 Q! u7 F+ B$ D<li><a href="#」>office培訓</a></li>
    0 F3 y0 y# W2 W
    1 U8 ^; o' w& G0 v4 e2 x# f<li><a href="#">平面設計就業</a></li>
    - E, @+ f$ C/ O9 s) Y- w8 y7 q/ Y& b
    <li><a href="#">div css培訓</a></li>
    * i% @. T( }7 H! r0 v' `9 R" Y' A5 x* W" D2 D4 s% R
    <li><a href="#">聯繫我們</a></li>) F, p/ ^+ q* k' A& N+ r  ]" R: c9 ]
    ; Q1 d4 C9 L3 ]# [+ b* D4 y
    </ul>9 I( O& [1 Z  v# g

    6 c% M5 t' ~0 j7 @現在直接編寫導航的代碼會產生一個問題。如果學過盒模型與浮動的都應該知道.9 q2 z. d$ H# y6 s- r, J3 @2 j

    / I& x) {8 j3 P4 c2 ^1 V0 [& i導航部分文字跑到header頭部右側了。怎麼解決呢?
    3 `5 w+ @9 q5 B/ ?' `1 c5 Q, L
    . H2 _# B% p# b' c0 w" g5 z" l! H; b/ t其實就該我們萬能的清除浮動起作用了
    - T/ w# @1 W" C( g. ^7 t" _9 W* v# D) q7 b- N5 q+ h
    CSS代碼7 y$ O$ \* r1 F& n( n! E

    7 K" B) {0 C2 @+ y  g* P.clear{
    - ]; ~* s7 ~( M) E
    & J% @5 v" i& G7 @. x3 Jclear:both;
    ' o7 ^4 g( k' U# P( b; y
    % M7 N% q; R) W+ K9 ^; C}
    : F) l' m  \, u6 ^% K( V6 b" U0 ^' `
    這時候為我們<div id="nav"></div>
    % _1 Z5 A7 G$ y3 {3 T
    5 J# M. c, J9 x" j) f: Y" Q" ^變成了<div id="nav" class=」 clear」></div>4 \+ ^$ p/ G9 l' `! o8 e# W1 Q* U

    0 s1 n  _& t# v; I大家現在看一下,是不是解決了上邊的問題呢。其實如果大家按照標準的盒模型計算,如果計算得當,不會出現這個問題。2 l. u$ r5 l7 X* W5 E. z6 O
    0 |$ H$ ^9 z  j# G
    完成導航的CSS樣式1 s% \7 u7 v( [; k' b: q* u
    + X6 R$ n) A* V1 K$ ]; `; p$ J. u
    #nav{- b. V4 M8 W! j8 J8 n, J
    / P$ q1 Q# I/ v2 }2 g1 ~7 ^
    padding-top:3px;5 _  T+ f( z. U# P2 B$ q
    , o3 A! X# c" ?5 w2 b
    }
    3 z, {8 h6 d' G+ M" g9 ?% z1 d  N, L7 t4 g
    #nav ul{1 d" y, q& k/ I. U. h
    ) L# t( [. P( G0 ^( P* v
    list-style:none;( D! J- ~+ ^" ^
    / r( x4 N' t. q  }+ X; h
    }( t6 z! V1 ?# |! M# y
    + I0 D4 c( l* V6 T+ |* _
    #nav ul li{
    / `+ U1 Q! I8 Q7 T. G6 O, _6 v" _8 B8 u6 D
    float:left;
    / p5 E$ q; k& J! l" R. j
    : _2 g6 U$ ~3 j5 @( M" ^}
    # v) G" D8 u1 e; X% s1 g
    ; c3 Q# h; m3 k7 r預設li是佔據整行顯示的,所以通過左浮動.使其在一行顯示。之後在設定A的狀態,達到咱們想要的結果 試驗下:讓LI具備寬高,然後A設定背景,能不能達到咱們效果,A不讓變成塊
    0 h0 r; v/ Y  n3 ?3 x) e/ C5 ?) [* q5 k0 A6 v8 w
    #nav ul li a{
    ! s* ^, y# {  L+ `+ e4 `: x, d" o  u# M) m' j
    display:block;
    + l5 N2 F/ q6 n1 Q( p& }+ y5 k1 V0 I! y- [% s
    width:135px;
    , p5 O8 A. W0 r; }& i0 H" x9 p9 ]! T& `) }
    height:56px;) `: K9 u" s! a3 t8 s; G1 k2 T, }

    ! l# j& @! y6 U9 c6 uline-height:56px;4 y' B' [, E! f& `/ x8 k- ~

    # t) p. x2 c2 \- |! _color:#fff;
    : O8 ], P# j8 J: D  k& @7 D7 U. ?7 E9 M3 v% E1 S; p. K. G& R, G3 T6 @
    text-align:center;% D/ {* i; K3 I/ c

    $ B6 w3 |, E% W; C0 R" ftext-decoration:none;
    " @+ y+ S6 t7 ^- y# d7 S6 X. r; w: L' {* Q0 o$ u
    font-size:14px;
    / Y' F) F, r( }+ M4 D$ t$ _; ^# I5 }% }, M7 O3 r
    }* v, r" {2 ~" g5 W, g0 H; V* [. G

    / V/ j0 L7 P1 Q& e0 g& Bdisplay:block;讓A元素變成塊狀,然後好為其設定寬高背景。這裡面還有一個要點就是line-height:56px,同高度56px對應,可以實現什麼效果呢。同學們想一下?/ r3 ~! i, y, ^, N( u
    ) g$ x! o5 s. l" d) s& B
    #nav ul li a:hover{
    ) u; ?4 _) Q# _% p' O8 W- u* Q7 |) I9 H6 i: ?$ j% r
    background:#177cb7;
    5 m: t" y" W% A1 {+ T+ W8 ~# I# C" l% ~4 s4 f+ I: X
    }
    8 `% [) P! G: s8 f
    * i- r9 g' s+ l現在我們導航基本已經完成,但是還少了一個目前狀態的導航效果。怎麼辦呢。
    / q6 c" q7 I: r7 H2 N4 O  @* K
    8 N" L3 @- [+ s% w0 ^其實很簡單就是為目前所在頁面的A連結增加一個ID為current的標記。如下:4 a. I$ {- [# C& Z: Y$ d8 ?2 I/ }9 [: f
    / A; l! O7 N5 U6 r0 Y' b
    <a href="#" id="current">網站首頁</a>
    ) @, ]4 {, i% Z$ @9 D, m* A; ?$ A8 K; n
    接著這個狀態和鼠標懸停時是一致的,所以很簡單,只需要在鼠標懸停狀態後邊在增加一個#nav ul li a#current選擇符即可。你完成沒
      t% [6 F! w: T* C/ ?& k: I8 s7 G0 ?2 i, w
    第六步:產品宣傳banner圖片,公司網站的話一般會為一個動畫或者是js/jquery的特效。目前咱們直接就放置一個圖片4 x0 I' E, Z  O8 `

    6 [) ~. J: [3 C8 ~& Y<img src="image/banner.jpg" height="184"3 j7 K1 ~" `- o/ p; `- W! R

    0 ~$ n6 R! Q' O$ a3 V6 xsrc="http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg"4 P9 K& g# e- L* N3 G# Z& X
    7 D  u4 V/ o4 {  F
    width="127" />
    9 i* ~' r: B! z) F' t6 Q/ `/ D, X4 B/ W0 x
    右側導航html代碼:
    - Z! n- Q; x! r; T- D
    + E7 W: J! A2 @8 O<div class="subMenu">
    * X- {* z5 A% y  K) e9 v
    7 `' q6 z; O/ I0 X8 r: g<h5>培訓課程</h5>
    ' o* P$ G5 y$ k; s; n  D
    : d% r/ Y, |& y, J$ t9 f0 U, r' \<ul>% R( M% l6 G* o* b+ J/ H: y1 f
    6 e" I6 _1 ]3 l8 B* A& |
    <li><a href=" #">網站首頁</a></li>2 H- q. \1 Z. ?" p0 P" C
    , W" v* z6 L8 L& e7 s, s$ ^
    <li><a href="# ">網站製作</a></li>4 i5 Z8 X+ D3 B; t& K4 ^( A

    1 I4 Y0 c$ x2 A& Q<li><a href="# ">網站製作</a></li>0 G  K! E5 S% E6 a+ h- B3 f

    * F* W3 w) d  J' y! E0 C<li><a href="# ">網站製作</a></li>
    0 Q2 \' \! `$ n
    . U9 `1 C" s: a0 U5 @( m# A% j<li><a href="# ">網站製作</a></li>
    ; @% Y& B' ~8 G3 J- x8 T  @0 z* l( F" N2 ]; r7 l( j
    <li><a href="# ">div css培訓</a></li>
    ( ?: U" b4 Q/ I  M. s
    ( T3 H0 S5 j  {6 N% a/ a# z<li><a href="# ">div css培訓</a></li>
    ! m6 t. D$ @, w+ j( R$ d7 v: l" Z# b& e7 [
    <li><a href="#l">聯繫我們</a></li>
    / z: F( _  C: {/ \$ F# a
    4 t  F7 x; q3 h- P/ M</ul>
    ) }7 A1 V$ d+ X& N; m2 U1 e9 |' Z; o# q+ G
    </div>: v% F, {8 W* f& b% H- W
    6 n$ w( }' x0 A% ]& p: K/ K& w) ]
    css代碼: 下邊這些代碼在上邊製作過程中都已經說過了。所以直接給出來了,不再講解。
    # I. m- D1 a/ a, ?; l9 S2 z( Y' X8 L% U" y/ X
    #main{) m) i4 L: a9 R$ v: `6 h  t
    7 T; E. Y! K3 z3 P; Z" }
    padding:10px 0px;/ H: J1 l5 W* g2 q8 U
    8 \0 R2 T, w3 W
    }6 r( o. Z% H% ~. A: ~
    & P4 d% i; x% k# G  g& ]
    #main .container{
    9 g9 ], c- ?3 X  Q+ p0 ~% x6 W* X; G) U5 S2 w0 O
    width:674px;
    . p/ D5 B6 c# g9 i0 \
    4 B. E9 O- d8 umargin-right:50px;
    & l, V6 \6 x' l) H8 ~  e! n1 K
    ) z0 x$ F& h% b8 U& Tfloat:left;3 u- ~. m. J) q9 L) G' W2 q
    0 z/ e  e- N: H$ c; p: s0 J
    }8 Q$ t/ j# m8 u' n/ c
    ! Z& P2 H; ]# ^* A
    #main .subMenu{, j& ?  }. G$ h2 z4 w
    6 v( Z( |; {2 @; R4 {* {# K" g* ]
    width:226px;+ b  U2 _; e, y7 h3 {9 d5 q
    : s5 Y( f2 u9 @! r$ ~4 Z" m! E8 Z
    float:left;
    ) d# d/ [; c# E4 m. l% b
    7 H8 b9 Q; U6 i9 umargin-bottom:10px;
    6 w- T: t/ ^7 `: N' g! }" A* c2 z+ S$ ?  k' L2 u
    }+ W, B, k  u( S: V( U
    * }, x9 P: |) \. ~2 D/ c, A
    #main .subMenu h5{
    8 W- L+ T. L: n
    2 K  Q! m3 L* Q9 N( g' `background:#19577c;+ q0 H( A% x  f( u2 @( u

    - {$ t' r% F9 L+ y2 |* aheight:39px;  o2 ~. L" L# X7 ?
    ' ^; N5 g! d, |; T, w! l. I1 I
    text-align:center;
    ; o+ @; o6 N7 r1 `3 C' S
    & t5 T; r, I. v3 ^( ^$ ucolor:#fff;
    * S* e7 w, p) A3 n7 y6 W
    + n" W' A& p# ifont-size:15px;1 V( p) G6 m4 t# t- d" ^

    7 u3 _! k, F% d9 ]& f3 S) Dline-height:39px;4 t$ T* p( y: F2 [9 o* v

    5 L8 e' r) g# \4 V2 ~9 f: ?# I}
    ' E* H1 v$ P. `8 g3 w" S  L/ Z( U: [4 E! J" R
    #main .subMenu ul li{
    : V8 w& r" R2 |0 y$ ~% y3 F! Q
    * n+ C9 j& f  Q6 n* rborder-bottom:1px solid #d4d4d4;' k. k: x9 V4 Q8 y) m( V
    ( d$ Z( f4 ]/ y) r- e
    background:#f1f1f1;: c" J2 a9 W4 _6 J( }
    4 p- [* G$ U, e' C/ Q5 d1 r
    }" ~) ~: s3 E# E: \/ k
    ! [: Q. b! B# \) d, p# ]
    #main .subMenu ul li a{
    % R/ r. A1 U  Y+ V( K6 }0 W/ p* V* b6 E# @
    display:block;' w6 R+ i0 K: p
    . B+ H0 H8 p; _0 Z+ p# E
    color:#000;* A, ~: I6 d1 g7 s9 I! D

    0 n6 s: J6 ?7 i# b( e. G( @height:36px;$ E" Z9 R$ X0 t
    8 N, G( ^) T1 P7 s- _) z3 o2 a; G5 Q
    line-height:36px;
    / U2 m3 G$ J' f4 |; ]
    : f+ j1 C4 ^6 v9 m% E! E1 etext-decoration:none;
    : y/ G- U# i. C  Z  e) ?1 k- r' H( K6 M' ~! e/ c2 M" r) b
    padding-left:60px;
    0 e6 {# Z+ `% z% x" h  ?, G+ n# ]2 O. g  S
    background:url(image/li.jpg) no-repeat 40px 50%;
    1 p) s6 V& R1 X7 F# ?
    . P1 E* l& X& h) ^; N}7 N3 C$ H' c6 W. u3 N- q
    / e4 i8 F9 g! p0 V3 T: X
    #main .subMenu ul li a:hover{& |7 M5 Q2 Q! ?4 Q2 _/ T  V, C

    9 J2 M# J2 i) Q9 b7 scolor:#177cb7;2 T: Z2 T( e4 n% X
    , s9 j" l8 a) J6 a
    background:url(image/li3.jpg) no-repeat 40px 50%;" \8 [4 G) I- ~8 t& P" J5 Z
    ; {) d7 T! @# l2 x0 e
    }
    ) h7 R& A4 y! B. m
    $ h' W6 a( _; l6 g8 F8 x# j+ j第八步:內容的主體區域編碼:通過上邊的效果的圖片,大家可以先想一下HTML如何編寫。我是使用的DLDD的方式,大家一定要學會這個標記的用法,很常用,敘述產品時經常性用到。
    / d7 X1 ]6 P3 c+ M1 ?5 f6 `
    + J0 l  Q) h6 a, n7 w現在我們看看HTML代碼:
    6 g* C& {9 F& n( u; w# O0 ^9 T# e4 G1 H, ^. x- @. Z
    <div class="news">+ P. U0 z' Y7 {
    9 u) I. w4 T8 u
    <dl class="xuexiao">
    6 l( ^1 n2 Z6 W; j; ~$ K# }% Q( M) r% m" I! r
    <h5>學校簡介 <a href="#"><img src="image/more.jpg"/></a></h5>
    1 n9 r( d$ h3 B+ O, D9 z+ X% E( F0 ?  Q/ a# F7 M
    <dt><img
    - x4 H0 g+ I2 S+ Y
    4 ^. `& P* y2 m; d src="image/223.jpg"
    9 J- q3 B$ o7 R+ N* B* @1 L- }8 }2 n5 A3 m
    src="http://files.jb51.net/file_images/article/201304/psdcutpic/image006.jpg"
    6 d( y7 |' s  N" K5 q4 L) y! c9 l6 q" B7 m( t7 g$ m
    width="488" />
    : }1 W" U+ i6 `+ I2 V
    " v+ q" M4 p7 L9 e<!--[if IE 6]>
    ) s9 Y. I+ f9 f: T6 B9 D7 x# u
    7 [( z- d& P) [5 a9 r  y3 L<![endif]-->
    : G$ K+ ?" u5 R6 p& [8 |3 H1 }$ Q9 T) P+ N1 l7 a
    上邊代碼的意思是僅IE6可以識別。這樣我們就可以單獨為IE6編輯樣式了。
    ; ?7 G# a2 U3 v. [) H- [, Q4 T5 R- W/ s- V
    <!--[if IE 6]>
    " M& ~, f6 ]' F1 q# y6 R. `3 U& d
    . g$ B7 c( \+ P+ [3 g<style type"text/css">
    $ z7 E/ E2 c5 i0 Q5 a: z3 S% X1 d6 m) n9 \+ I2 [9 a
    #header ul li{1 F/ {2 T0 B, P- k( Y6 M

    9 ~8 ]6 H) v8 r3 i& Q( ~width:80px;- G( `0 X/ x: `" c3 i

    # \& w6 R; c2 D, g9 r$ Xfloat:left;
    1 o8 B2 t0 Q5 z) A2 ?/ D
    / p* a4 `- i- R+ Mpadding:0px 10px;; K% j  s1 d  J% C! A* x
    / e3 l5 |* H9 W3 y+ v! o& q
    }
    3 U5 F2 |4 u+ {# ?. B$ f4 c+ ?
    8 x- @) u6 ]/ [+ s9 MHeader頭部右側加寬度值
    9 U' n' p+ m5 V( j6 m( m& Q& F& a, f' C  T% T5 Y) D6 s; \
    #main .container dl dt img{
    . K' a& }6 u1 C
    . n+ l8 n/ \1 t! ~9 `0 \9 g4 mborder:1px solid #ccc;5 n8 \% l5 H9 Y) e8 S# J1 q. k( D

    $ }* d! v  Z% v}) w2 L; B4 C1 s7 x7 ]
    5 r/ X, ?) i! s" @% F6 \5 Y2 y
    #main .container dl.xuexiao dt{9 s% A) K; b* T# K3 b/ U1 z

    0 Y. @0 r0 P% Y( B! w. g3 w; Zfloat:left;
      Z* D: j* C3 G" N: D! M+ {2 b) r) x) B3 @0 @7 v
    width:110px;
    9 [. u! ~0 L7 B* }+ u9 n- V% N/ h4 z3 @: ]& U" f; z! ^/ N
    }* H  e+ r0 s5 k' M2 g
    " c5 f+ _, K& a
    #main .container dl.xuexiao dd{2 k* {) C4 o/ w2 r
    2 S6 C. a1 r0 K
    font-size:12px;5 D5 }9 ~9 v3 {" o1 o4 h3 W

    ( N# S  j* f+ R" K; A2 Vmargin-left:20px;
    ' d+ l! o: j! W1 e+ g; ?' |9 W. Z
    6 p, e% J4 @$ n! [! vfloat:right;  W; \4 S5 Q2 H* X' s; O
    # j  d) X8 i( O+ w/ ?2 l
    width:145px;
    3 t1 Z$ v3 L! Z! t
    . q9 C6 e& u6 o+ A& C, j, \3 Mtext-indent:2em;
    , _- f" L# U& ]% H" P' R( f( T: v" K4 W
    }
    : |; _5 h0 b# o* @0 A6 i" X8 Y/ V% m/ ?8 l3 c0 A( V" l
    #footer{" N# A/ ^: \+ p3 ?  O5 T
    3 }4 v+ ~3 j" D9 M# K
    margin-top:-10px;+ y% y. F8 |: A" c8 N! O
    9 H- M( n" t, l
    }
    ' d# z4 b# d  c
    3 C2 f% S3 n& k9 |) @</style>6 P3 C7 T  o- I
    - E& \) E, k* b! d2 M
    <![endif]-->

    文章的最近訪客

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

    本版積分規則

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

    GMT+8, 2026-4-23 22:54 , Processed in 0.013181 second(s), 8 queries , Gzip On, Redis On.

    Powered by Discuz! X3.5

    © 2001-2026 Discuz! Team.

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