3-10的作业，感觉自己的代码好乱哦，有谁可以帮忙看下吗，谢谢
来源：3-10 作业题
weixin_慕田峪7033080
2020-01-10 15:52:21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
<!--头部-->
<div>
<!--logo部分-->
<img src="images\logo.png" />
<!--导航-->
<table>
<tr bgcolor="#E1F2F9">
<td><form align="right">快速通道
<select>
<option>voho</option>
<!--后面自己添加-->
<option>11</option>
<option>22</option>
</select>
</form>
<ul>
<li>学校情况</li>
<li>机构设置</li>
<li>师资队伍</li>
<li>科学研究</li>
<li>招生就业</li>
<li>图书馆</li>
<li>校长信箱</li>
<li>校园导航</li>
</ul>
</td>
</tr>
</table>
<!--banner图部分-->
<div width="100%"><img src="images/banner.jpg" /></div>
</div>
<!--主体-->
<div>
<!--文章区-->
<div >
<table>
<tr>
<td>
<h2> 慕课快讯 基层风采 媒体聚焦 慕课视屏 </h2>
<ul font-size="5">
<li>慕课平台扩容涵盖多个领域</li>
<li>李克强主持座谈会 葛优刘国梁被请中南海</li>
<li>台军演习“歼灭”解放军 专家：自欺欺人</li>
<li>气象台发布预警？回应：正协商联合发布机制</li>
<li>独家：小米影业解散宣布成立一年后刹车</li>
<li>“哑巴群众”开口说话是稿件有误还是新闻造假</li>
<li> 要职业，看看2017年楼市</li>
<li>王建林与房地产越来越近？</li>
</ul>
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<h2> 慕课快讯 基层风采 媒体聚焦 慕课视屏 </h2>
<ul font-size="5">
<li>慕课平台扩容涵盖多个领域</li>
<li>李克强主持座谈会 葛优刘国梁被请中南海</li>
<li>台军演习“歼灭”解放军 专家：自欺欺人</li>
<li>气象台发布预警？回应：正协商联合发布机制</li>
<li>独家：小米影业解散宣布成立一年后刹车</li>
<li>“哑巴群众”开口说话是稿件有误还是新闻造假</li>
<li> 要职业，看看2017年楼市</li>
<li>王建林与房地产越来越近？</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<!--嵌入图片-->
<div><img src="images/weixin.png"</div>
<div>
<p>近期专题</div>
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
</div>
<!--链接区-->
<div>
<table align="center">
<tr bgcolor="#E1F2F9">
<td>文化站点 信息服务 校友会OA系统
教务管理系统 网络教学平台 vpn服务
旧版入口 站群系统 </td>
</tr>
</table>
</div>
<!--结尾-->
<table align="center">
<tr bgcolor="#89A9BD">
<td>©2017imooc.com ALL Rights Reserved|京ICP备1304664号-2</td>
</tr>
</table>
</body>
</html>
1回答
-
同学你好，关于同学的问题解答如下：
1、代码实现的效果与作业相差较大， 有个布局的结构图，同学可以参考下：
2、若同学还是觉得思路不是很清晰，可以参考下面，每个区域具体的思路来实现，当然这只是一种实现的方式，由于代码的灵活性，实现的方式有很多种，若是有其他思路也可以尝试下。
【顶部】
1、 顶部可以分为三列，左右两侧设置宽度相等，在外层tr上设置整体内容居中显示需要使用到align属性，中间内容可以使用span标签进行布局，每个span之间用3个 空格符进行空隙的设置。示例：
【banner区域】
1、 Banner区用colspan=“3”将三列合并，添加图片，图片宽度为100%，高度不用设置，会跟随宽度进行等比例缩放。示例：
【新闻区域与近期专题】
1、 新闻区用colspan=“3”将三列合并，嵌套两个table表格，设置固定宽度，大概为1200px左右，居中显示。示例：
2、 第一个table填充上半部分新闻内容，将一行分为三列显示，新闻内容可以使用p标签和b标签。示例：
3、 第二个table填充近期专题内容，分为两行显示，第一行填充小标题，第二行分为三列，填充图片和文字，可以直接使用img标签和p标签，在tr上设置align属性保证内容都能居中显示。示例：
【友情链接区域】
1、 友情链接区使用colspan属性将三列合并，使用align属性设置内容居中显示，height属性设置这一行的高度，bgcolor属性设置当前行颜色。内容可以和顶部中间导航一样用span标签，间隔用 。示例：
【页脚】
1、 页脚区使用colspan属性将三列合并，使用align属性设置居中显示，height属性设置高度，bgcolor属性设置背景颜色。示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-01-10
相似问题