bananer挡住了about和gallery，试过清除浮动和about设margin top

<br>

<!DOCTYPE html>

<html>

<head>

<title>CSS布局</title>

margin: 0;

padding:0;

font-family:"Microsoft YaHei UI";

}

.header,.footer{background-color: #07cbc9;

width: 100%;height:80px;

line-height: 80px;color: #ffffff;

}

.footer{text-align: center;position: absolute;

bottom: 0;}

.logo{float: left;padding-top: 15px;}

.nav{float:right;padding-right: 100px;}

.nav ul li{ float: left;list-style: none;

padding-right: 20px;

}

.banner{width: 100%; overflow: hidden;

height: 635px;}

.banner .tu{width: 100%;height:635px;position: absolute;

top: 80px;

}

.banner img{width: 100%;height: 635px;}

.banner .toplayer{background-color: #000;width: 100%;

height:635px;

opacity:0.5;position: absolute;

top: 80px;

}

.banner .form{text-align: center;

height: 400px;width:800px;

position: absolute;

z-index: 2;top:50%;

left:50%;margin-top: -300px;

margin-left: -400px;

}

.banner .form .border{

background-color: transparent;

border: solid 1px white;height: 30px;

padding: 10px;

}

.banner .form .textarea{ background-color: transparent;

border: solid 1px white;color:#808080;

padding: 10px;padding: 10px;}

button{color:#808080;}

.clear{clear: both;}

.about{text-align: center;}

.about .tou{background-color: blue;

width:700px;margin-top: 715px;

}

</style>

</head>

<body>

</div>

<ul>

<li>ABOUT</li>

<li>FACULTY</li>

<li>GALLERY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

</div>

</div>

<form>

<br/>

<textarea class="textarea" cols="80px" rows="6" placeholder="Write Your Comment Here" >Write Your Comment Here

</textarea>

<button name="send" type="submit" value="message" class="border">SEND MESSAGEE</button>

</form>

</div>

ABOUT

</div>

asdasdawdasdsad

asdadsadsad

</div>

asdasdads

</div>

</div>

</body>

</html>

慕用0863198 2018-11-18

源自：项目：网页布局案例 2-10 作业题

收起

2回答

Miss路 2018-11-19 15:58:35

同学，你好，针对你的疑问：

1、如果你特意以页面为相对点的话，假如头部的宽度变化了，这个时候你还要改动top的值，假如你以banner为相对点，那就不需要考虑这个点了。

2、logo这块我看着确实是没有问题，不需要填充，你是不是把页面的进行放大了，目前按照你设置的尺寸是不需要填充的，也不需要设置什么居中的属性正好。

如果帮助到了你，欢迎采纳！

收起回答

Miss路 2018-11-19 11:39:07

对了一下你的html结构，发现banner区最外层的div少了一个div的结束标签，猜测你应该是要加在这里，你加上再试试看：

要细心一点哦。

除此之外，老师看了一下你上面做好的header部分和banner部分，还有一些地方有问题，可能你还没有完全写完，我先在这里先跟你说一下，你做一下参考：

1、header部分最左边的logo图片不居中，有点下挤的感觉，看到你写了一个padding-top: 15px;，把这个填充去掉就可以了。

2、底部需要设置固定定位，也就是position：fixed不是position：absolute。

3、banner区域的表单设置的宽高太大了，适当的减小一些，另外，表单的定位也不对，想要绝对定位，就要有相对点，这里他的相对点就是他的父元素，也就是banner的最外层标签，因此，需要给最外层的banner所在的div设置position：relative，如果不设置，默认的就是相对浏览器定位，设置之后，banner中内容就不需要再给top数据了，或者top改为0，定位的数据算的也有问题，是top：50%之后，要回本身高度的一半：

4、你下面的显示不出来，是因为使用了定位，定位之后就会有遮盖的现象，解决这个问题，可以用填充。

上面是把你代码中的主要问题说了一下，细节性的没有说，但是把你的代码给改了一下，详细的问题，还需要你详细的对照一下代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CSS布局</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei UI";
    }
 
    .header,
    .footer {
        background-color: #07cbc9;
        width: 100%;
        height: 80px;
        line-height: 80px;
        color: #ffffff;
    }
 
    .footer {
        text-align: center;
        position: fixed;
        bottom: 0;
    }
 
    .logo {
        float: left;
        /*padding-top:15px;*/
    }
 
    .nav {
        float: right;
        padding-right: 100px;
    }
 
    .nav ul li {
        float: left;
        list-style: none;
        padding-right: 20px;
    }
 
    .banner {
        width: 100%;
        /*overflow:hidden;*/
        height: 600px;
        position: relative;
        font-size: 12px;
    }
 
    .banner .tu {
        width: 100%;
        height: 600px;
        position: absolute;
        /*top:80px;*/
    }
 
    .banner img {
        width: 100%;
        height: 600px;
    }
 
    .banner .toplayer {
        background-color: #000;
        width: 100%;
        height: 600px;
        opacity: 0.5;
        position: absolute;
        /*top:80px;*/
    }
 
    .banner .form {
        text-align: center;
        height: 300px;
        width: 500px;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -250px;
    }
 
    .banner .form .border {
        background-color: transparent;
        border: solid 1px white;
        height: 25px;
    }
 
    .banner .form .textarea {
        background-color: transparent;
        border: solid 1px white;
        color: #808080;
    }
    .button {
        background-color: transparent;
        border: solid 1px white;
        color: #808080;
        color: #fff;
        width: 150px;
        height: 40px;
        text-align: center;
    }
 
    .clear {
        clear: both;
    }
 
    .about {
        text-align: center;
    }
 
    .about .tou {
        background-color: blue;
        width: 700px;
        /*margin-top: 715px;*/
    }
    .gallery{
        color:black;
        font-size: 30px;
    }
    </style>
</head>
 
<body>
    <div class="header">
        <div class="logo">
            <img src="images/logo.png">
        </div>
            <div class="nav">
                <ul>
                    <li>HOME</li>
                    <li>ABOUT</li>
                    <li>FACULTY</li>
                    <li>GALLERY</li>
                    <li>EVENTS</li>
                    <li>CONTACT</li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <div class="tu">
                <img src="images/banner3.jpg">
 
        </div>
                <div class="toplayer">
                </div>
                <div class="form">
                    <form>
                        <input type="text" placeholder="your name" name="name" class="border" size="60px">
                        <br />
                        <br />
                        <input type="text" placeholder="your phone" name="phone" class="border" size="60px">
                        <br /><br />
                        <input type="text" placeholder="your Email" name="Email" class="border" size="60px">
                        <br /><br />
                        <textarea class="textarea" cols="60px" rows="6" placeholder="Write Your Comment Here">Write Your Comment Here
                        </textarea>
                        <br /><br />
                        <button name="send" type="submit" value="message" class="button">SEND MESSAGEE</button>
                    </form>
                </div>
            </div>
            <!-- <div class="clear"></div> -->
            <div class="about">
                <div class="tou">
                    ABOUT
                </div>
                <div class="a1"></div>
                asdasdawdasdsad
                <div class="a2"></div>
                asdadsadsad
            </div>
            <div class="gallery">
                asdasdads
            </div> -->
            <div class="footer">
                &copy;2016&nbsp;imooc.com&nbsp;京ICP备13046642
            </div>
</body>
 
</html>

如果帮助到了你，欢迎采纳！

收起回答

提问者慕用0863198 #1

非常感谢老师的回答，这里的表单宽高我在大尺寸屏幕上看的是正好，放在笔记本上看是偏大，有什么好的解决办法嘛？而绝对定位的地方，我特意设置了以页面为父元素，margin高度为header的高度，这样设置是否不好？关于logo，是因为我这里看了没有居中后才设置了padding-top，我去掉之后反而没有居中，是不是要设置vertical-align和display：inline的属性？

2018-11-19 14:50:51