请问红线应该怎么加?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
html,body{margin:0px;}
header{
height:80px;
background-color:black;
font-weight:bolder;
}
header img{
height:80px;
width: 230px;
}
a{
color:white;
text-decoration: none;
}
#container {
height: 500px;
background-color: green;
}
nav {
float: left;
width: 35%;
height: 100%;
font-weight: bolder;
background-color: yellow;
font-family: "Microsoft Yahei";
}
#table1{
width: 80%;
height:20%;
margin: 40px 100px;
}
article {
overflow: hidden;
width:30%;
height: 100%;
background-color: coral;
font-weight: bolder;
font-family: "微软雅黑";
}
#table2{
width: 80%;
height:20%;
margin: 40px 50px;
}
aside {
float: right;
width: 35%;
height: 100%;
background-color:blue;
font-weight: bolder;
font-family: "微软雅黑";
}
#table3{
width: 80%;
height:20%;
margin: 40px 50px;
}
footer{
height:80px;
background-color:black;
font-weight:bolder;
font-family: "微软雅黑";
}
#table4{
width: 50%;
height:20%;
margin: 0px 350px;
}
</style>
</head>
<body>
<header>
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
<table border="0" cellspacing="20" cellpadding="10">
<tr>
<td><a href="#">课程</a></td>
<td><a href="#">职业路径</a></td>
<td><a href="#">实战</a></td>
<td><a href="#">猿问</a></td>
<td><a href="#">手记</a></td>
</tr>
</table>
</header>
<div id="container">
<nav>
<table id="table1" border="0" cellspacing="20" cellpadding="3">
<tr><td colspan="2"><h2>课程推荐</h2></td></tr>
<tr>
<td style="background-color:pink;width:4em;">职业路径</td>
<td>HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>iOS基础语法与常用控件</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>JAVA入门开发</td>
</tr>
</table>
</nav>
<aside>
<table id="table3" border="0" cellspacing="20" cellpadding="0">
<tr id="row"><td><h2>登录</h2></td></tr>
<tr id="row">
<td>
<form name="q5">
<input type="text" placeholder="请输入手机号/登录名" style="height:30px;width:200px;">
</form>
</td>
</tr>
<tr id="row">
<td>
<form name="q5">
<input type="password" placeholder="请输入6-16位密码,区分大小写" maxlength="16" style="height:30px;width:200px;">
</form>
</td>
</tr>
<tr id="row">
<td>
<button type="submit" form="q5" style="height:40px;width:205px;background: red;color: white; font-weight: bolder;border: none;font-size: 20px;">登 录</button>
</td>
</tr>
</table>
</aside>
<article>
<table id="table2" border="0" cellspacing="20" cellpadding="3">
<tr><td><h2>相关课程</h2></td></tr>
<tr><td>HTML CSS JavaScript</td></tr>
<tr><td>HTML5 CSS3 Jquery</td></tr>
<tr><td>移动端基础 移动端APP开发</td></tr>
</table>
</article>
</div>
<footer>
<table id="table4" border="0" cellspacing="20" cellpadding="10">
<tr>
<td><a href="#">网站首页</a></td>
<td><a href="#">企业合作</a></td>
<td><a href="#">人才招聘</a></td>
<td><a href="#">联系我们</a></td>
<td><a href="#">常见问题</a></td>
<td><a href="#">友情链接</a></td>
</tr>
</table>
</footer>
</body>
</html>
33
收起
正在回答 回答被采纳积分+1
4回答
guly
2017-11-17 14:06:09
你好,你应该每个模块放在一个div里面比如:
<div class="container"> <!-- 左侧内容 --> <div class="left"> </div> <!-- 中间内容 --> <div class="middle"> </div> <!-- 分割线 --> <div class="line"></div> <!-- 右侧内容 --> <div class="right"> </div> </div> <!-- 底部内容 --> <div class="footer"> </div>
如果解决了您的问题请采纳,祝学习愉快!
Michelleqyh
2017-11-16 23:00:51

而且为什么用手机打开成这样了呀?
Michelleqyh
2017-11-16 22:25:28
求具体的加红线的代码。试了很多方法,总是跑到第二行上去了
相似问题
登录后可查看更多问答,登录/注册
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星