2-11编程练习

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!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