我的导航列表跑到了banner图的下方，该怎么弄到浅蓝色的底上去，希望有大佬做一个示范给我看看。。。
来源：3-10 作业题
H2OPP
2019-11-06 08:21:03
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>honework</title>
</head>
<body>
<!--logo-->
<div style="float: left;background-color:#e1f2f9; width:100%"> <!--一定要记住啊-->
<img src="D:/Front end/HTML/homework/Source material/Source materiall/images/logo.png"/>
</div>
<!--表格实现布局-->
<table width="100%" cellspacing="0">
<!--头部内容-->
<tr align="center" bgcolor="#E1f2f9">
<td width="20%"> </td>
<td width="60%">
<span><b>学校概括   </b></span>
<span><b>机构设置   </b></span>
<span><b>教师队伍   </b></span>
<span><b>科学研究   </b></span>
<span><b>招生就业   </b></span>
<span><b>图书馆   </b></span>
<span><b>校长信箱   </b></span>
<span><b>校长导航   </b></span>
</td>
<td width="20%">
<span>快速通道</span>
<select>
<option value="voivo">voivo</option>
</select>
</td>
</tr>
<tr>
<img src="D:/Front end/HTML/homework/Source material/Source materiall/images/banner.jpg"/>
</tr>
<tr>
<table width="100%" >
<tr>
<td>
<b>慕课快讯  基层风采  媒体聚焦  慕课视频>></b>
<p>慕课平台课程扩容 涵盖多个领域 12-30</p>
<p>李克强主持座谈会 葛优刘国强被请进中南海 12-30</p>
<p>台军演习“歼灭”解放军 专家：自欺欺人 12-30</p>
<p>气象局停发雾霾预警？回应：正协商联合发布机制 12-30</p>
<p>独家：小米影业解散宣发部门宣布成立一年后刹车 12-30</p>
<p>要置业看看2017全球楼市掘金路线图 12-30</p>
<p>“哑巴群众”开口说话是稿件有误还是新闻造假？ 12-30</p>
<p>王健林与房地产越来越远？房地产越来越近 12-30</p>
</td>
<td>
<b>慕课快讯  基层风采  媒体聚焦  慕课视频>></b>
<p>慕课平台课程扩容 涵盖多个领域 12-30</p>
<p>李克强主持座谈会 葛优刘国强被请进中南海 12-30</p>
<p>台军演习“歼灭”解放军 专家：自欺欺人 12-30</p>
<p>气象局停发雾霾预警？回应：正协商联合发布机制 12-30</p>
<p>独家：小米影业解散宣发部门宣布成立一年后刹车 12-30</p>
<p>要置业看看2017全球楼市掘金路线图 12-30</p>
<p>“哑巴群众”开口说话是稿件有误还是新闻造假？ 12-30</p>
<p>王健林与房地产越来越远？房地产越来越近 12-30</p>
</td>
</tr>
<tr>
<td colspan="3" >
<table width="100%" >
<tr>
<td colspan="3">近期专题</td>
</tr>
<tr>
<td><img src="D:/Front end/HEML/homework/Source material/images/one.png" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
1回答
-
同学你好，
因为使用div包裹logo图片，div是块级元素默认占据一行显示， 所以logo图片无法与导航项在一行显示，什么是块级元素，目前阶段先了解一下即可，后面会有详细的讲解，
建议： 将图片与导航放在一行，单独一列显示 后面缺少分号，这里以一处为例，其他的地方同学自己记得添加上哦
因为tr下直接嵌套img标签，不符合表格的嵌套规则， 导致浏览器解析异常，所以banner图会跑 到导航上面
建议： 遵循表格的嵌套的规则 table> thead/tbody/tfoor > tr> td/th 只能在td/th下嵌套任意其他标签
由于上面划分为了一行三列，所以banner区需要结合colspan属性合并单元格， 另给图片添加百分百宽度， 让其适应窗口宽度显示
图片的引用方式建议使用相对路径，因为绝对路径只有在你自己本地电脑次可以访问到
同学写完作业后可以提交作业， 批作业的老师会针对你的项目给出详细的修改建议
如果帮助到了你，欢迎采纳！祝学习愉快~~~
0
