发新贴  快速回复

第9章:呈现数据的利器:网页表格

多多
2017-08-02 18:48

本章节相关视频内容有:


---

 

9.2-表格标签

http://2017.miaov.com/v_show/247

 

 


---


如对本章内容有任何问题,可在该帖下留言,妙味讲师们会详细回复

妙味用户884891

老师好,课后练习题虽然效果做出来了,但是总感觉代码写的太繁琐了,请问应该怎么改正呢?

 

文件路径如下:

代码如下:

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
}
.box {
width: 800px;
height: 424px;
background: #FE7FAA url(2.fw.png) no-repeat center 26px;
margin: 100px auto;
padding-top: 76px;
}
.box1 {
padding: 128px 45px 0px;
height: 269px;
background: url(1.fw.png) no-repeat center 21px;
}
.box2 {
width: 681px;
height: 240px;
background: #fff;
padding: 29px 0 0 30px;
}
table {
width: 630px;
border-collapse: collapse;
border-spacing: 0px;
margin-bottom: 10px;
text-align: center;
font-size: 14px;
font-family: "宋体";
}
th {
font-weight: 100;
}
th,
td {
padding: 0;
border: 1px solid #AB8FCF;
}
.header {
height: 40px;
background: #F5F1F9;
color: #AB8FCF;
}
.date {
width: 120px;
height: 81px;
color: #fff;
}
.date1 {
background: #AB8FCF;
}
.date2 {
background: #F77761;
}
.ty1 {
height: 40px;
}
.icon1 {
width: 65px;
background: url(icon1.fw.png) no-repeat center center;
}
.icon2 {
width: 65px;
background: url(icon2.fw.png) no-repeat center center;
}
.last {
width: 97px;
}
.hot {
color: #F77761;
}
.cool {
color: #57B9D5;
}
.table1 {
border: 2px solid #AB8FCF;
}
.table1 th {
border: 1px solid #F5F1F9;
border-bottom: 2px solid #AB8FCF;
}
.table2 {
border: 2px solid #F77761;
}
.table2 td {
border: 1px solid #F77761;
}

</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box2">
<table class="table1">
<tr>
<th class="header" colspan="2">日期</th>
<th class="header" colspan="2">天气现象</th>
<th class="header">气温</th>
<th class="header">风向</th>
<th class="header">风力</th>
</tr>
<tr>
<td rowspan="2" class="date date1">23日星期六<br />7~30</td>
<td class="ty1">白天</td>
<td class="icon1"></td>
<td class="ty1"></td>
<td class="hot">高温30</td>
<td class="ty1 last">无持续风向</td>
<td class="ty1 last">威风</td>
</tr>
<tr>
<td class="ty1">夜间</td>
<td class="icon2"></td>
<td class="ty1">多云</td>
<td class="cool">低温7</td>
<td class="ty1 last">无持续风向</td>
<td class="ty1 last">3级风</td>
</tr>
</table>
<table class="table2">
<tr>
<td rowspan="2" class="date date2">23日星期六<br />2~20</td>
<td class="ty1">白天</td>
<td class="icon1"></td>
<td class="ty1"></td>
<td class="hot">高温20</td>
<td class="ty1 last">无持续风向</td>
<td class="ty1 last">低温</td>
</tr>
<tr>
<td class="ty1">夜间</td>
<td class="icon2"></td>
<td class="ty1">多云</td>
<td class="cool">低温2</td>
<td class="ty1 last">无持续风向</td>
<td class="ty1 last">3~4级风</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

 

2017-11-14 00:41  回复本帖
登录 后才可以发表回复