老师请问一下怎么设置中间和最右边之间的那条橘红色的分割线，还有我底部导航和内容之间的空隙怎么去掉？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nav</title>
<style type="text/css">
*{padding:0;margin:0;}
.head{width:100%;
height:100px;
background-color:black;
text-align:center;
position:fixed;
}
.logo{float:left;}
.xiang{color:white;}
.daohang{list-style-type:none;
line-height: 100px;
font-size:1.5em;
cursor:pointer;
}
.daohang li{float:right;margin:0 60px;}
.img1{width: 100%;
height: auto;
top: 100px;
}
.img2{width: 100%;
height: auto;
bottom: 100px;}
.foot{
width: 100%;
height: 100px;
background-color: black;
color: white;
position: fixed;
bottom: 0;
}
.bottom{
font-size: 1.5em;
line-height: 100px;
list-style-type: none;
margin:0 500px;
text-align: center;
cursor:pointer;
clear: both;
}
.bottom li{
color:white;
float:left;
line-height:100px;
margin-left: 50px;
list-style: none;}
.body{
background-color:rgb(176,216,229);
width:100%;
height: 1000px;
font-size:1.5em;
}
.body .left{
float: left;
width: 35%;
height: 1000px;
margin-top:200px;
margin-left:5%;
}
.left ul{list-style-type: none;line-height: 50px;}
.left ul p{font-size: 2em;font-weight: bold;}
.left ul li span{background-color: pink;margin-right:20px;}
.body .middle{
float: left;
width: 25%;
height: 1000px;
margin-top: 200px;
margin-left:5%;
}
.middle ul{list-style-type: none;line-height: 50px;}
.middle ul p{font-size: 2em;font-weight: bold;}
.body .right{
width: 25%;
height: 1000px;
float:right;
border-left-width: 5px;
border-left-color: orange;
}
.right p{
font-size: 2em;
margin-top: 200px;
margin-right:5%;
}
input {
width: 250px;
height: 40px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="head">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<div class="xiang">
<ul class="daohang">
<li>手记</li>
<li>猿问</li>
<li>实战</li>
<li>事业路径</li>
<li>课程</li>
</ul>
</div>
</div>
<div class="body">
<div class="left">
<ul>
<p>课程推荐</p>
<li><span>职业路径</span> html5与css3实现动态网页</li>
<li><span>职业路径</span> 零基础入门安卓语法与界面</li>
<li><span>职业路径</span> ios基础语法与常用控件</li>
<li><span>职业路径</span> php入门开发</li>
<li><span>职业路径</span> java入门开发</li>
</ul>
</div>
<div class="middle">
<ul>
<p>相关课程</p>
<li>html css js</li>
<li>html5 css3 jq</li>
<li>移动端基础 移动端开发</li>
</ul>
</div>
<div class="right">
<p>登录</p>
<input type="text" name="account" placeholder="请输入登录邮箱/手机号"><br>
<input type="password" name="password" placeholder="6-16位密码,区分大小写,不能用空格"><br>
<input type="submit" name="submit" value="登录" style="background-color: red;color: #fff;">
</div>
</div>
<div class="foot">
<ul class="bottom">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答
橙色的分割线可以使用边框实现。中间部分和底部的空白间隙可以使用将中间部分的高度适当调小一些，可参考如下
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星