请问红线应该怎么加？

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

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

Michelleqyh 2017-11-16

源自：CSS入门 5-2 编程练习

收起

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

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

收起回答

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

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

收起回答

相似问题

为什么红线消失了

eclipse报红线问题

Usermanager应该return什么

老师为什么我运行后画不出红线

为什么最后面的数字3是蓝色的，不应该是红色吗？

登录后可查看更多问答，登录/注册

PHP小白零基础入门

参与学习人
提交作业 626 份
解答问题 4928 个

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

了解课程

本课精华内容

问答作业

max最大值,min最小值，请老师检查

18 1

不太理解，全局变量是什么意思？？

3 1

建表时默认值是中文时会报错

3 1

什么是API

8 1

单引号和双双引号

5 1

查看更多本课问答

请稍等 ...