创建一个html页面， 其内容为一个无序列表， 列表中至少包含了5本畅销书，每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲web上获取。 要求采用css方法进行布局。
/ M q0 q; G- E Z" `0 X) W' Chtml：
# {+ C: V8 z' i4 [% U& D5 _代码如下:4 T: O# H0 L5 A& V
<html>
; ~; l7 d6 E& H<head>, _# }5 D1 l% [1 ^: Y* D
<meta http-equiv=content-type content=text/html; charset=gb2312 />
) j6 m" [/ X Z9 _9 j6 T) z<link href=book.css rel=stylesheet type=text/css>
B# f% e8 d0 |' c ^$ S</head># k) R6 @' _+ c9 z3 {
<!--.author:svitter;-->
/ X+ z; R$ v" Z2 l3 O<body>3 C; d- d& ]0 g3 {( N
<div>
# R* {0 x k2 t0 Z b- f, H<h1 class=diffentcolor>linux畅销书</h1>- \, u0 D1 w" q
<div id=menu>
/ t* s) D! E1 F</div>8 q5 m, N# p: P/ I$ n7 y
<div id=content>
8 m7 q0 G+ j1 ?1 L) F/ ^<ul>
/ L- X( s! A! b+ C2 a<li id=book1>鸟哥的linux私房菜基础篇</li>
5 E8 G! o* i! K<li id=book2>鸟哥的linux私房菜服务器篇</li>- z" b2 a2 u; J6 b: r3 D7 F' r
<li id=book3>linux命令行与shell脚本编程大全</li>
3 z9 ]! z' h' s2 p<li id=book4>linux运维之道</li>0 ?3 R2 I0 a3 x& o8 c
<li id=book5>linux/unix系统编程手册</li>4 f. q6 K( k8 }% s8 k
</ul>" k& L' j5 ~1 x4 t' Z. E9 w
</div>2 T. a- E. c( A# H% ^; K! I
</div>
! e* s+ O+ m* d% E( ]2 ]6 n' ~</body>
8 L( U; W8 Y2 s! Pbook.css:
# z7 n, l% u+ f$ r% o! e代码如下:
+ b( w5 O8 L6 K* g. `3 j7 Y.diffentcolor{color:green;}
5 d/ _2 n+ q/ r# f#differcolor{color:green}% q% Y* |, U+ F! [, j
body, td, div, .p, a {, H) r% m U+ I4 v, c, ^% z
font-family: arial,sans-serif;
! ?9 l/ a- @/ w+ c8 @2 w, l& T( h}
- E% c+ t5 p8 S8 K, k& `0 A% rh1,h2{
w1 S+ e, d3 |& h( G' }font-family:sans-serif;
" x+ C% G6 t3 Z2 p/ Hcolor:gray;' ^8 e1 M7 S7 S/ I- @. [0 z
}
' X8 P5 }+ p+ Z; q: G2 k$ i# ?.author{! b/ g8 M2 x# ~# f' T
by:svitter;2 p& X: S P2 z+ z7 c! I
}6 H6 @4 g; ^. E8 O* o( G0 A: l
h1{3 H$ B4 i2 u: E- D& l2 V
border-bottom:1px solid black;/ p. _5 u) [: _5 V. l3 B
border-bottom:1px;, l4 T/ B6 O5 W2 O* I4 O) t
solid black;9 H! c& K2 W; `- k
}: b8 g- j) l4 Y/ v: p3 ^
div#container{width:500p}
4 W" n @/ V6 }8 |div#menu {width:150px;float:left;}( \2 i3 ]6 b' v3 c$ C- N0 W
div#content {float:left;}4 a- x" K8 n6 V ]& I1 M
li#book1{) }8 N r( S. F% d& s$ L) j6 Q& X
list-style-image:url(pic/popularbook.jpg);
; W2 L; C+ z+ C/ Z2 ~# m}7 y! W+ U' p$ P% V7 X2 D
li#book2{
2 q: J( E) c% E5 B P: Z7 plist-style-image:url(pic/popularbook2.jpg);2 y# E, n* D( ^9 d4 y2 O
}
: O, N/ Z0 Z B+ z: H0 k. ~li#book3{
5 k; E/ x& J- L5 B2 _$ Alist-style-image:url(pic/popularbook3.jpg);6 ^) ^: }+ H6 O
}
; s9 t+ ^; J0 _# p* t, yli#book4{/ \' g( K P9 c9 W& \6 E
list-style-image:url(pic/popularbook4.jpg);
, k- p8 ^, l" L' g. n% _}# H, E8 r4 a3 m- W' }7 J8 H. z
li#book5{) p1 J; X+ W6 D
list-style-image:url(pic/popularbook5.jpg);
) [2 q: p5 `" {/ K6 P( y( j}* b, W; ]; R3 v& b& x r4 M/ t
& U, w1 `. u: F7 c4 y& m3 \
更多网页制作信息请查看： 网页制作 |
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡