[交流] CSS样式中图片属性设置(缩放与对齐方式) ...

小七 于 5-3 15:52 发表在  建站交流[高级] 8033
上一节介绍了边框,这一节介绍图片在css中的缩放与对齐,其实跟文字的差不多的原理,为了更加清晰的看到对齐的效果,我们把演示图片采用一个正方形的Logo,就是我们小七论坛红色的方块部分,放在表格(关于CSS中的表格用法后面会单独讲解)中进行示范,表格都加上边框,以便对照,完整的演示代码如下:$ m# m' a( r( i4 s6 I+ [, [/ T. e' o  K& f7 b* \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, z3 I: Q5 F% u7 ~0 G: o1 }) @) P# I/ a2 k8 D
<html xmlns="http://www.w3.org/1999/xhtml">8 m, z% F' j. e( c- I5 x( [0 Y4 R1 M1 d* c( I6 {4 `  ~# t) z7 g
<head>; k  w6 @. |7 g) i5 Q6 {7 v- B+ t0 S# Q# N( M+ C. m! Y
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />% ~* s  L& e& S. e2 D6 o9 B7 U2 ~8 n* u" a  l( k6 R6 G* ^. b; M+ N& g
<title>无标题文档</title>  }0 P# i8 e5 a' c" H, h) Z4 D4 D- G5 {1 q
<style type="text/css">3 E4 j4 F6 e/ T! |3 q( ?2 c5 c" f& A1 q/ U
img.testone{3 M5 M2 D- [+ F$ ^+ \% c0 e+ p5 M; J
            width:100px;( r8 z2 p) ]# R) j8 o9 U- K( L/ ?+ A  n" o9 r/ p
                        height:100px;
搜外七街 www.SEOwhy7.com                         }" g7 S: ]6 d0 D3 c4 N  I/ X# V6 \. T1 \$ o5 Y0 f
</style>
搜外七街 www.seowhy7.com </head>4 u. W+ V& a; f" Y5 B4 Z( n& v
4 U/ @* g& D! i- x' j) ^* _1 ]9 v
<body>: X) _8 g2 o7 g# W3 z$ s9 \1 c6 p5 u8 s+ U1 T) t; g1 P& X7 K
<table width="600" height="363" border="1">1 Y& X  L( [8 A0 q: H% p& |: S- u6 c7 g% h9 t& i3 O- j8 s- I+ }* q( b
" j, y4 G4 Z. Q& Q0 y( ]: P9 S' s" B+ X; D- @7 [: p  Q* z1 f  r. u9 w
  <tr>! y6 T! v! b- t% l; r: b2 E0 q: p& L/ e2 a  [0 x0 z2 p' Y, T5 ]8 ^8 E
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>9 l% n+ A# z: O6 f$ M8 a' j: W! a7 S  ?9 E6 P+ X9 l5 L
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>; m1 j$ `  f) o# C6 ?, |  B0 i& P; z
        <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>
搜外七街 www.seowhy7.com         <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>6 ~% X1 Z( `: Y' U3 ^6 d2 z' R4 o% U% S0 z* j
  </tr>$ q6 r, x+ K9 G& h3 x) F* C" x. K1 ?  Z  @# U
  <tr>4 D; n4 d# z" u! b% u2 O8 |0 I3 o
    <td width="150" height="150"><img src="bbs-logo.gif" class="testone"/></td>. }, M% _6 k9 @& P! d  Y$ k7 }" _# v+ Z  z" @/ b9 w
    <td width="150" style="text-align:center;"><img src="bbs-logo.gif" width="46" height="46" /></td>. [! t" p; d7 L% F) }2 H3 w' p' Y7 N
        <td width="150" style="text-align:left;"><img src="bbs-logo.gif" width="46" height="46" /></td>$ n  ^8 H/ l1 f3 X0 W7 u& g3 T+ x) o
        <td width="150" style="text-align:right;"><img src="bbs-logo.gif" width="46" height="46" /></td>% L! O! `; c) E& {6 P9 ]8 s5 q) \% m+ z2 C
  </tr>5 ?  ~% ]2 Q- h. O' t6 Y5 i5 E# |# z5 w3 m  @% u6 X% l8 M& Y
  <tr>7 G( y: A) G% x% J) m$ d, t3 \- Z$ Z
    <td width="150"><img src="bbs-logo.gif" width="46" height="46" /></td>0 J3 B* H; p$ t4 q- @4 j, T1 G: G  ]( {! ?$ X' [$ C: ~3 q8 u
    <td width="150" style="text-align:center; vertical-align:middle;"><img src="bbs-logo.gif" width="46" height="46" /></td>( b# ~. c" H8 @+ E. T. v  E2 N' w8 W) m" p% m5 I$ `6 g
        <td width="150" style="text-align:left; vertical-align:bottom;"><img src="bbs-logo.gif" width="46" height="46" /></td>6 i5 h9 H' Y, X6 f) d1 n# t  G5 |6 K) z. |% u9 ]2 }
        <td width="150" style="text-align:right; vertical-align:top;"><img src="bbs-logo.gif" width="46" height="46" /></td>7 C9 }' C) l/ G3 c. Z/ w- a3 \. p# ~
  </tr>3 E7 U' s( O7 H: ^$ X' l+ i! p1 h6 X
3 J# h: _% e# V% b: z  g2 n0 V* B( D- `% L9 ]# W& q) I% U4 u
</table>: n' D: e4 t( d! g2 @" C: V# P' C$ x2 o0 d4 t# S4 b* R: N4 m$ S2 n. J) W9 z3 [; @/ [" u7 Y$ u
</body>, z( H' \5 Z6 n' i( p$ P% G% G0 j; t! x! q1 m
</html>- h1 L1 d4 d* e  c$ b9 k6 D( S% U) N* c1 h' H  K7 p1 P
- \6 E8 o( }' }$ }3 u/ l- O) w5 L) r7 B; [4 i4 R, k
5 d  Y! |& Q5 s) S7 v6 Q# V% k$ l# w. I: K6 |
$ S5 }7 k6 F4 T& I0 ]/ U$ e' o6 @' {9 k/ Y# V$ Q, U- R; v  L( b; g/ U; Y
head里面的css部分定义了一个图片的类testone让图片的高度和宽度均缩放到100px。7 @: w) W7 S- Y' g4 p# S# O% U6 M1 H- Z
表格的第一行作为对照行,使用logo原始的宽度和高度,不做修饰;  _+ w2 v3 ]: R4 a( E3 i8 E+ _$ ~  _7 a0 l0 z1 I% c& I" l1 Z
0 K; ]" X6 t5 R2 A$ A" T) U, V% A7 l5 J
第二行第一列,img标签引入css,即可看到效果;: n; g. y+ Y0 k  j$ N" x+ q  X* _! L0 |0 Q' a  b! N# w( a
第二行第二列,text-align:center;这个是让图片水平方向居中显示;! E6 E! ^& U& c0 g% L8 G# M' O& Y) g; l  m9 a- }2 L# J
第二行第三列,text-align:left;这个是让图片水平方向靠左显示,其实默认的就是靠左的;
搜外七街 www.seowhy7.com 第二行第四列,text-align:right;让图片水平方向靠右显示;# X) {* B/ h+ g3 u. [/ E7 m) Z; [* t
# O- Q% C) C5 q% l# ]2 M) Z3 `4 o. P( |2 ~- ^7 n. W; h$ {% L. p5 d8 d( t: T5 M+ r/ n
第三行第一列,同样作为对照行,不加css修饰;: `. b) l2 _9 P( n, ]9 r* w2 h4 }3 x8 J0 ~+ Q6 c0 b6 P% Q8 N
第三行第二列,与上面对照行的区别是,垂直方向也居中了;4 @$ e8 m* A- ~3 v) v* v  h4 P! ~; l/ N3 I. Z. x. w. T! z/ y
第三行第三列,与上面对照行的区别是,垂直方向靠左;# ]! Y: ]) Y/ X& B+ N4 d4 L) ~" p0 S( d( g. f3 [( h1 e0 i0 w; N  [  ?- m5 ~% c) Q# {- ]0 v' }
第三行第四列,与上面对招行的区别是,垂直方向靠右;  b7 g- F2 d5 {# M8 e! E6 s+ m2 f- O
& f- H! A: z" m, `- U
# O; t) z. [8 _& \# c7 q  {, a1 n3 J0 u2 _3 T( Y- H
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 16 条优质的评论,通过实名认证可以查询更多优质的评论
  • ice2andy Lv.5 SEO轻舟飘渺 发表于 5-4 09:05
    8 ?1 ]0 J, X4 i0 h+ A" }* p/ M/ ]
    vertical-align  是比较值得注意的属性。

    评论 使用道具 举报

  • shxieli Lv.7 SEO江东帆影 发表于 5-4 09:16
    : g3 G* e1 M: ]" t3 d. Y$ `' k9 U0 e5 R
    楼主说得很好,学习了

    评论 使用道具 举报

  • 楼主 管理员 发表于 5-4 09:58
    ice2andy 发表于 2017-5-4 09:05! f" o5 r0 y, {  o' ^( H3 |; [' [, `5 }2 _% u
    vertical-align  是比较值得注意的属性。
    % @7 r. _( l; Y# r: ^7 @1 r' h. I5 T' n0 u" h9 z+ M4 n7 v9 ~
    正文里面的配图通常是居中比较合理,好看

    评论 使用道具 举报

您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表