|
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。( b6 n% _8 F$ @. c- ]
小明的女朋友跟他生气了,他想哄女朋友开心。他在想为女朋友做点儿什么呢?他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站,于是,就给她做了简单的页面。女朋友看了之后感觉不太好看,小明同学想将列表的方式转化为表格。过了一段时间,小明同学学到了css,发现css可以美化它写的网站。
. M9 p* w- B; K, H- G<DOCTYPE html>
4 N1 l; ]8 ~7 o$ }; d8 a, b, A <html>9 \5 U2 E+ a& _" I
<head></head>
6 q! G* X! K" ?" }7 Q <body>1 r4 j. W( B+ o+ o2 |' M) `
<table border="1" cellpadding = "20" cellspacing="0">1 v6 \% I) i; h" _5 {* j+ p
<tr>
9 B& R) O, q0 t) r: t <th>网站名称</th>
b' Z6 `* P6 g; e2 z <th>网站地址</th>2 E w, p- N0 U+ ^/ B" n
</tr>
# G2 ~# I# S5 }4 Y4 ` <tr>
8 E7 x+ E2 g; I" T3 L( ]% N4 u6 Y' ?( x <td>京东</td>
) }+ y' c, X8 F% ]; W2 q2 i <td>http://www.jingdong.com</td>
6 M4 s& @) z0 c/ j </tr>
9 a' v3 g- ?- a$ A. _7 E <tr>) C0 G! _8 }, V% E6 U
<td>百度</td>
2 g/ V& z6 b: P* k( T7 I <td>http://www.baidu.com</td>
. U' j3 V5 L5 q6 R& L- ^" c. e( S4 l7 c </tr>/ ~3 l+ b% z" A; p1 f2 C7 j9 a( o
<tr>+ [) \/ f5 N0 B* m8 g- ]2 N% V
<td>新浪</td>* ^* w. `2 k' K
<td>http://www.sina.com.cn</td>
' E/ e- e u4 ?5 Y </tr>8 p) I! {3 d8 {1 I4 r8 I
<tr>
! w h% S, t) e) W& z- G <td>淘宝</td>
5 v: e- _- p9 f5 g. A7 B <td>http://www.taobao.com </td>
! V# c8 d6 i0 U+ W </tr>
0 Z* Q" s) ^$ B) T3 B </table>
) L, _1 u. h5 `: s6 ?4 e1 i <label for="name">网站名称:</label>
+ ^" B# p5 k) j* }9 K <input id="name"/>
3 e. N% O2 N2 ]. u: H4 `7 o3 } <label for="address">网站链接:</label>) E5 o0 J& X2 c+ N3 k8 Z9 g0 y
<input id="address"/>
W3 r; L3 g" }. }( I4 L7 n <span class="btn">添加</span>
4 S+ Z( p" c; I! r1 I* J<style>
3 p. U, E: O- b# L; t6 Z table {
& x+ P& u% P9 K margin-bottom: 20px;9 \1 [ \9 t5 |/ N& D
}& \4 C2 q9 [* o$ b8 h2 w) _
.btn {4 y. E, c" m+ G1 D7 U7 m1 j
display: inline-block;
3 e* b% n7 C& p# L6 S4 t padding: 3px 10px;
4 M2 H I5 g P; m border: 1px solid;0 L7 e+ s# v0 ^' z9 b6 o# q1 d
margin-left: 20px;
# c% ]$ `: Y" |7 M cursor: pointer;' w2 b! L8 G3 u+ N) J" S* u
}* N7 U4 J2 C7 y. W
</style>
/ O6 ~& A x& t' C4 ]$ S" B% I( v# y+ U X
</body>
, ~( x& I/ @1 p h </html>, D3 d, g2 s3 ?- n
$ ^* {0 i: Y7 N- V
1.请同学们使用css实现网页背景颜色为#f1f1f1, 表格左右居中,内容居中展示,距上50px,奇数行背景色为#f5f2eb,取消a标签下划线效果,效果图如下:; i: P* s9 e0 ~/ O
2 X( F" k, ~" m, Q! J; J0 _) R0 A2 ?2 U( f5 D" P5 ^
2.小明同学给添加按钮添加点击事件,并判读两个输入框的值不能为空,如果两个输入框有一个值为空的话以弹窗提示: 请输入添加网站所需内容。
- a# w8 T; W& W4 ?& T6 z! j2 n, V |
|