请老师帮忙检查，谢谢！
来源：2-12 编程练习
ChildMu
2020-01-03 22:24:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buju</title>
<style type="text/css">
*{margin:0;
padding:0;
text-decoration: none;
list-style: none;
}
.top{width:100%;
height:100px;
background-color: black;
position: fixed;
overflow: hidden;
zoom:1;}
.logo{float: left;}
.bar1{float:right;}
.bar1 ul li{display:inline-block;
color: white;
list-style: none;
font-size: 20px;
margin-right: 100px;
line-height: 100px;}
a:link{color: white;}
.banner{width: 100%;
padding-top: 100px 0;}
.footer{width: 100%;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;
text-align: center;}
.bar2 ul li{display:inline-block;
color: white;
font-size: 20px;
line-height: 100px;
margin: 0 50px;}
.content{width: 100%;
height: 1200px;
background-color: #add8e6;
margin:0 auto;
padding-top: 100px;
overflow: hidden;
zoom:1;}
/*.contain{width: 70%;
height: 1200px;
margin: 0 auto;}*/
.left{/*width:50%;*/
width: 25%;
padding-left: 15%;
height: 1200px;
font-family: 微软雅黑;
float: left;
margin-top: 50px;}
.middle{width: 20%;
height: 1200px;
font-family: 微软雅黑;
float: left;
margin-top: 50px;}
span{background-color: pink;}
p,input{margin-top: 15px;}
.right{width: 30%;
padding-left: 10%;
height: 1200px;
float: right;
border:5px solid orange;
border-top: none;
border-right: none;
border-bottom: none;
margin-right: -5px;
margin-top: 50px;}
.button{background-color: red;}
</style>
</head>
<body>
<div class="top">
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a></div>
<div class="bar1">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<div class="content">
<!--<div class="contain">-->
<div class="left">
<h1>课程推荐</h1>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> IOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="middle">
<h1>相关课程</h1>
<p>HTML CSS JavaScript</p>
<p>HTML3 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="right">
<h1>登录</h1>
<form>
<input style="width: 300px;height: 50px" type="text" name="text" placeholder="请输入登录邮箱/手机号"/><br/>
<input style="width: 300px;height: 50px" type="password" name="password" maxlength="16" placeholder="6~16位密码，区分大小写，不能用空格"/><br/>
<input style="width: 300px;height: 50px" type="submit" name="submit" value="登录" class="button" />
</form>
</div>
<!--</div>-->
</div>
<div class="footer">
<div class="bar2">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>写回答
1回答
-
同学你好，问题与修改如下：
1.行内元素有默认的间隙，并且a不会被图片撑开。
解决方式是把行内元素转换为块元素。如下：
2.分割线没有贯穿整个父容器，这是因为代码中给元素设置了间距。
解决方式是把margin改为padding，padding也计算在元素的实际宽度中，这样元素距离父容器顶部的间距为0。如下：
注释的去掉
3.表单的样式写在了标签内，不便于代码的维护和阅读。
改为内部样式：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-01-04
相似问题