2-11问题
来源：2-12 编程练习
Adler_moy
2017-10-14 19:24:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{margin:0;padding:0;font-size:16px;font-family:'微软雅黑';}
.header{
width:100%;
height:100px;
background:black;
margin:0 auto;
line-height:100px;
position:fixed;
top:0;
}
.logo{float:left;}
.nav{float:right;}
.nav a{
text-decoration:none;
color:white;
padding:20px;
}
.container{
width:100%;
height:800px;
background-color:#8ee5ee;
line-height:2.5em;
margin:0 auto;
}
.left{
width:30%;
float:left;
position:relative;
top:25%;
left:15%;
}
.left b{font-size:20px;}
.left span{background:#ff7256;}
.middle{
width:30%;
height:800px;
float:left;
position:relative;
top:25%;
left:15%;
}
.middle b{font-size:20px;}
.border:{
float:left;
width:0.5%;
height:800px;
background:orange;}
.right{
width:39.5%;
float:right;
position:relative;
top:25%;
left:10%;
}
.right input{
width:250px;
height:40px;
display:block;
}
.right b{font-size:20px;}
.button{background:red;color:white;}
.footer{
width:100%;
height:100px;
background:black;
margin:0 auto;
line-height:100px;
position:fixed;
bottom:0;
text-align:center;
}
.footer a{
text-decoration:none;
color:white;
padding:20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"/>
</div>
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="container">
<div class="left">
<b>课程推荐</b><br/>
<span>职业路径</span> HTML5与CSS3实现动态网页<br/>
<span>职业路径</span> 零基础入门Android语法与界面<br/>
<span>职业路径</span> iOS基础语法与常用控件<br/>
<span>职业路径</span> PHP入门开发<br/>
<span>职业路径</span> JAVA入门开发<br/>
</div>
<div class="middle">
<b>相关课程</b><br/>
HTML CSS JavaScript<br/>
HTML5 CSS3 Jquery<br/>
移动端基础 移动端APP开发<br/>
</div>
<div class="border"></div>
<div class="right">
<b>登录</b><br/><br/>
<form>
<input type="text" name="mailphone" placeholder="请输入登录邮箱/手机号" /><br/>
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16"/><br/>
<input type="button" value="登录" class="button"/><br/>
</form>
</div>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
橙色分割线写了代码却没有显示出来？
右边区块旁边有白色的空白是怎么回事？
1回答
-
你好，1、分割线没有显示，如下图，多了一个冒号：
（2）右侧的空白是由于出现水平滚动条，建议：是由于左中右三部分设置了宽度又设置了left，导致总宽度超过100%。
祝学习愉快~
0h017-10-17
相似问题