|
! e( Z$ z2 q0 B: Z& G# D" _# X
要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word文档即可。1 Y( ]4 J8 Z. i; p' S' C
小明的女朋友跟他生气了,他想哄女朋友开心。他在想为女朋友做点儿什么呢?他看女朋友最近经常浏览淘宝、京东、新浪、百度这些网站,于是,就给她做了简单的页面。女朋友看了之后感觉不太好看,小明同学想将列表的方式转化为表格。小明想,如果女朋友又有感兴趣的网站,那怎么办呢?是不是可以添加一个输入框和添加按钮可以让女友自己添加呢,下面是小明写的部分的代码:+ H _, P2 j2 m# v
; v3 J0 g b9 a) y/ \" D L% k( B
7 c% p' G4 I7 f3 w<DOCTYPE html>
k: d+ J7 m- p! t<html>* Y- B3 d; H3 T" m! o l0 n
<head></head>
/ b6 k, b7 l. N( ?* w+ S <body>
; ]% h1 r+ H! o& L% s0 j <table border="1" cellpadding = "20" cellspacing="0">
, n0 \- f4 M" g3 v; ~5 w <tr>
$ [" E& c3 C& T% C. Q) R <th>网站名称</th>) \$ F* `! h; x, r0 e# e+ G( p: j
<th>网站地址</th>
: d( H: K: Y3 q9 p </tr>
! `. }% K4 Q2 p, ^! d# Z1 q <tr>* v: @5 k1 A8 |$ A
<td>京东</td>( N" s/ `; ?+ L
<td>http://www.jingdong.com</td> u0 E+ Y+ Y6 i
</tr>
5 `7 f Z. o/ ]( Y, F( J </table>5 j4 h2 N$ o) l+ T9 ?9 Q! {
<label for="name">网站名称:</label>
' p O' k" k( m6 @* Z, }+ s, m <input id="name"/>' e" ^3 l& u6 \: i9 J5 i4 E& _: c5 x' e
<label for="address">网站链接:</label>
( x: h- c$ t- Q1 Q <input id="address"/>+ s% x- x" C2 T5 [ T0 Y& C
<span class="btn">添加</span># t! r8 Z# g; r
</body>/ r" \; s( r9 h6 b" y# S
<style>
' a7 |( o8 c% h; c- [( V table {
$ I; h1 v. J" W/ e. r& f margin-bottom: 20px;# C3 _5 e, F9 F; y1 `9 X4 v! d4 J
}
. z7 W; A. v( J4 ?5 g .btn {
/ _) v7 y+ g$ ] M display: inline-block;
/ W% {0 E4 G! B- _8 p, c V padding: 3px 10px;
! R, y$ ? C, {. x border: 1px solid;
; g$ z$ \/ S$ C: M! ]6 V margin-left: 20px;! P) n/ j( {0 I+ M
cursor: pointer;1 B. ~* |' k- I
}
4 h0 e6 z& V L </style>
8 i( l. R8 w- P/ D7 F2 p& L8 S1 b9 ]</html>3 s1 t1 l5 ]/ e
- D+ a" z& c6 r6 j/ `
& r& J5 k* b) O& M1.小明同学想给添加按钮添加点击事件,并判读两个输入的框的值不能为空,如果两个输入框有一个值为空的话弹窗提示:请输入添加网站所需内容。他该怎么做呢?3 A7 H9 O9 i( U/ `
* _$ {% H1 w5 ?6 Y2.小明同学想将输入框的值动态添加到表格中。他该怎么做呢?
. {: y- c! F/ S( Y3 p$ W9 j6 z. {. L
3 ~9 K0 A& K* H4 X9 Y |
|