老师帮我看一下代码吧，缩小后会怎么调min-width
来源：2-12 编程练习
郭_先生
2018-12-16 01:02:09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
a{
text-decoration:none;
}
span{
background-color: pink;
}
ul li{
list-style: none;
}
.header{
width: 100%;
height: 100px;
background: #000;
min-width: 1280px;
overflow: hidden;
}
.header .logo{
float: left;
margin: 0 auto;
}
.header ul{
width: 70%;
float: right;
color: #fff;
list-style: none;
min-width:500px;
}
.header ul li{
line-height: 100px;
float: left;
margin-left:120px;
}
.footer{
width: 100%;
height: 100px;
background: #000;
min-width: 1280px;
}
.footer ul{
color: #fff;
list-style: none;
margin-right: 100px;
}
.footer ul li{
line-height: 100px;
float: left;
margin-left:150px;
}
.content{
width:100%;
height:1000px;
background:#add8e6;
min-width: 1280px;
}
.content .left{
width: 65%;
float: left;
}
.content .left_le{
float: left;
min-width: 50%;
}
.content .left_le .left_le_con{
float: left;
padding-top: 100px;
margin-left: 200px;
}
.content .right_ri{
float: left;
min-width: 50%;
}
.content .right_ri .right_ri_con{
float: left;
padding-top: 100px;
margin-left: 200px;
}
.content .left_le .left_le_con p,
.content .left_le .left_le_con li,
.content .right_ri .right_ri_con p,
.content .right_ri .right_ri_con li{
margin-top: 30px;
}
.content .middle{
width: 1%;
height: 1000px;
float: left;
background-color: orange;
z-index: 999;
}
.content .right{
width: 34%;
float: left;
}
.content .right .right_con{
margin: 100px;
margin-left: 70px;
}
.content .right .right_con input{
width: 250px;
height: 40px;
padding-left: 5px;
margin-top: 30px;
}
.content .right .right_con .sub{
background: red;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<ul>
<li><a src="#">课程</a></li>
<li><a src="#">职业路径</a></li>
<li><a src="#">实战</a></li>
<li><a src="#">猿问</a></li>
<li><a src="#">手记</a></li>
</ul>
</div>
<div class="content">
<div class="left">
<div class="left_le">
<div class="left_le_con">
<p>课程推荐</p>
<ul>
<li><span>职业路径</span> html与css实现动态网页</li>
<li><span>职业路径</span> html与css实现动态网页</li>
<li><span>职业路径</span> html与css实现动态网页</li>
<li><span>职业路径</span> html与css实现动态网页</li>
<li><span>职业路径</span> html与css实现动态网页</li>
</ul>
</div>
</div>
<div class="right_ri">
<div class="right_ri_con">
<p>相关推荐</p>
<ul>
<li>html css js</li>
<li>html css js</li>
<li>html css js</li>
</ul>
</div>
</div>
</div>
<div class="middle">
</div>
<div class="right">
<div class="right_con">
<h2>登录</h2>
<form>
<input type="text" name="username" placeholder="请输入登录邮箱/手机号"><br/>
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格">
<input type="submit" name="submit" value="登录" class="sub">
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li><a src="#">网站首页</a></li>
<li><a src="#">企业合作</a></li>
<li><a src="#">人才招聘</a></li>
<li><a src="#">联系我们</a></li>
<li><a src="#">常见问题</a></li>
<li><a src="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
这里建议同学将所有的min-width:1280px设置成min-width:1380px，否则当界面缩小后，左侧的两个文字块的内容会成上下排列状态。min-width就是当页面缩小到你指定的大小时，便不再缩小，而是以滚动条的形式展现。
希望可以帮到你！
0
相似问题