这次Web作业有点难度,打了一天的代码才能完全正确符合老师的要求,考察的是关于表格和框架的结合用法,如果要查看表格和框架的用法,请百度。
在你浏览之前建议先对CSS有一定的了解与联系。
本次作业的解析写法
请勿抄袭该作业内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业3</title>
<style type="text/css"><!--CSS内部声明-->
p{
text-align: left;
font-family:"microsoft yahei";
text-indent:1em;
}
.left{
text-align: left;font-size: smaller;
}
.center{
text-align:center;font-size:smaller;
}
a{
font-size:large;
font-family:"microsoft yahei";
color:deepskyblue;
font-weight: 900;
}
span{
color:#808080;
}
</style>
</head>
<body>
<div style="float: left;"><!--div布局从上至下变为从左至右-->
<table cellspacing="0" cellpadding="0"><!--使用三个表格,这里是第一个表格-->
<tr>
<td>
<img src="图片地址"/>
</td>
<td>
<img src="图片地址"/>
</td>
</tr>
</table>
</div>
<div style="float: left;"> </div><!--这里是为了使用空格才使用 -->
<div class="center" style="float: left;">
<table frame="box" cellpadding="0" cellspacing="0" height="400">
<!--上面的frame是关键属性,如果你要如图所示的效果,建议使用frame属性,且这是第二个表格-->
<tr>
<td>
<img src="图片地址"/>
</td>
</tr>
<tr>
<td>
<a>店铺遭恶意改价和攻击,3分钟卖出100</a>
<p><span>摘要:</span>[短短3分钟内,我的店铺竟以07折被卖掉了100瓶产品……]</p>
<p><span>相关:</span>[10平米小黑屋里诞生的四皇冠][游戏玩家让人喷饭的游戏百态]</p>
<p><span>更多:</span>[雷人买家评语和爆笑卖家解释][麻辣搜店更多话题]</p>
</td>
</tr>
<tr>
<td>
<a>天啊!凤姐来袭,看小掌柜如何招架!</a>
<p><span>摘要:</span>[无论压力有多大,不要让岁月把你磨成老头……]</p>
<p><span>相关:</span>[拒绝辐射尾气 给妆容减负][美发 保养的秘诀在于折腾]</p>
<p><span>更多:</span>[励志!学习大S的美白精神][关注淘宝达人]</p>
</td>
</tr>
<tr>
<td>
<a>旁人靠边站!忙碌通勤族的护肤指南</a>
<p><span>摘要:</span>[无论压力有多大,不要让岁月把你磨成老头……]</p>
<p><span>相关:</span>[拒绝辐射尾气 给妆容减负][美发 保养的秘诀在于折腾]</p>
<p><span>更多:</span>[励志!学习大S的美白精神][关注淘宝达人]</p>
</td>
</tr>
</table>
</div>
<div style="float: left;"> </div>
<div style="float: left;" class="center">
<table frame="box" cellpadding="0" cellspacing="0"height="429"><!--第三个表格-->
<tr>
<td>
<img src="图片地址"/>
</td>
</tr>
<tr>
<td style="text-align: left;font-family:'Microsoft YaHei'";>
<ul><!--列表的使用-->
<li>
淘宝论坛婚嫁分区华丽上线
</li>
<li>
淘宝论坛用户条款
</li>
<li>
年度论坛百名优秀志愿者评选
</li>
<li>
论坛用户负分自救途径说明
</li>
<li>
论坛用户被拉黑后的自救途径
</li>
<li>
淘宝论坛发帖回帖等级限制
</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="图片地址"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<img src="图片地址"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
代码效果图:
本次作业重点内容考察:
- 表格的进阶
- CSS的使用(内部用法)
- HTML 4.01 符号实体
- DIV布局的规则以及相关属性变法
以上就是本次作业的解析,如果你对此感兴趣可以点赞并且关注,感谢你的观看!
(好歹敲了半天的代码,调整了一天的排版,几个赞也不多吧?)