老师当页面缩小后整个布局就乱了，应该怎么解决呢
来源：3-3 编程练习
慕九州8126026
2020-03-25 17:37:05
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局练习</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul li{
list-style: none;
}
a{
text-decoration:none;
}
/*********** header开始 **********/
.header{
width: 100%;
height: 100px;
background: #000;
overflow: hidden;
position: fixed;
top: 0;
z-index: 9999;/*提高header的层级才不会被覆盖掉*/
}
.logo{
float: left;
}
.nav{
float: right;
line-height: 100px;
}
.nav li{
float: left;
padding-right:40px;
}
.nav li a{
color: #fff;
}
.nav li a:hover{
color: #FFA500;
}
/*********** header结束 **********/
/************ main开始 ***********/
.main{
padding:0 300px 0 350px;
overflow: hidden;
margin-bottom: 120px;
margin-top: 100px;
}
.middle,.left,.right{
float: left;
position: relative;
height: 800px;
}
.middle{
width: 100%;
min-width: 500px;
background:#FFC0CB;
text-align: center;
}
.middle img{
position: absolute;
top: 0;
bottom:0;
left: 0;
right:0;
margin:auto auto;/*使用定位将上下左右设为0实现居中效果*/
}
.left{
width:350px;
background:#7B68EE;
margin-left: -100%;
left: -350px;
}
.left .left-item{
padding: 250px 0 0 40px;
line-height: 3em;
}
.left .left-item .span{
background: #FF6347;
margin-right: 10px;
}
.right{
width: 300px;
background:#FFA500;
margin-left: -300px;
right: -300px;
/*left: 200px;*/
}
.right .right-item{
padding: 250px 0 0 15px;
line-height: 3em;
}
.right .right-item input{
display: block;
width: 250px;
padding: 10px;/*居中显示盒子的实际宽度要加上内填充*/
border:none;
margin-top: 20px;
}
.right .right-item button{
width: 270px;
padding: 10px;
margin-top: 20px;
font-size: 18px;
color: #fff;
background: #FF6347;
border:none;
}
/************ main结束 ***********/
/************ footer开始 ***********/
.footer{
height: 120px;
width: 100%;
background: #000;
text-align: center;
line-height: 120px;
position: fixed;
bottom: 0;
}
.footer a{
color: #fff;
font-size: 20px;
padding: 0 20px;
}
/************ footer结束 ***********/
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/590037f600016ce303000100.png">
</div>
<ul class="nav">
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="left">
<div class="left-item">
<h2>课程推荐</h2>
<p>
<span class="span">职业路径</span>
<span>HTML5与CSS3实现动态网页</span>
</p>
<p>
<span class="span">职业路径</span>
<span>零基础入门Android语法与界面</span>
</p>
<p>
<span class="span">职业路径</span>
<span>IOS基础语法与常用控件</span>
</p>
<p><span class="span">职业路径</span>
<span>PHP入门开发</span>
</p>
<p><span class="span">职业路径</span>
<span>JAVA入门开发</span>
</p>
</div>
</div>
<div class="right">
<div class="right-item">
<h2>登录</h2>
<input type="text" name="" placeholder="请输入登录邮箱/手机号">
<input type="text" name="" placeholder="6-16位密码，区分大小写，不能用空格">
<button>登录</button>
</div>
</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、logo盒子超出父容器
这是因为图片为行内元素，有文字特性，默认存在间隙。可以将图片设置为块元素
2、页面缩小布局混乱，这是因为内容宽度大于了视口宽度，可以给body元素设置最小宽度
目前可以先不考虑页面缩小的问题，能够在100%页面下正常显示就好。在第三阶段中会学习响应式布局，页面小的情况下可能会改变布局方式，不用担心混乱问题。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1
相似问题