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

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


<!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: 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 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="80px">

<br/>

<br/>

<br/>

<input type="text" placeholder="your phone" name="phone" class="border" size="80px">

<br/><br/><br/>

<input type="text" placeholder="your Email" name="Email" class="border" size="80px">

<br/><br/><br/>

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

</textarea>

<br/><br/><br/>

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

</form>

</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 2018-11-18
源自：项目：网页布局案例   2-10 作业题
0
收起

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

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

2回答
Miss路 2018-11-19 15:58:35

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

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

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

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


0
收起回答
Miss路 2018-11-19 11:39:07

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

http://img1.sycdn.imooc.com//climg/5bf21e460001282210450439.jpg

要细心一点哦。

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

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

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

http://img1.sycdn.imooc.com//climg/5bf221ed0001274206890067.jpg

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

http://img1.sycdn.imooc.com//climg/5bf2230c0001873809960444.jpg

http://img1.sycdn.imooc.com//climg/5bf228a20001f87c09450607.jpg

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

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

<!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>

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

0
收起回答
  • 提问者 慕用0863198 #1
    非常感谢老师的回答，这里的表单宽高我在大尺寸屏幕上看的是正好，放在笔记本上看是偏大，有什么好的解决办法嘛？而绝对定位的地方，我特意设置了以页面为父元素，margin高度为header的高度，这样设置是否不好？关于logo，是因为我这里看了没有居中后才设置了padding-top，我去掉之后反而没有居中，是不是要设置vertical-align和display：inline的属性？
    2018-11-19 14:50:51
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

about图片部分用的浮动，为啥清除不了。下面gallery部分总是跑到最前面
0 3 6
about的下部分.about-down没有清除浮动，为什么gallery部分没有上移？
0 0 3
about区域的定位在不同显示器下差距很大
43 0 3
你好，about区上部分的居中我总是做不好
0 0 4
gallery区怎么设置了没用
0 0 3

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

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

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

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

在线咨询

领取优惠

免费试听

领取大纲

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