创建一个html页面， 其内容为一个无序列表， 列表中至少包含了5本畅销书，每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲web上获取。 要求采用css方法进行布局。
- q- I" ^$ c8 B, K9 V$ d3 e rhtml：
5 h8 \+ }2 f/ ~: ?代码如下:
; k0 `4 [/ M4 T. B; d<html>( U6 U' F# _. c! [
<head>8 `" F5 ]2 D* e$ b W
<meta http-equiv=content-type content=text/html; charset=gb2312 />
- @1 M" w- K% N: h<link href=book.css rel=stylesheet type=text/css> d0 C7 Q, \7 W9 ]; k
</head>4 [: e$ d3 D0 |+ T9 Y
<!--.author:svitter;--> q. k; x! T) S% @
<body>( y" i }: w$ l; U; u9 E
<div>: x& g1 {8 s& {: @
<h1 class=diffentcolor>linux畅销书</h1>, S8 N0 h9 R. B6 W
<div id=menu>4 y- W$ K; [+ }, T$ \0 o( {5 Z
</div>
$ n- L! w6 l% |<div id=content>- W' J& b. T# w! p# c5 {1 b
<ul>( b/ d6 O3 S; K: |+ S' \1 r
<li id=book1>鸟哥的linux私房菜基础篇</li>
9 Z; F, [2 w/ G6 J6 o: k<li id=book2>鸟哥的linux私房菜服务器篇</li>$ \' `3 l) a2 E2 ^% S( ?$ J+ s
<li id=book3>linux命令行与shell脚本编程大全</li>
4 P* ^: p9 t9 S) B<li id=book4>linux运维之道</li>
! y- Y' @# t, P) R1 f: @<li id=book5>linux/unix系统编程手册</li>
; s) `1 I1 u( h% D- N4 s. u' U</ul>: R- K" A- p! y" h( t
</div>
- L9 k) t2 |* m j</div>
4 W: B$ P9 r3 y; h* F+ c</body>9 |- @+ {6 ~' b& Z0 @
book.css:
T0 x, s: g/ E. I3 Q+ d代码如下:% F- f* K2 K n' L4 U9 R
.diffentcolor{color:green;}/ ], n1 |4 x; }2 C% v/ w0 X
#differcolor{color:green}# i4 y/ `3 j. z& K4 y, ?
body, td, div, .p, a {. s0 Y5 E! K$ L- _
font-family: arial,sans-serif;; X2 A2 T7 d! W" M2 t C
}
$ @4 B3 o0 @. bh1,h2{
# [* \" ~! K% c+ P) Xfont-family:sans-serif;
" ~8 _- D5 E" i0 \6 I6 y1 ?color:gray;
+ V: B9 Q8 V) B# d}
1 O! [- j8 g2 J! F/ ]; j& V, p.author{
9 B& [: I! U/ I( G9 Iby:svitter;" [- M' W+ u: o( G# G2 r
}/ e1 T: y+ U2 r* X
h1{- t2 t" V* S) G
border-bottom:1px solid black;* p3 X2 u, e# J8 b
border-bottom:1px;& |) P+ D/ Y% ?# ?6 ?3 Q: ?
solid black;2 u& a3 T- T! o1 s! q- r/ c
}
& ~& k; g# \$ W! Fdiv#container{width:500p}! T1 g% g: i Y/ E) B/ s! g3 i4 R
div#menu {width:150px;float:left;}
% x$ S! w) X4 ?, I# Mdiv#content {float:left;}
) C: e7 }7 n2 v$ p9 J# o0 h" \' M0 Tli#book1{9 o3 P. q4 W. Y+ k) F& f
list-style-image:url(pic/popularbook.jpg);. k9 `% ~# v. }5 ~% _0 M) Q3 a* J
}' R3 E9 I6 x8 b& V: r4 K) K3 k
li#book2{
" D) k# p0 i ^0 y. h+ O7 B Ylist-style-image:url(pic/popularbook2.jpg);: d. q: n$ K& U" O7 `
}
5 q0 N. _1 r" I# |1 rli#book3{
- F( x5 F( ?5 A, g: Y5 Nlist-style-image:url(pic/popularbook3.jpg);& R" f# y, h* e; Q; P; H
}8 `& O+ ?+ T7 T6 p* k2 R
li#book4{
. L# x0 O8 A/ ~ o, J$ q0 L' ylist-style-image:url(pic/popularbook4.jpg);( f& ~% T( j/ m
}
2 r X2 _. Q# u2 H5 Yli#book5{$ J# n8 o) r) ^( a0 o
list-style-image:url(pic/popularbook5.jpg);3 j1 R+ P7 i0 o3 E
}
& c9 B% W0 ?+ U" H0 K
7 B' x% c. _2 h! X3 @7 L5 h更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴404求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增1010网络资讯
GEO优化如何让企业流量翻倍？909网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡