老师为什么about区怎么包含了所有的呀

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>
<html>
<head>
    <title>作业</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div class="header">
        <div class="null"></div><!--添加空白颜色-->
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="navigate"><!--导航栏-->
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">FACULTY</a></li>
                <li><a href="#">EVEVTS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
 
    <div class="about">
        <div class="about-top">
            <h1>about</h1>
            <hr />
            <p>fdfdfdffdsafadsghfkghfdkghkfdaa</p>
            <p>fdfdfdffdsafgnjkfhgkjhgkadsaa</p>
            <p>fdfdfdffdsafadsaa</p>
        </div>
        <div class="about-middle">
            <div class="about-middle-left">
                <div class="about-middle-left-top"></div>
                <div class="about-middle-left-bottom"></div>
            </div>
            <div class="about-middle-middle">
                <img src="images/bb3.jpg">
            </div>
            <div class="about-middle-right">
                <div class="about-middle-right-top"></div>
                <div class="about-middle-right-bottom"></div>
            </div>
        </div>
        <div class="about-bottom"></div>
    </div>
    <div class="gallery"></div>
    <div class="footer"></div>
</body>
</html>
 
 
*{
    margin: 0px;
    padding: 0px;
}
.header{
    margin:0px auto;
    width: 1700px;
}
.header .null{
    width: 100px;
    height: 48px;
    float: left;
    background-color: #07cbc9;
}
.header .logo{
    float: left;
}
.header .navigate{
    width: 1340px;
    height: 48px;
    float: right;
     
    background-color: #07cbc9;
}
 
.header .navigate ul{
    height: 48px;
    text-align: center;
 
 
}
 
.header .navigate ul li{
     
    margin-top: 0px;
    float: right;
    margin-right: 50px;
    line-height: 47px;
    list-style: none;
     
     
 
 
}
a{
    text-decoration: none;
    color: #ffffff;
     
    display: block;/*只有将 a 设置为块才可以设置高度*/
    background-color: #07cbc9;
}
 
.header .navigate ul li a:hover{
    color: #ffffff;
    width:90px;/*改变宽度大小*/
    height: 48px;
    background-color: #000;/*改变颜色 a的背景颜色 */
}

阳光细雨0 2019-11-17

源自：前端油画商城案例 4-3 项目作业

收起

1回答

好帮手慕小尤 2019-11-17 17:40:34

同学你好，建议为about设置固定宽高、定位与隐藏溢出。代码如下：

祝学习愉快！

收起回答

提问者阳光细雨0 #1

为什么加了overflow：hidden 就不会包含所有的呀

2019-11-17 17:50:28
好帮手慕小尤回复提问者阳光细雨0 #2

同学你好，overflow：hidden可以隐藏溢出部分，也可以清除浮动。header部分设置了浮动导致about的位置从顶部开始。所以需要清除浮动。祝学习愉快！

2019-11-17 17:57:10