2-11编程练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.head{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
top: 0;
min-width: 1100px;
}
.logo{

float: left;
cursor: pointer;
}
.nav-bar{
float: right;
min-width: 750px;
height: 100px;
left: 0;
text-align: center;
line-height: 100px;

}
.navlist{
color: white;
float: left;
width: 150px;
height: 100px;
cursor: pointer;
}
    .container{
     width: 100%;
     height: 750px;
     margin-top: 100px;
     margin-bottom: 100px;

    }
    .left{
     width: 40%;
     height: 100%;
     background: #1a5acd;
     float: left;
    }
    .mid{
     width: 40%;
     height:100%;
     background: #5880f9;
     float: left;
    }
    .right{
     width: 20%;
     height: 100%;
     background: blue;
     float: right;
     border-left: solid red 2px;
text-align: center;
line-height: 750px;

    }
    .right-bar{
     width: 153px;
     height: 390px;
     
     
    }

   .foot{
   float: left;
   width: 100%;
   height: 100px;
   background-color: black;
   position: fixed;
   bottom: 0;
   

   }
   .foot-bar{
   float: left;
   width: 800px;
   height: 100px;
   position: absolute;
   left: 50%;
   margin-left: -400px;
   
   }
   .footlist{
   float: left;
   width: 160px;
   height: 100px;
   text-align: center;
   line-height: 100px;
   color: white;
   cursor: pointer;

   }
</style>
</head>
<body>
<div class="head">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>
<div class="nav-bar">
<div class="navlist">课程</div>
<div class="navlist">职业路径</div>
<div class="navlist">实战</div>
<div class="navlist">猿问</div>
<div class="navlist">手记</div>
</div>
</div>
<div class="container">
<div class="left">页面左侧</div>
<div class="mid">页面右侧</div>
<div class="right">
<div class="right-bar">
<h2>登录</h2>
<p><input type="text" name="username" placeholder="请输入登录账户"></p>
<p><input type="password" name="password" placeholder="输入密码"></p>
<p><input type="submit" name="submit" value="登录"></p>
</div>
</div>
</div>
<div class="foot">
<div class="foot-bar">
<div class="footlist">网站首页</div>
<div class="footlist">企业合作</div>
<div class="footlist">人才招聘</div>
<div class="footlist">联系我们</div>
<div class="footlist">常见问题</div>
<div class="footlist">友情链接</div>
</div>
</div>
</body>
</html>

在.right里，添加border-left，.right就会不知道挤到哪去了。

然后怎么才能让.right-bar居中啊。我写居中也是不知道跳到哪去了。

莨菽菽 2017-06-01

源自：CSS网页布局基础 2-13 混合布局

收起

2回答

小于飞飞回答被采纳获得+3积分 2017-06-02 10:40:26

第一个问题：

一、根据课程学习，使用 left、mid、right 的宽度使用固定的宽度，来设置。或者如使用% ，边框使用 div 来代替，设置其宽度为1%。方法不唯一，可以多实践。

二、这种方法进阶课程才会讲解知识，现在可以作为了解和扩充。

注意边框（border），我们不能用百分比去设置border边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给border的空间也会是一个变化的值，也就是说当页面宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！

解决方案：

设置CSS的box-sizing属性值为“border-box”（可以网上查阅相关知识），这样就会把borders和padding全都包含在定义的宽高里面。即给 .right 添加box-sizing: border-box; 样式。

第二个问题：

根据上次建议，“把.right-bar 整个去掉，同时将 .right 中的 line-height: 750px; 去掉。”就可以居中了。

希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳。

收起回答

莨菽菽提问者 #1

非常感谢！

2017-06-02 15:14:17

小于飞飞 2017-06-01 10:12:42

你好，关于问题解决如下：

right 没显示，因为被挤到下一行了（left、mid、right 的宽度已经 100% , 又给right 添加加了 border ,所以宽度超出100%，被挤到下面），修改建议，调整相应块宽度，给border 留出相应的宽度。
把.right-bar 去掉，因为限定了登录的宽度太小，所以居中不起作用，同时同时将 .right 中的 line-height: 750px; 去掉。

希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳。

收起回答

提问者莨菽菽 #1

left、mid、right 的宽度已经 100%留出1%后，如果想让border完全填充留出的1%要怎么写呢？因为其他的都是百分比设置，不知道留出的1%具体的大小 2.把right-bar去掉之后怎么让登陆水平垂直居中呢？

2017-06-01 11:14:21
小于飞飞回复提问者莨菽菽 #2

已回答，祝学习愉快。

2017-06-02 10:41:03