创建一个html页面， 其内容为一个无序列表， 列表中至少包含了5本畅销书，每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲web上获取。 要求采用css方法进行布局。 y |& [0 ]; s2 M
html：, p( y9 P& `! }" J* J0 Z
代码如下:( H& h# Y" p5 Y2 {5 I% \) K4 @! }4 K
<html>) t9 O4 j9 k" T3 z7 O' F
<head>
6 N f- A& Y' w9 g* A% d<meta http-equiv=content-type content=text/html; charset=gb2312 />
n5 C2 O2 Q* T2 ]+ k6 m<link href=book.css rel=stylesheet type=text/css>
, R1 B: U5 b/ `# A5 E' T</head>
5 l- s( J n! F; i( Z- L<!--.author:svitter;-->$ h4 m1 B& j/ O6 y" L0 b+ h
<body>: v! k* M! L# k# _$ F# x3 W
<div>
* m1 x. j* z" K I: t& m<h1 class=diffentcolor>linux畅销书</h1>6 v7 t' V, F6 G. e
<div id=menu>9 }* {! ?8 \- _6 v+ }* c, K( ?
</div>
7 e/ l" x0 c4 i; ^( H5 H<div id=content>
) ~. q% F( u$ m$ n8 F3 c<ul># G) J( Q6 C3 q& X: h
<li id=book1>鸟哥的linux私房菜基础篇</li>
4 I4 b) h- V+ `% l7 U, u2 f6 o<li id=book2>鸟哥的linux私房菜服务器篇</li>
0 z+ L+ f w# D6 ~ _<li id=book3>linux命令行与shell脚本编程大全</li>5 w2 b D4 G7 s! N! p0 H$ `
<li id=book4>linux运维之道</li>7 Q. n# z* }+ d
<li id=book5>linux/unix系统编程手册</li>
% u! n- a" t7 z</ul># t, O8 L+ V! _# b% r
</div># H$ m% w7 h9 J& E
</div>8 }4 L3 E5 Z& w1 _+ @
</body>- @0 @2 K4 q' Z/ P
book.css:
$ ^/ W2 m& i: q- K K代码如下:8 L& S. r5 _2 _8 g
.diffentcolor{color:green;}
( d' k6 w! Y% V1 d: N5 x#differcolor{color:green}( A9 {( A, ^7 [
body, td, div, .p, a {; n# r/ y2 }9 V, V" m* B5 {- O
font-family: arial,sans-serif;! r1 _* P3 ?# T; `% x' z
}9 v* n+ X2 V' }# o b- M( R5 |
h1,h2{
6 p' f1 P& l7 T8 s9 W Mfont-family:sans-serif;
& M, y V8 T/ Z9 S) Ucolor:gray;5 B" o% C3 h# i: p& H6 P4 k# ?
}# D$ v4 L! f B2 {$ G
.author{0 Z0 ~; |* G( B. ]7 I
by:svitter;
1 p9 B% Z3 Q9 [# g' ^; T}9 j# x/ B; r# ]$ j& I% m9 I
h1{# U- J$ I% \5 ]9 B
border-bottom:1px solid black;" m& i6 E3 {6 V. X5 o. a
border-bottom:1px;
+ D2 V q. N6 D) Jsolid black;; ~. ]2 s# ~; {2 G) S2 e
}' r+ v2 D, v9 G0 F/ g' b. |
div#container{width:500p}" L7 ~. L0 {- h: M
div#menu {width:150px;float:left;}
4 U2 C: ^ `4 y# O* O, Kdiv#content {float:left;}
( O5 g6 V4 d) L4 Eli#book1{2 @6 J) P) V( y2 [- M6 G4 g8 K
list-style-image:url(pic/popularbook.jpg);
; b9 V* C- C) D; H% Y}
8 _0 u/ o" T4 n6 j( X' l3 uli#book2{1 |1 U j5 ~& W, s8 s5 c
list-style-image:url(pic/popularbook2.jpg);1 @6 D# ^" `) l8 O' h+ R4 J) r
}% y! t+ H& H5 Z5 Q5 J0 Q
li#book3{
# z$ O" _" ^, X, Flist-style-image:url(pic/popularbook3.jpg);
' D" j8 B6 B/ S' I}4 ?: C7 o6 X0 |) y$ _ W( Q. M
li#book4{
- Z- J* p1 g& Klist-style-image:url(pic/popularbook4.jpg);
; a- A( e0 z3 G9 h; U1 F3 s}
8 h0 ]# Z, P8 n2 a* U: cli#book5{
- Z2 L! Q' f, X2 n/ }& Qlist-style-image:url(pic/popularbook5.jpg);# V% T3 V& @$ i
}/ S/ U6 _4 h1 G. I Z8 z
M3 X( a- c1 R- q4 k
更多网页制作信息请查看： 网页制作 |
|
拥抱AI搜索新时代！GEO优化成为企业流量增505网络资讯
GEO优化如何让企业流量翻倍？404网络资讯
GEO优化，企业抢占流量高地的制胜法宝404网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡