|
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。* J0 q# q+ f/ v5 a9 I2 s u- q
小明的女朋友跟他生气了,他想哄女朋友开心。他在想为女朋友做点儿什么呢?他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站,于是,就给她做了简单的页面。女朋友看了之后感觉不太好看,小明同学想将列表的方式转化为表格。过了一段时间,小明同学学到了css,发现css可以美化它写的网站。) c) c: b7 F0 |( ~2 b; i+ R
<DOCTYPE html>
* I. F9 A% M: G9 s) ~ <html>
, g& [9 b$ `5 H& p- e5 v# c( m <head></head>
, B( k2 X6 V2 s: w2 ? <body>; N2 T, @5 E, q+ O( V
<table border="1" cellpadding = "20" cellspacing="0">
3 V$ F, M0 d4 { <tr>
) L1 ^' o: Y/ e* C3 ~ <th>网站名称</th>
6 ~. ^% |8 K8 W( \+ v f <th>网站地址</th>$ H# L0 |1 \9 A" v" J# l* `8 L
</tr>' q# c/ ]$ Y1 A7 \, ]* w. D! i
<tr>
$ Z' h3 Y9 v* g2 p# q0 v <td>京东</td>
6 z1 v$ ] c' }* Y! F( T/ e <td>http://www.jingdong.com</td>
7 z" O' |$ M; H: y </tr>
8 a1 d# F2 |# ~8 k/ Z# | <tr>
' I( a7 ]3 d, M" R <td>百度</td>
P. ^& m* C. P& n5 F <td>http://www.baidu.com</td># _5 d6 p5 _% {
</tr>- x- k7 C& q+ T% `, O! Z+ I% O$ |! |
<tr>
) S* N0 [" F+ r: k <td>新浪</td>
) h0 T$ l. F2 d0 V3 O0 g$ R! X <td>http://www.sina.com.cn</td>1 m3 u6 i* k: ^% J
</tr>
+ @/ m$ u9 @" O <tr>
: g9 p( G: {% b. Q! L i5 s% H <td>淘宝</td>
8 T/ w( M) S& ]9 `5 D8 W <td>http://www.taobao.com </td>
) c* d. s6 F) \/ G* B0 s% s </tr>
- n7 o* P# |4 w1 y5 | b$ v# w </table>
" t& _7 m" |% m <label for="name">网站名称:</label>9 Q) q1 O7 ^4 ^, f& S
<input id="name"/>
* v( |; X' M9 P1 s9 F <label for="address">网站链接:</label>
# N; U; x4 U& ~# u <input id="address"/>7 ?8 E4 l4 q' n4 M
<span class="btn">添加</span>4 F0 t. M; R; [0 m
<style>
% p$ }9 e; G5 e table {8 V' A7 W3 a7 s& e5 {
margin-bottom: 20px;' K; y' s- F7 t0 t7 P
}* {) l" O* t6 _
.btn {# F% p8 }0 n' K; z! P
display: inline-block;8 p8 v4 a% [$ k* O( d. T; H
padding: 3px 10px;/ P) \' R/ F. l" Z# a
border: 1px solid;# |3 w2 i, o" h1 @& s) {' y
margin-left: 20px;' K5 w" N6 D/ t! n S
cursor: pointer;
$ w" u+ o$ g7 m+ r }
$ u$ k' Q, X, B! p6 D </style>) Y( j v" E) R3 z/ t
V& x1 o/ h! L- ]9 @4 E% K# ~
</body>* H; t4 P( \% p7 i
</html>: h# O5 h5 P8 F# w" M2 g; g
+ a6 g$ m5 B, P7 R" G
1.请同学们使用css实现网页背景颜色为#f1f1f1, 表格左右居中,内容居中展示,距上50px,奇数行背景色为#f5f2eb,取消a标签下划线效果,效果图如下:
: t; T* r" d# h4 l! q0 P / U3 {/ g9 W: G0 K5 Z4 F1 f
6 C7 O! u8 ^# O
2.小明同学给添加按钮添加点击事件,并判读两个输入框的值不能为空,如果两个输入框有一个值为空的话以弹窗提示: 请输入添加网站所需内容。( C$ j, s9 `5 ~& V) f3 v# \) d( V
|
|