老师麻烦帮我看看代码还有没有需要修改的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-12编程练习</title>
<style type="text/css">
/* 基础样式 */
*{margin:0;padding:0}
li{list-style:none;}
a{
text-decoration: none;
font-size:20px;
color:white;
}
.container{
width:100%;
}
/* 页头 */
.header{
width:100%;
height:110px;
background:black;
}
/* logo */
.logo{
float:left;
}
.logo img{
margin-top:5px;
}
/* nav */
.nav{
float:right;
}
.nav li{
float:left;
margin-right:40px;
margin-top:10px;
}
.nav li a{
display:block;
height:90px;
line-height:90px;
}
/* 清除浮动 */
.clear:after{
content:".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{zoom: 1;}
/* 主体内容 */
.main{
width:100%;
height:600px;
background:lightblue;
overflow:hidden;
zoom: 1;
position:relative;
}
/* left */
.left{
width:35%;
height:600px;
float:left;
position:absolute;
left:100px;
top:50px;
}
/* middle */
.middle{
width:34%;
height:600px;
float:left;
position:absolute;
left:550px;
top:50px;
}
.line{
width:1%;
height:600px;
background:pink;
float:right;
position:absolute;
right:40%;
}
/* right */
.right{
width:30%;
height:600px;
float:right;
position:absolute;
top:50px;
right:80px;
}
span{
background-color:plum;
}
/* input */
input{
width:250px;
height:40px;
}
/* button */
button{
background:red;
width:250px;
height:40px;
}
/* footer */
.footer{
width:100%;
height:100px;
background:black;
text-align:center;
}
.footer li{
display:inline-block;
height:100px;
line-height: 100px;
margin-right:30px;
}
</style>
</head>
<body>
<div class="contaier">
<div class="header clear">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt="慕课网logo"/>
</div>
<ul class="nav">
<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 class="main ">
<div class="left">
<h2>课程推荐</h2><br/>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p><br/>
<p><span>职业路径</span> 零基础入门Android语法与界面</p><br/>
<p><span>职业路径</span> iOS基础语法与常用控件</p><br/>
<p><span>职业路径</span> PHP入门开发</p><br/>
<p><span>职业路径</span> Java入门开发</p>
</div>
<div class="middle">
<h2>相关课程</h2><br/>
<p>HTML CSS JavaScript</p><br/>
<p>HTML5 CSS4 Jquery</p><br/>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="line"></div>
<div class="right">
<h2>登录</h2><br/>
<input type="text" name="username" size="30"
placeholder="请输入登录邮箱/手机号"/><br/><br/>
<input type="password" name="password" size="30" maxlength="16"
placeholder="6-16位密码，区分大小写，不能用空格"/><br/><br/>
<button>登录</button>
</div>
</div>
<div class="footer">
<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>0
收起
正在回答
4回答
你好同学，根据你修改的代码，老师这边使用多个浏览器测试，头部下面没有缝隙，如下：
可能是如下伪类中content设置了一个点的影响，content里面设置的内容会显示，如下去掉设置一个空字符串试一下哦，如果还有问题，你可以详细描述一下具体使用什么浏览器查看的，以便老师准确高效的帮助你解决。
另外，老师上面讲到的是块元素可以去掉换行。input是行内元素，它会和其他元素显示在一行，可能在小屏幕上显示会正常，但是大屏幕上面，父元素宽度有一点大，效果显示如下了：
这一块建议给父元素设置固定宽度，这样一行只能放下一个输入框：
祝学习愉快 ，望采纳。
慕9588112
2019-05-15 14:23:30
修改完后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-12编程练习修改</title>
<style type="text/css">
/* 基础样式 */
*{margin:0;padding:0}
li{list-style:none;}
a{
text-decoration: none;
font-size:20px;
color:white;
}
.container{
width:100%;
}
/* 页头 */
.header{
width:100%;
height:110px;
background:black;
}
/* logo */
.logo{
float:left;
}
.logo img{
margin-top:5px;
}
/* nav */
.nav{
float:right;
}
.nav li{
float:left;
}
.nav li a{
display:block;
line-height:110px;
padding:0 20px;
}
/* 清除浮动 */
.clear:after{
content:".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{zoom: 1;}
/* 主体内容 */
.main{
width:100%;
height:600px;
background:lightblue;
overflow:hidden;
zoom: 1;
position:relative;
}
/* left */
.left{
width:35%;
height:600px;
float:left;
}
/* middle */
.middle{
width:34%;
height:600px;
float:left;
}
/* left和middle的inner */
.inner{
margin-top:100px;
margin-left:100px;
}
.inner p{
line-height:40px;
}
.line{
width:1%;
height:600px;
background:pink;
float:right;
position:absolute;
right:35%;
}
/* right */
.right{
width:30%;
height:600px;
float:right;
}
.inner-r{
margin-top:100px;
margin-left:10px;
}
span{
background-color:plum;
}
/* input */
.inner-r h2{margin-bottom:20px;}
input{
width:250px;
height:40px;
margin-bottom:20px;
}
/* button */
button{
background:red;
width:250px;
height:40px;
}
/* footer */
.footer{
width:100%;
height:100px;
background:black;
text-align:center;
}
.footer li{
display:inline-block;
height:100px;
line-height: 100px;
margin-right:30px;
}
</style>
</head>
<body>
<div class="contaier">
<div class="header clear">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt="慕课网logo"/>
</div>
<ul class="nav">
<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 class="main ">
<div class="left">
<div class="inner">
<h2>课程推荐</h2>
<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>
<div class="middle">
<div class="inner">
<h2>相关课程</h2>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS4 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="line"></div>
<div class="right">
<div class="inner-r">
<h2>登录</h2>
<input type="text" name="username" size="30"
placeholder="请输入登录邮箱/手机号"/>
<input type="password" name="password" size="30" maxlength="16"
placeholder="6-16位密码，区分大小写，不能用空格"/>
<button>登录</button>
</div>
</div>
</div>
<div class="footer">
<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积分~
来为老师/同学的回答评分吧
0 星