CSS菜单栏-是否需要3个div？_Css_Html

CSS菜单栏-是否需要3个div？

css html

CSS菜单栏-是否需要3个div？,css,html,Css,Html,我正在为我的网站创建一个菜单栏，我想知道我是否做得对有没有更好的方法达到同样的效果？使用3个div似乎太过分了以下是我目前的处理方式： <!DOCTYPE html> <html> <head> <style type="text/css"> #topbar { background: #487BC0; width: 100%; } #container { width: 960px; margin: 0 a

我正在为我的网站创建一个菜单栏，我想知道我是否做得对

有没有更好的方法达到同样的效果？使用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>


#顶栏{
背景：#487BC0；
宽度：100%；
}
#容器{
宽度：960px；
保证金：0自动；
}
#链接{
填充：15px 0 15px 840px；
颜色：#fff；
字体大小：14px；
边缘底部：30px；
}
#内容{
位置：相对位置；
背景：#f6f6f6；
宽度：960px；
身高：100%；
保证金：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>


#容器{
背景：#487BC0；
宽度：100%
最小宽度：960像素；
保证金：0自动；
}
#容器>跨度{
显示：块；
填充：15px 0 15px 840px；
颜色：#fff；
字体大小：14px；
边缘底部：30px；
}
#内容{
位置：相对位置；
背景：#f6f6f6；
宽度：960px；
身高：100%；
保证金：0自动；
}
登录|注册
内容在这里

再说一次，我不是大师O.O

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

HTML

示例：

如果你自己写了那篇文章，你应该知道如何缩短/修剪它。

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

.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;
}