|
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。5 u0 a5 [+ o2 r3 S
小明的女朋友跟他生气了,他想哄女朋友开心。他在想为女朋友做点儿什么呢?他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站,于是,就给她做了简单的页面。女朋友看了之后感觉不太好看,小明同学想将列表的方式转化为表格。过了一段时间,小明同学学到了css,发现css可以美化它写的网站。
, A8 k, n6 J& R0 k7 Z; Q<DOCTYPEhtml>
9 n, J9 c7 G0 i1 o7 W" L<html>% f7 Q3 s* u- A1 k% ^/ z+ C* V5 q
<head></head>
9 s: o( P% [6 H% s) X- j<body>! Z9 ~4 o' } N& q' {$ @* k
<tableborder="1"cellpadding = "20"cellspacing="0">
$ X( q8 P3 |7 d<tr>; k6 k. s& p! g5 H$ u( ]4 I( F
<th>网站名称</th>
9 D$ d* q" s; ?. i1 o9 ~; L<th>网站地址</th>9 ~$ O7 m( l4 a* V
</tr>( b+ V. ~" Z) ?" O e
<tr>
- R$ w% \. ^7 \, v<td>京东</td>
& u8 D8 Q8 d0 {: X1 @<td>http://www.jingdong.com</td>9 Q) v( ?9 w' n* j( O# N! H
</tr>1 t0 S8 \; v- f
<tr>% Q1 {3 z4 k1 _8 n; Z0 g1 O$ b
<td>百度</td>
: x. T( T# |9 w2 Z& a<td>http://www.baidu.com</td>
8 R* }6 N2 M0 L5 e2 R6 I1 l</tr>
0 K; V% g/ q. {6 B. p( K# K+ m<tr>
* U0 `5 s+ y7 [/ F, K/ ]- T" M3 h<td>新浪</td>& f5 o2 @1 c- K I; i
<td>http://www.sina.com.cn</td>8 n7 a' e% T$ t& G7 s& q
</tr>0 D! c' v$ p {9 d0 T: F h
<tr>
" e& y: d0 V9 l4 V; Y* ]6 h4 E<td>淘宝</td>0 z$ t4 a3 |8 S0 L9 v
<td>http://www.taobao.com </td>
6 o8 j5 P! T" m2 d9 W</tr>
5 E5 A& E. {& S6 d) [# Z8 J</table>
- Z6 `2 x' t8 H9 q' L2 e$ k<labelfor="name">网站名称:</label>. L7 u6 i7 @- d+ x H: L, N& k
<inputid="name"/>
: V% n- Q+ S4 {9 q<labelfor="address">网站链接:</label>
O3 ~" R: e7 ]' z# Q6 U8 }+ Y6 p<inputid="address"/>1 W% A4 a5 H+ [) X
<spanclass="btn">添加</span>' U( z1 P9 b: X( R0 `) F G
<style>
* W, S9 U- g- a" w/ D2 U3 Xtable {' u; t( T, R g5 [
margin-bottom: 20px;
9 Z% D6 S6 D& ?; W$ M' r }
% r7 K" E; }8 b: E% o7 [.btn {
7 y& N: i) a$ y" |: G7 K* Gdisplay: inline-block;' p2 `. |! e2 h x% ^+ [: o
padding: 3px10px;
7 k9 q h- h9 ]/ w/ lborder: 1pxsolid;% ^" X; t0 {5 z# ]( g1 f; z
margin-left: 20px;
( ?/ I1 |# Z7 ucursor: pointer; z7 { Y3 O) t0 J) d& h
}% l3 c( H, S: ^/ G; v; I' C
</style>0 \. q5 a! L0 Z& l( E
; ?3 F" }% u5 U/ c6 j1 g) ~</body>0 Y3 p: e% S4 ?6 ~' B
</html>
0 ?8 O& S* K( v I$ J
# S( q/ o$ W3 ^; |0 H1.请同学们使用css实现网页背景颜色为#f1f1f1, 表格左右居中,内容居中展示,距上50px,奇数行背景色为#f5f2eb,取消a标签下划线效果,效果图如下:( l0 M3 r$ ?3 f7 ^2 ^5 u0 ~
! F9 F( \, G* {+ \4 `
3 \7 t6 T. |2 M- z$ p; F5 \2.小明同学给添加按钮添加点击事件,并判读两个输入框的值不能为空,如果两个输入框有一个值为空的话以弹窗提示: 请输入添加网站所需内容。
: w% F/ X' `6 A$ g, z/ Y |
|