CSS样式-在导航栏均分四块

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        #header,
        #nav,
        #content-main,
        #content-2,
        #content-3,
        #content-4,
        #content-5,
        #content-6,
        #footer {
            width: 960px;
            background-color: #eee;
            border: 1px dashed #ccc;
            margin: 0 auto;

 

            height: 500px;
            margin-bottom: 5px;
        }

 

        #header,
        #header>.inner {
            height: 120px;
            border-width: 0;
        }
        
        #header {
            width: 100%;
        }

 

        #header>.inner {
            width: 960px;
            margin: 0 auto;
        }

 

        #nav {
            height: 80px;
        }

 

        #nav li {
            list-style: none;
            width: 232px;
　　　/*高度不能继承*/
            height: 80px;
            float: left;
            margin-right: 10px;
        }

　　/*这里的nth-child表示第几个li*/

        #nav li:nth-child(1) {
            background-color: #f00;
        }

 

        #nav li:nth-child(2) {
            background-color: #0f0;
            margin-right: 11px;
        }

 

        #nav li:nth-child(3) {
            background-color: #00f;
        }

 

        #nav li:nth-child(4) {
　　　 /*最后一个右浮动*/
            float: right;
            background-color: #0ff;
　　　/*最后一个不需要设置margin-right*/
            margin-right: 0;
        }

 

        /* 块的宽度，margin的宽度：
            1.求块的宽度：（总宽度 - margin的宽度 * （n-1））/ n 向下取整
            n * 块宽度 + （n - 1）* margin的宽度 < 总宽度： 有一个差
            2.求出差
            3.最后一个块设置成float right
                有一个问题，就是最后一个块和倒数第二个块之间的margin = margin + 差，且这个差小于n
            4.调整一部分块的margin-right + 1    
         */

 

        #content-main>.left,
        #content-main>.right {
            height: 500px;
            /* #f00;
            border: 1px solid #000; */
            float: left;
        }

 

        #content-main>.left {
            width: 318px;
        }

 

        #content-main>.right {
            width: 628px;
            float: right;
        }

 

        #footer,
        #footer>.inner {
            height: 100px;
            border-width: 0;
        }

 

        #footer {
            width: 100%;
            margin-bottom: 0;
        }

 

        #footer>.inner {
            width: 960px;
            margin: 0 auto;
        }

 

    </style>
</head>
<body>
    <div id="header">
        <div class="inner">header-inner</div>
    </div>
    <div id="nav">
　　
　　<!-- 通过li均分4块 -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div id="content-main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div id="content-2">content-2</div>
    <div id="content-3">content-3</div>
    <div id="content-4">content-4</div>
    <div id="content-5">content-5</div>
    <div id="content-6">content-6</div>
    <div id="footer">
        <div class="inner">footer-inner</div>
    </div>
</body>
</html>

 

posted @ 2021-02-28 17:15  #Friday  阅读(766)  评论(0)    收藏  举报