为什么设置min-width没有生效，浏览器还是可以继续拉小，求指导。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
min-width: 800px;
font-family: "pingfangSC-Regular","微软雅黑";
}
.head ul li, .footer ul li{
list-style-type: none;
display:inline;
}
ul li:hover{
cursor: pointer;
color:orange;
}
.logo:hover{
cursor:pointer;}
.head{
width:100%;
height:100px;
color:white;
background-color:black;
text-align: right;
position: fixed;
top:0px;
}
.head img{
position:absolute;
left:0px;
}
.head ul{
position: relative;
right:5%;
line-height: 100px;
}
.head ul li{
margin-right:10px;
}
.mLeft{
width:300px;
height: 100%;
position:fixed;
left:0;
background-color:yellow;
float:left;
margin-top:100px;
margin-bottom: 100px;
}
.mRight div, .mLeft ul li:nth-child(1){
font-size:16px;
font-weight: bold;
}
.mLeft ul li{
display:block;
list-style-type: none;
margin-right:5px;
font-size:14px;
margin-top: 20px;
}
.mLeft span{
background-color:#f08080;
margin-right:5px;
}
.mRight{
width:200px;
height: 100%;
position:fixed;
right:0;
background-color:#add8e6;
float:right;
margin-top:100px;
margin-bottom: 100px;
}
.mMiddle{
width:100%;
height:100%;
min-width: 400px;
position:fixed;
margin-top:100px;
margin-left: 300px;
margin-right: 200px;
margin-bottom: 100px;
background-color:pink;
overflow:auto;
}
.mMiddle img{
width:400px;
height:300px;
left:50%;
margin-left:-450px;
}
.mRight input,.mRight div{
display:block;
margin: 20px 0px 0px 5px;
height:30px;
width:160px
}
#submit{
background-color:red;
color:white;
}
.course,.login,.mMiddle img
{
position: relative;
top:100px;
}
.footer{
width:100%;
height:100px;
color:white;
background-color:black;
text-align: center;
position:fixed;
bottom:0px;
z-index: 1;
}
.footer ul{
line-height: 100px;
}
.footer ul li{
margin-right:20px;
}
</style>
</head>
<body>
<div class="middle">
<div class="mLeft">
<div class="course">
<ul>
<li>课程推荐</li>
<li><span>职业路径</span>HTML与CSS3实现动态网页</li>
<li><span>职业路径</span>零基础入门Android语法与界面</li>
<li><span>职业路径</span>iOS的基础语法与常用控件</li>
<li><span>职业路径</span>PHP入门开发</li>
<li><span>职业路径</span>JAVA入门开发</li>
</ul>
</div>
</div>
<div class="mMiddle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">
</div>
<div class="mRight">
<div class="login">
<div>登录</div>
<input type="text" id ="userId" placeholder="请输入登录邮箱/手机号"/>
<input type="password" id = "passwd" placeholder="请输入密码"/>
<input type= "button" id ="submit" value="登录"></input>
</div>
</div>
<div class="head">
<div class="logo"><img src="http://climg.mukewang.com/590037f600016ce303000100.png"></div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
<ul>
</div>
</body>
</html>
慕妹14792061回答
-
mid_one
min-width:800px并不能直接限制浏览器窗口大小，只能操作你当前文档对象的宽度
随时随地看视频慕课网APP
Html5
CSS3