作业问题，为什么我为body设置了min-width会无效?还有我设置了清除浮动为什么也无效？

作业问题，为什么我为body设置了min-width会无效?还有我设置了清除浮动为什么也无效？

HTML部分：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>A2_9 homework</title>

<link rel="stylesheet" type="text/css" href="A2_8 homework.css">

</head>

<body>

<!--顶部-->

<div class="top">

<div class="logo">

<img src="images/logo.png">

</div>

<div class="nav">

<div class="nav-li"><a href="#">HOME</a></div>

<div class="nav-li"><a href="#">ABOUT</a></div>

<div class="nav-li"><a href="#">GALLERY</a></div>

<div class="nav-li"><a href="#">FACULTY</a></div>

<div class="nav-li"><a href="#">SEVENT</a></div>

<div class="nav-li"><a href="#">CONTACT</a></div>

</div>

</div>



<!--BANNER图-->

<div class="banner">

<div class="picture">

<img src="images/banner3.jpg">

</div>

<div class="opacity"></div>

<div class="sign-up">

<form>

<input type="text" placeholder="your Name" name="name" maxlength="30" >

<input type="text" placeholder="your Place" name="Place" maxlength="30">

<input type="text" placeholder="your Email" name="Email" maxlength="30">

<textarea placeholder="Write Your Comment Here" name="jianjie"></textarea>

<input class="button" type="button" value="SEND MESSAGE" name="SEND">

</form>

</div>

</div>



<!--ABOUT区-->

<div class="about">

<!-- ABOUT区上部分 -->

<div class="about-top">

<h1>ABOUT</h1>

<div class="line"></div>

<p>

I became what I am today at the age of twelve,sfjewiaf afoi <br>

on a frigid overcast day in the winter offioewf jfs <br>

I remember the precise moment afje sjk. 

</p>

</div>


<!-- ABOUT区中间部分 -->

<div class="about-middle">

<!-- ABOUT区中间部分的左边部分 -->

<div class="about-middle-left">

<h2>&nbsp;&nbsp;&nbsp;A WORD<br>

&nbsp;&nbsp;ABOUT US

</h2>

<div class="container">

<p>

One day last summer, eslw.<br>

He asked me to come see him Stand.erft<br>

my friendRahim Khan called from feee.<br>

with the receiver to edw ewwwa af<br>

my ear.<br>

</p>

<button>EXPLOER</button>

</div>

</div>

<!-- ABOUT区中间部分的中间部分 -->

<div class="about-middle-middle">

<img src="images/bb3.jpg">

</div>

<!-- ABOUT区中间部分的右边部分 -->

<div class="about-middle-right">

<div class="container-top">

<div class="container-top-top">70000</div>

<div class="line"></div>

<div class="container-top-bottom">Students</div>

</div>

<div class="container-bottom">

<div class="container-bottom-top">600</div>

<div class="line"></div>

<div class="container-bottom-bottom">Faculty</div>

</div>

</div>

<div class="clear"></div>/*                                   用于清除浮动的区块，但是无效 */

</div>


<!-- ABOUT区下部分 -->

<!-- <div class="about-bottom">


</div> -->

</div>



<!--GALLERY区-->

<div></div>



<!--页脚区-->

<div></div>

</body>

</html>









CSS部分：

*{

margin: 0;

padding: 0;

font-family: "微软雅黑";

}

body{

min-width: 1000px;

}


/*顶部*/

.top{

width: 100%;

height: 70px;

background-color: #07cbc9;

position: fixed;

z-index: 1;

}

.top .logo{

float: left;

margin-left: 50px;

margin-top: 8px;

}

.top .nav{

float: right;

margin-right: 50px;

}

.top .nav .nav-li{

float: left;

height: 70px;

padding: 0 10px;

line-height: 70px;

}

.top .nav .nav-li a{

text-decoration: none;

color: #fff;

}

.top .nav .nav-li:hover{

background: #000;

}



/*banner图*/

.banner .picture img{

width: 100%;

height: 800px;

padding-top: 70px;

}

.banner .opacity{

width: 100%;

height: 800px;

background: #000;

opacity: 0.3;

position: absolute;

left: 0;

top: 70px;

}

.banner .sign-up{

width: 450px;

height: 345px;

text-align: center;

position: absolute;

left: 50%;

margin-left: -225px;

top: 298px;

}

.banner .sign-up form input{

width: 450px;

height: 35px;

font-size: 15px;

color: #fff;

margin: 10px 0;

background: transparent;

border: 1px #a2a1a1 solid;

}

.banner .sign-up form textarea{

margin: 10px 0;

width: 450px;

height: 105px;

color: #fff;

font-size: 15px;

background: transparent;

}

.banner .sign-up form .button{

width: 160px;

height: 40px;

margin-top: 15px;

}


::-webkit-input-placeholder { /* WebKit browsers */ 

color: #fff; 

} 

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 

color: #fff; 

} 

::-moz-placeholder { /* Mozilla Firefox 19+ */ 

color: #fff; 

} 

:-ms-input-placeholder { /* Internet Explorer 10+ */ 

color: #fff; 

} 


.banner .sign-up form input:hover{

border: 1px #07cbc9 solid;

}

.banner .sign-up form textarea:hover{

border: 1px #07cbc9 solid;

}

.banner .sign-up form .button:hover{

background: #07cbc9;

cursor: pointer;

}



/*ABOUT区*/

.about{

width: 100%;

}

/*ABOUT区上部分*/

.about .about-top{

width: 100%;

text-align: center;

}

.about .about-top h1{

padding: 30px 0 10px 0;

}

.about .about-top .line{

width: 35px;

height: 3px;

background: #07cbc9;

margin: 0 auto;

}

.about .about-top p{

padding: 15px 0 30px 0;

}


/*ABOUT区中间部分*/

.about .middle{

width: 100%;

position: relative;

}

/*ABOUT区中间部分的左边部分*/

.about .about-middle .about-middle-left{

width: 350px;

height: 280px;

float: left;

position: absolute;

left: 14%;

z-index: 1;

}

.about .about-middle .about-middle-left .container{

width: 350px;

height: 218px;

margin-top: 7px;

border-top: 2px #a2a1a1 solid;

border-left: 2px #a2a1a1 solid;

background: rgba(255,255,255,0.5);


}

.about .about-middle .about-middle-left .container p{

margin: 15px 0 0 12px;

}

.about .about-middle .about-middle-left .container button{

width: 80px;

height: 40px;

margin: 20px 0 0 12px;

background: #000;

color: #fff;

}

.about .about-middle .about-middle-left .container button:hover{

background: transparent;

cursor: pointer;

border: 1px #000 solid;

color: #000;

}

/*ABOUT区中间部分的中间部分*/

.about .about-middle .about-middle-middle{

width: 500px;

height: 320px;

float: left;

position: absolute;

left: 50%;

margin-left: -250px;

}

.about .about-middle .about-middle-middle img{

width: 500px;

height: 320px;

}

/*ABOUT区中间部分的右边部分*/

.about .about-middle .about-middle-right{

width: 234px;

height: 288px;

background: #fff;

margin-left: 25px;

text-align: center;

float: left;

position: absolute;

right: 12%;

}

.about .about-middle .about-middle-right .line{

width: 30px;

height: 3px;

background: #07cbc9; 

margin: 0 auto;

}

.about .about-middle .about-middle-right .container-top{

width: 232px;

height: 130px;

border:2px #07cbc9 solid;

margin-bottom: 20px;

}

.about .about-middle .about-middle-right .container-top .container-top-top{

width: 100%;

height: 70px;

line-height: 70px;

font-size: 30px;

font-weight: bolder;

}

.about .about-middle .about-middle-right .container-top .container-top-bottom{

width: 100%;

height: 57px;

line-height: 57px;

}

.about .about-middle .about-middle-right .container-bottom{

width: 232px;

height: 130px;

border:2px #07cbc9 solid;

}

.about .about-middle .about-middle-right .container-bottom .container-bottom-top{

width: 100%;

height: 70px;

line-height: 70px;

font-size: 30px;

font-weight: bolder;

}

.about .about-middle .about-middle-right .container-bottom .container-bottom-bottom{

width: 100%;

height: 57px;

line-height: 57px;

}

.about .about-middle .clear{

clear: both;

}
唐小贱 2017-05-25
源自：项目：网页布局案例   1-1 课程介绍
90
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
小于飞飞 2017-05-26 16:20:50

看上面的回答。祝学习愉快。

0
收起回答
  • 提问者 唐小贱 #1
    还有，有时候老师回复不及时啊，我昨天提的问题，现在才有了真正的答复，害我学习停滞了一整天，有点蛋蛋的忧伤！！！
    2017-05-26 16:27:31
  • 提问者 唐小贱 #2
    还有啊，老师，那我设置了绝对定位之后，怎么清除浮动啊？用一个空的div无效啊
    2017-05-26 17:07:06
  • 小于飞飞 回复 提问者 唐小贱 #3
    定位就可以满足需要了，不用浮动了，前面建议这两个一起使用清楚不起作用。根据代码情况，将浮动去掉呦。
    2017-05-26 17:15:26
点开查看后面4条评论
小于飞飞 2017-05-26 16:16:43

要针对代码情况来编写，不同的代码使用相同代码课程不起作用，你编写的代码因为 top 使用了定位，所以 body 最小宽不起作用，需要单独对相应的块进行设置，同时关于 about 区定位错乱，可以不使用浮动，只使用定位就可以。代码有的css 样式引用没成功，注意名称的对应，同时对 top 和 about 区左了简单调整，详看代码，并总结和动手操作，解决实际问题。希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。

    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
    }
    
    body {
        min-width: 1000px;
    }
    /*顶部*/
    
    .top {
        width: 100%;
        height: 70px;
        background-color: #07cbc9;
        position: fixed;
        z-index: 1;
        min-width: 1000px;
    }
 
    .top .logo {
        float: left;
        margin-left: 50px;
        margin-top: 8px;
    }    
    .top .nav {
        float: right;
        margin-right: 50px;
    }
    
    .top .nav .nav-li {
        float: left;
        height: 70px;
        padding: 0 10px;
        line-height: 70px;
    }
    
    .top .nav .nav-li a {
        text-decoration: none;
        color: #fff;
    }
    
    .top .nav .nav-li:hover {
        background: #000;
    }
    /*banner图*/
    
    .banner .picture img {
        width: 100%;
        height: 800px;
        padding-top: 70px;
    }
    
    .banner .opacity {
        width: 100%;
        height: 800px;
        background: #000;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 70px;
    }
    
    .banner .sign-up {
        width: 450px;
        height: 345px;
        text-align: center;
        position: absolute;
        left: 50%;
        margin-left: -225px;
        top: 298px;
    }
    
    .banner .sign-up form input {
        width: 450px;
        height: 35px;
        font-size: 15px;
        color: #fff;
        margin: 10px 0;
        background: transparent;
        border: 1px #a2a1a1 solid;
    }
    
    .banner .sign-up form textarea {
        margin: 10px 0;
        width: 450px;
        height: 105px;
        color: #fff;
        font-size: 15px;
        background: transparent;
    }
    
    .banner .sign-up form .button {
        width: 160px;
        height: 40px;
        margin-top: 15px;
    }
    
    ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #fff;
    }
    
    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #fff;
    }
    
    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #fff;
    }
    
    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #fff;
    }
    
    .banner .sign-up form input:hover {
        border: 1px #07cbc9 solid;
    }
    
    .banner .sign-up form textarea:hover {
        border: 1px #07cbc9 solid;
    }
    
    .banner .sign-up form .button:hover {
        background: #07cbc9;
        cursor: pointer;
    }
    /*ABOUT区*/
    
    .about {
        width: 100%;
        min-width: 1000px;
    }
    /*ABOUT区上部分*/
    
    .about .about-top {
        width: 100%;
        text-align: center;
    }
    
    .about .about-top h1 {
        padding: 30px 0 10px 0;
    }
    
    .about .about-top .line {
        width: 35px;
        height: 3px;
        background: #07cbc9;
        margin: 0 auto;
    }
    
    .about .about-top p {
        padding: 15px 0 30px 0;
    }
    /*ABOUT区中间部分*/
    
    .about .about-middle {
        width:1000px;       
        margin:auto;
        position: relative;
        background-color: blue;
    }
    /*ABOUT区中间部分的左边部分*/
    
    .about .about-middle .about-middle-left {
        width: 350px;
        height: 280px;
        /*float: left;*/
        position: absolute;
        left: 4%;
        z-index: 1;
    }
    
    .about .about-middle .about-middle-left .container {
        width: 350px;
        height: 218px;
        margin-top: 7px;
        border-top: 2px #a2a1a1 solid;
        border-left: 2px #a2a1a1 solid;
        background: rgba(255, 255, 255, 0.5);
    }
    
    .about .about-middle .about-middle-left .container p {
        margin: 15px 0 0 12px;
    }
    
    .about .about-middle .about-middle-left .container button {
        width: 80px;
        height: 40px;
        margin: 20px 0 0 12px;
        background: #000;
        color: #fff;
    }
    
    .about .about-middle .about-middle-left .container button:hover {
        background: transparent;
        cursor: pointer;
        border: 1px #000 solid;
        color: #000;
    }
    /*ABOUT区中间部分的中间部分*/
    
    .about .about-middle .about-middle-middle {
        width: 500px;
        height: 320px;
        /*float: left;*/
        position: absolute;
        left: 50%;
        margin-left: -250px;
    }
    
    .about .about-middle .about-middle-middle img {
        width: 500px;
        height: 320px;
    }
    /*ABOUT区中间部分的右边部分*/
    
    .about .about-middle .about-middle-right {
        width: 234px;
        height: 288px;
        background: #fff;
        margin-left: 25px;
        text-align: center;
        /*float: left;*/
        position: absolute;
        right: -2%;
    }
    
    .about .about-middle .about-middle-right .line {
        width: 30px;
        height: 3px;
        background: #07cbc9;
        margin: 0 auto;
    }
    
    .about .about-middle .about-middle-right .container-top {
        width: 232px;
        height: 130px;
        border: 2px #07cbc9 solid;
        margin-bottom: 20px;
    }
    
    .about .about-middle .about-middle-right .container-top .container-top-top {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
        font-weight: bolder;
    }
    
    .about .about-middle .about-middle-right .container-top .container-top-bottom {
        width: 100%;
        height: 57px;
        line-height: 57px;
    }
    
    .about .about-middle .about-middle-right .container-bottom {
        width: 232px;
        height: 130px;
        border: 2px #07cbc9 solid;
    }
    
    .about .about-middle .about-middle-right .container-bottom .container-bottom-top {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
        font-weight: bolder;
    }
    
    .about .about-middle .about-middle-right .container-bottom .container-bottom-bottom {
        width: 100%;
        height: 57px;
        line-height: 57px;
    }
    
    .about .about-middle .clear {
        clear: both;
    }
    </style>


0
收起回答
小于飞飞 2017-05-26 09:51:50

你好，min-width 设置在具体的区块上呦（如 .top 上），清除不起作用，因为同时设置了postion ，可以去掉 positon 试一试。希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳呦。

0
收起回答
  • 提问者 唐小贱 #1
    可是我对上一节老师写的案例设置了body的min-weiht它是有效的啊！还有如果我去掉了position，那我是清除了浮动，可我怎么定位啊？快点回我啊，我已经想了好久了
    2017-05-26 09:57:12
  • 提问者 唐小贱 #2
    老师，快回我啊！
    2017-05-26 13:32:40
  • 提问者 唐小贱 #3
    我这边好焦急啊，你怎么不理我啊？
    2017-05-26 14:55:21
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么要设置浮动还要取消浮动
0 0 3
何时该清除浮动
17 0 3
设置右浮动，又清除右浮动，不应该回到原位置吗？
10 0 5
3-2为什么cellpadding和cellmargin设置无效，用margin也无效？
2 0 3
浮动问题啊
0 0 12

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师