请问红线应该怎么加?

请问红线应该怎么加?

<!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>

http://img1.sycdn.imooc.com//climg/5a0d9e1d0001e70113660594.jpg

正在回答 回答被采纳积分+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>

如果解决了您的问题请采纳,祝学习愉快!

guly 2017-11-17 10:44:52

你好红线代码如下:

<div class="line"></div>
<style>
.line{float:left;height:840px;border:5px solid #EE9572;}
</style>

如果解决您的问题请采纳,祝学习愉快!

  • 提问者 Michelleqyh #1
    你好,请问这些代码加载哪个位置?这种方法我试了,还是会跑到第二行上去
    2017-11-17 11:09:35
提问者 Michelleqyh 2017-11-16 23:00:51

http://img1.sycdn.imooc.com//climg/5a0da80a0001f62010801920.jpg

而且为什么用手机打开成这样了呀?

提问者 Michelleqyh 2017-11-16 22:25:28

求具体的加红线的代码。试了很多方法,总是跑到第二行上去了

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4930    个

想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师