|
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。
1 ]0 q: g# f9 E' ]- ~, w" |/ D小明的女朋友跟他生气了,他想哄女朋友开心。他在想为女朋友做点儿什么呢?他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站,于是,就给她做了简单的页面。女朋友看了之后感觉不太好看,小明同学想将列表的方式转化为表格。过了一段时间,小明同学学到了css,发现css可以美化它写的网站。 ~: v; \0 b; m
<DOCTYPE html>* y. |% P8 P+ u1 [
<html>: Y" U M$ F( v2 \
<head></head>
} D) _) H$ ~ <body>
2 Y# n3 N6 {, X' E <table border="1" cellpadding = "20" cellspacing="0">
' y- l$ E- X9 }' g6 \ <tr>, g' _! O. S8 K+ v5 M
<th>网站名称</th>
8 f& [4 f5 B+ E <th>网站地址</th>
7 a1 c( E% u) n </tr>
& P9 C5 M! u% N$ z4 ]. U <tr>
( i1 i) m5 J* ]9 ]- D <td>京东</td>' n X5 [ x# b' I% G
<td>http://www.jingdong.com</td>. ]/ j4 c& P0 M5 ?& U1 o
</tr>
- g W7 ~+ o3 C9 T <tr>6 s! h. s7 ^$ l( U
<td>百度</td>, Q) r* W0 m5 ]% R# m$ o
<td>http://www.baidu.com</td>; Q/ N0 w% f- F
</tr>
0 ~( N) s$ m. _ X+ a4 K3 r <tr>6 G% f( j( Q9 F: z9 f" _$ L
<td>新浪</td>
1 ]( r/ U$ C0 T3 p5 g <td>http://www.sina.com.cn</td>; L$ S& ?- `1 Z' a6 A! |7 k/ @
</tr>1 B, l. D$ j( K# t
<tr>1 F( ]% _& ~) M; p
<td>淘宝</td>
# ~1 V% c: W- w/ D+ ^% P: L* f! ~ <td>http://www.taobao.com </td>
2 u& x/ ]! {( h, d C" O </tr>
) w4 J7 F1 |* K! w </table>
4 g Z/ ]9 o; }, H4 ~ <label for="name">网站名称:</label>! @6 k% n T8 G. J, r! L
<input id="name"/>
+ x: l+ q% B4 Y& K4 m <label for="address">网站链接:</label>
/ I3 N) S# i; H4 f- j" M+ D <input id="address"/>2 i( S, |. O5 x: V$ l3 [% h h
<span class="btn">添加</span>
$ r$ e& o& @. b& x4 y<style>) \( W2 O, U* X V" F$ k% z( v7 D0 \
table {) F6 v. t' l" x7 [9 F2 C' i
margin-bottom: 20px;
. o/ V1 P3 v1 a5 \9 B }) q! i, c7 k. N W
.btn {; c2 r6 t' v- e/ X6 B% D
display: inline-block;5 c1 Q/ c% i% D0 U& w$ y
padding: 3px 10px;6 R) L' W. D$ _3 L' i
border: 1px solid;
( b4 ]" r% h/ d, i/ l: w5 [ margin-left: 20px;4 q# h9 R" W! E
cursor: pointer;: s3 k8 i' N: j- O8 B3 T& W
}
`; l+ \2 W- r9 X* b </style>! A0 e- E8 ~' Q
# U0 y; z% a, f
</body>8 i( i" g0 ]* M( D& p5 p& e
</html>
# Y) g% Q! f! Q& c1 U0 C, Q6 C; F5 \( L) Z( a1 Z% a- I6 _% S
1.请同学们使用css实现网页背景颜色为#f1f1f1, 表格左右居中,内容居中展示,距上50px,奇数行背景色为#f5f2eb,取消a标签下划线效果,效果图如下:8 u; |6 Q0 m7 _5 K) R# y1 w' k
( }; H; i8 f0 v$ V; Y
. Z# H& [+ \7 w1 ]. X2.小明同学给添加按钮添加点击事件,并判读两个输入框的值不能为空,如果两个输入框有一个值为空的话以弹窗提示: 请输入添加网站所需内容。
- P% [; H/ z& [0 ]' j% M |
|