求指教导航栏页面分辨率问题

<!DOCTYPE html>

<html>

<head>

<title>CssTest</title>

margin: 0;

padding: 0;

font-family: "微软雅黑";

color: #fff;

}

body{

background: #000;

}

.head{

width: 100%;

height: 70px;

background: #07cbc9;

position: fixed;

top: 0;

z-index: 3;

}

.logo{

float: left;

}

.head img{

margin-top: 11px;

margin-left: 110px;

}

ul{list-style: none;}

li{

float: left;

width: 110PX;

height: 70px;

line-height: 70px;

text-align: center;

cursor: pointer;

}

li:hover{background: #000;}

.nav{

float: right;

margin-right: 100px;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

<li>ABOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

</body>

</html>

NikaidouKaho 2017-09-18

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

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2017-09-20 18:18:34

可以在head里面给Logo和导航嵌套一个大盒子，然后设置大盒子的宽度，在设置margin:0 auto;即可，即：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>CssTest</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-family: "微软雅黑";
                color: #fff;
            }
             
            body {
                background: #000;
            }
             
            .head {
                width: 100%;
                height: 70px;
                background: #07cbc9;
                position: fixed;
                top: 0;
                z-index: 3;
            }
            .head-box{
                min-width:1400px;
                margin:0 auto;
            }
            .logo {
                float: left;
            }
             
            .head img {
                margin-top: 11px;
                margin-left: 110px;
            }
             
            ul {
                list-style: none;
            }
             
            li {
                float: left;
                width: 110PX;
                height: 70px;
                line-height: 70px;
                text-align: center;
                cursor: pointer;
            }
             
            li:hover {
                background: #000;
            }
             
            .nav {
                float: right;
                margin-right: 100px;
                font-weight: bold;
            }
        </style>
    </head>
 
    <body>
        <!-- 顶部 -->
        <div class="head">
            <div class="head-box">
                <div class="logo"><img src="images/logo.png" /></div>
                <div class="nav">
                    <ul>
                        <li>HOME</li>
                        <li>ABOUT</li>
                        <li>GALLERY</li>
                        <li>FACULTY</li>
                        <li>EVENTS</li>
                        <li>CONTACT</li>
                    </ul>
                </div>
            </div>
        </div>
 
    </body>
 
</html>