2-11练习麻烦老师帮我批改下
来源：2-12 编程练习
Ranbo2016
2018-01-18 22:04:43
还有一个疑问，就是关于中间部分那条橙色的分界线，我本来想用boder来实现，但是左右两部分就不好用百分比来设置宽度，所以只能用一个div宽度来代替那条线，请问老师有没有其它解决办法呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-11</title>
<style>
html,body{
margin: 0;
padding: 0;
list-style-type: none;
}
.header{
min-width: 900px;
width:100%;
height: 100px;
background: #333;
}
.logo{
width: 300px;
height: 100px;
background: url('http://climg.mukewang.com/59093e9c00016ce303000100.png') no-repeat;
margin: 0 10px;
float: left;
}
.nav{
float: right;
height: 100px;
margin: 0 10px;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
color:#FFF;
}
.nav ul li{
float: left;
line-height: 100px;
margin: 0 30px;
}
.content{
float: left;
width: 69%;
height: 1000px;
background: #99CCCC;
}
.left{
float: left;
width: 50%;
}
.right{
float: left;
width: 50%;
}
.con-l,.con-r{
margin-top: 100px;
margin-left:30%;
}
.con-l ul,.con-r ul{
color: black;
}
.con-l ul span{
margin-right: 10px;
font-size: 14px;
display: block;
background-color: #CC3366;
float: left;
}
.con-r{
word-spacing: 5px;
}
.footer{
position: fixed;
bottom: 0;
height: 100px;
min-width: 900px;
width: 100%;
background: #333;
}
.footer ul{
height: 100px;
width: 628px;
margin: 0 auto;
}
.footer ul li{
float: left;
height: 100px;
line-height: 100px;
margin: 0 20px;
}
.line{
float: left;
width: 1%;
height: 1000px;
background-color: #f96;
}
.content-r{
float: left;
width: 30%;
height: 1000px;
background: #99CCCC;
}
.login{
margin-top:100px;
margin-left: 20%;
}
.login input{
display: block;
margin-top: 20px;
height: 25px;
width: 220px;
}
.bton{
margin-top: 20px;
height: 35px;
width: 225px;
background: #CC0000;
line-height: 35px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<!--头部(logo 和导航)-->
<div class="header">
<div class="logo"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<!--中间内容部分-->
<div class="middle">
<div class="content">
<div class="left">
<div class="con-l">
<h3>课程推荐</h3>
<ul>
<span>实战路径</span><li>HTML5与CSS3实现动态网页</li>
<span>实战路径</span><li>零基础入门Android语法与界面</li>
<span>实战路径</span><li>iOS基础语法与常用控件</li>
<span>实战路径</span><li>PHP入门开发</li>
<span>实战路径</span><li>JAVA入门开发</li>
</ul>
</div>
</div>
<div class="right">
<div class="con-r">
<h3>课程推荐</h3>
<ul>
<li>HTML CSS Javascript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 APP开发</li>
</ul>
</div>
</div>
</div>
<div class="line"></div>
<div class="content-r">
<div class="login">
<h3>登陆</h3>
<input type="text" placeholder="请输入登陆邮箱/手机号" class="usr" />
<input type="text" placeholder="6-16位密码，区分大小写，不能有空格" class="pass" />
<div class="bton">提交</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>创业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>写回答
2回答
-
童鞋，我测试了你的代码，border边框是可以实现的，你只要把在最右侧的盒子中添加box-sizing: border-box;边框所占的宽度就会往右侧盒子里面的撑，不会浮动下去，可以自己试一下，但是建议一下三列布局方式：
可以自己试一下哦，一起加油啊，O(∩_∩)O~~
0 -
好帮手慕糖
2018-01-19
你好，可使用box-sizing：border-box；为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。可动手测试下哦。
祝学习愉快~
1
相似问题