0

我正在为我的网站创建一个菜单栏，我想知道我这样做是否正确。

有没有更好的方法来达到相同的结果？使用 3 个 div 似乎太过分了。

这是我目前的处理方式：

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#topbar {
    background: #487BC0;
    width: 100%;
}

#container {
    width: 960px;
    margin: 0 auto;
}

#links {
    padding: 15px 0 15px 840px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 30px;
}

#content {
    position: relative;
    background: #f6f6f6;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}

</style>

</head>
<body>

<div id="topbar">
    <div id="container">
        <div id="links">Login | Register</div>
    </div>
</div>

<div id="content">Content goes here</div>

</body>
</html>
4

3 回答 3

0

我不是大师，但也许这样的事情会奏效？

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#container {
background: #487BC0;
width: 100%
min-width: 960px;
margin: 0 auto;
}

#container > span {
display: block;
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}

#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}

</style>

</head>
<body>

<div id="container">
    <span>Login | Register</span>
</div>

<div id="content">Content goes here</div>

</body>
</html>

再说一次，我不是 Guru Oo

于 2013-05-29T05:08:30.073 回答
0

我剥这只猫的方法。在我看来，宽度很常见，所以只设置一次。

HTML

<div class="container">
   <div class="topBar">Login | Register</div>
   <div class="content">content</div>
</div>

CSS

.container
{
    width:960px;
    margin: 0 Auto;

}

.topBar
{
    background-color:#487BC0;
    text-align:right;
    margin-bottom:30px;
    padding: 15px 15px 15px 15px;
    color: #fff;
    font-size: 14px;
}

.topBar div
{
    padding: 15px 0 15px 840px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 30px;
}

.content
{

    background-color:#f6f6f6;
}

示例：http: //jsfiddle.net/V9DGp/

于 2013-05-29T05:10:56.427 回答
0

如果您不希望蓝色背景拉伸，请删除#topbar，否则我认为没关系..

同一个问题有很多解决方案

于 2013-05-29T04:51:13.957 回答