footer上面的效果为何与原图不同?

新手上路,请多包涵

原图
完成后的图
代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山东大学练习</title>
        <style type="text/css">
            /* 顶部 */
            #top{
                width: 100%;
                height: 40px;
                background-color: #444444;
            }
            /* 导航链接区 */
            #nav{
                width: 100%;
                height: 110px;
                background-color: #9b0d14;
            }
            #nav1{
                width: 1300px;
                margin:0 auto;
                position:relative;
            }
            ul,li{
                list-style:none;
                padding:0;
                margin:0;
                border:0;
                }
            #logo{
                width:264px;
                height:82px;
                position:absolute;
                top:16px;
                left:50%;
                margin-left:-132px;
            }
            .navList li{
                width:100px;
                height:100%;
                float: left;
                font-size:18px;
                text-align: center;
                color: white;
                line-height: 110px;
            }
            .navList li:hover{
                background-color:#a7181f;
                cursor:pointer;
            }
            .navList5{
                margin-right:300px;
            }
            /* 轮播图 */
            #chart{
                width: 80%;
                height: 300px;
                border: 1px solid black;
                background-color: beige;
                margin:auto;
            }
            /* 新闻 */
            #new{
                width:80%;
                height: 300px;
                border: 1px solid black;
                background-color: darkgrey;
                margin:auto;
            }
            #new1{
                width:65%;
                height: 300px;
                background-color: red;
                float: left;
            }
            #new2{
                width:35%;
                height: 300px;
                background-color: blue;
                float: left;
            }
            /* 山大视点 */
            #sd{
                width:100%;
                height: 500px;
                background:url(img/qiebg.jpg) ;
            }
            /* 3快内容 */
            #box{
                width: 80%;
                height: 400px;
                border: 1px solid black;
                background-color: grey;
                margin:auto;
            }
            .box1{
                width: 33.16%;
                height: 100%;
                border: 1px solid red;
                background-color: seagreen;
                margin:auto;
                float: left;
            }
            /* 专题 */
            #special{
                width: 80%;
                height: 150px;
                border: 1px solid red;
                background-color: grey;
                margin:auto;
            }
            /* 链接 */
            #link{
                width: 100%;
                height:100px;
                background-color:#9b0d14;
            }
            .linkBox{
                width: 1200px;
                height: 96px;
                margin: 0px auto;
            }
            .pic{
                float:left;
                width:113px;
                height:96px;
                background: url(img/link.png);
                background-position: center;
                background-repeat:no-repeat;
                margin-right:20px;
            }
            .linkBox ul li{
                height:96px;
                float: left;
                color: white;
                line-height: 96px;
                padding:0 14px;
            }
            .linkBox ul li a{
                color:white;
                text-decoration:none;
            }
            /* foot */
            #foot{
                width:100%;
                height:250px;
                background:url(img/footbg.jpg);
            }
            /* 版权 */
            #copyright{
                width:100%;
                height:70px;
                background-color:#242424;
            }
        </style>
    </head>
    <body>
        <!-- 顶部 -->
        <div id="top"></div>
        <!-- 导航链接区 -->
        <div id="nav">
            <!-- <div id="nav1">
                <div id="logo">
                    <a href="" title="山东大学">
                        <img src="img/logo.png" width="263" height="82" />
                    </a>
                </div>
                <div class="navList">
                    <ul>
                        <li>山大概况</li>
                        <li>组织机构</li>
                        <li>教育教学</li>
                        <li>科学研究</li>
                        <li class="navList5">招生就业</li>
                        <li>人才队伍</li>
                        <li>合作交流</li>
                        <li>学科建设</li>
                        <li>校园服务</li>
                        <li>校园文化</li>
                    </ul>
                </div>
                </div>
            </div> -->
        </div>
        <!-- 轮播图 -->
        <div id="chart"></div>
        <!-- 新闻 -->
        <div id="new">
            <div id="new1"></div>
            <div id="new2"></div>
        </div>
        <!-- 山大视点 -->
        <div id="sd"></div>
        <!-- 3快内容 -->
        <div id="box">
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
        </div>
        <!--专题 -->
        <div id="special"></div>
        <!--链接 -->
        <div id="link">
            <!-- <div class="linkBox">
                <span class="pic">
                </span>
                <ul>
                    <li><a href="#">教育部</a></li>
                    <li><a href="#">人民网</a></li>
                    <li><a href="#">新华网</a></li>
                    <li><a href="#">光明网</a></li>
                    <li><a href="#">央视网</a></li>
                    <li><a href="#">中新网</a></li>
                    <li><a href="#">中国教育新闻网</a></li>
                    <li><a href="#">北京大学</a></li>
                    <li><a href="#">清华大学</a></li>
                    <li><a href="#">复旦大学</a></li>
                    <li><a href="#">浙江大学</a></li>
                    <li><a href="#">更多>></a></li>
                </ul>
            </div> -->
        </div>
        <!-- foot -->
        <div id="foot"></div>
        <!-- 版权 -->
        <div id="copyright"></div>
    </body>
</html>
阅读 1.6k
2 个回答

别搞float了;哪有flex香啊。

#box {
        width: 80%;
        height: 400px;
        border: 1px solid black;
        background-color: grey;
        margin: auto;
        display: flex;
      }
.box1 {
        flex: 1;
        height: 100%;
        border: 1px solid red;
        background-color: seagreen;
        margin: auto;
     }

萌新吗?我需不需要讲细一点?

思考方向
1.如果一行三个元素,为什么[.box1]设置的宽度是33.16%而不是33.33%
2.取消[.box1]的border,神奇的发现就排好了
3.border的大小会不会占位
4.float是不是只有在所有对应元素宽度和小于等于父级元素宽度的情况下才能一行放置
5.如果能取消border的默认占位,会不会就解决了问题
6.查一查属性box-sizing

拓展
1.float会不会导致高度塌陷
2.float会不会导致后续紧跟的元素排版异常

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题