请问代码是否正确
来源：2-12 编程练习
mogu54mogu
2019-05-11 11:41:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
text-decoration: none;
}
.header{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
top: 0;
}
.nav{
float: left;
line-height: 100px;
}
.bar{
float: right;
line-height: 100px;
}
.bar span{
color: white;
font-size: 25px;
margin-right: 50px;
}
.container{
width: 100%;
height: 1000px;
margin-top: 100px;
margin-bottom: 100px;
background-color: #FF9966;
}
.left{
width: 27%;
height: 900px;
background-color: #99CCFF;
float: left;
padding-top: 100px;
padding-left: 5%;
line-height: 3em;
}
.left span{
background-color: #FF9999;
margin-right: 1em;
}
.middle{
width: 27%;
height: 900px;
background-color: #99CCFF;
float: left;
padding-top: 100px;
padding-left: 5%;
line-height: 3em;
}
.middle span{
padding-right: 50px;
}
.right{
width: 30.5%;
height: 900px;
background-color: #99CCFF;
float: right;
padding-top: 100px;
padding-left: 5%;
line-height: 3em;
}
.right input{
width: 300px;
height: 50px;
margin-top: 20px;
border: none;
line-height: 50px;
}
.special{
color: white;
background-color: red;
font-size: 20px;
}
.footer{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;
text-align: center;
line-height: 100px;
}
.footer span{
color: white;
font-size: 20px;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
</div>
<div class="bar">
<a href="#"><span>课程</span></a>
<a href="#"><span>职业路径</span></a>
<a href="#"><span>实战</span></a>
<a href="#"><span>猿问</span></a>
<a href="#"><span>手记</span></a>
</div>
</div>
<div class="container">
<div class="left">
<h1>课程推荐</h1>
<p><span>职业路径</span>职业路径具体内容职业路径具体内容</p>
<p><span>职业路径</span>职业路径具体内容职业路径具体内容</p>
<p><span>职业路径</span>职业路径具体内容职业路径具体内容</p>
<p><span>职业路径</span>职业路径具体内容职业路径具体内容</p>
<p><span>职业路径</span>职业路径具体内容职业路径具体内容</p>
</div>
<div class="middle">
<h1>相关课程</h1>
<p><span>课程名称</span><span>课程名称</span><span>课程名称</span></p>
<p><span>课程名称</span><span>课程名称</span><span>课程名称</span></p>
<p><span>课程名称</span><span>课程名称</span><span>课程名称</span></p>
</div>
<div class="right">
<h1>登录</h1>
<form>
<input type="text" name="usrnamne" placeholder=" 请输入登录邮箱/手机号"><br>
<input type="password" name="password" placeholder=" 6~16位密码，区分大小写，不能用空格"><br>
<input type="button" name="login" value="登录" class="special">
</form>
</div>
</div>
<div class="footer">
<a href="#"><span>网站首页</span></a>
<a href="#"><span>企业合作</span></a>
<a href="#"><span>人才招聘</span></a>
<a href="#"><span>联系我们</span></a>
<a href="#"><span>常见问题</span></a>
<a href="#"><span>友情链接</span></a>
</div>
</body>
</html>页面中间的橙色分割条，为什么不能通过设置右侧块的边框实现？
写回答
1回答
-
好帮手慕星星
2019-05-11
你好，代码整体布局实现效果是不错的。
1、边框是可以实现的哦，边框设置的单位是px，百分比单位不生效，如下：
外层大盒子改变颜色：
只设置左边框：
2、底部导航是没有居中显示的：
每个导航项设置的是右侧间距，这样最后一个导航项就多出来了间隙，可以修改为左右两侧的间距，如下：
可以重新测试下，祝学习愉快！
0
