要求:在本文檔中的題目下作答,在所寫的代碼下面粘貼運(yùn)行后的網(wǎng)頁截圖,提交本word文檔即可。
小明的女朋友跟他生氣了,他想哄女朋友開心。他在想為女朋友做點(diǎn)兒什么呢?他看女朋友最近經(jīng)常瀏覽淘寶、京東、新浪、百度這些網(wǎng)站,于是,就給她做了簡單的頁面。女朋友看了之后感覺不太好看,小明同學(xué)想將列表的方式轉(zhuǎn)化為表格。過了一段時(shí)間,小明同學(xué)學(xué)到了css,發(fā)現(xiàn)css可以美化它寫的網(wǎng)站。
<DOCTYPE html>
<html>
<head></head>
<body>
<table border="1" cellpadding = "20" cellspacing="0">
<tr>
<th>網(wǎng)站名稱</th>
<th>網(wǎng)站地址</th>
</tr>
<tr>
<td>京東</td>
<td>http://www.jingdong.com</td>
</tr>
<tr>
<td>百度</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>新浪</td>
<td>http://www.sina.com.cn</td>
</tr>
<tr>
<td>淘寶</td>
<td>http://www.taobao.com </td>
</tr>
</table>
<label for="name">網(wǎng)站名稱:</label>
<input id="name"/>
<label for="address">網(wǎng)站鏈接:</label>
<input id="address"/>
<span class="btn">添加</span>
<style>
table {
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 3px 10px;
border: 1px solid;
margin-left: 20px;
cursor: pointer;
}
</style>
</body>
</html>
1.請同學(xué)們使用css實(shí)現(xiàn)網(wǎng)頁背景顏色為#f1f1f1, 表格左右居中,內(nèi)容居中展示,距上50px,奇數(shù)行背景色為#f5f2eb,取消a標(biāo)簽下劃線效果,效果圖如下:
2.小明同學(xué)給添加按鈕添加點(diǎn)擊事件,并判讀兩個(gè)輸入框的值不能為空,如果兩個(gè)輸入框有一個(gè)值為空的話以彈窗提示: 請輸入添加網(wǎng)站所需內(nèi)容。
奧鵬,國開,廣開,電大在線,各省平臺,新疆一體化等平臺學(xué)習(xí)
詳情請咨詢QQ : 3230981406或微信:aopopenfd777