Question

我想看一下我想要的网站顶部的菜单按钮。

enter image description here

我已经设置了这个，但是我为每个菜单链接（文本）使用div，然后使用margin标签将它们分开。

看起来似乎没问题，但我希望我的代码保持整洁。

有更简单的方法吗？

非常感谢任何建议。

我的HTML

<body>
<div class="mainhome">
    <div class="header">
      <div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
      <div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
      <div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
      <div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
        <div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div> 
      <div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
      <div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
      <div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
      <div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
  </div>

我的CSS

@charset "UTF-8";
/* CSS Document */

body {
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
    margin:0;
    padding:0;
}

.mainhome {
    width: 855px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

.header {
    height: 236px;
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
    clear:left;
}

.mainimage {
    width: 855px;
    height: 423px;
    background-color:#0C9;
    position:absolute;
    top:220px;
    float:left;
    z-index:-1;
}

#slider_container {
        width:855px;
        height:423px;
        overflow:hidden;
}

.bluebar {
    width: 855px;
    height: 16px;
    background-color:#334d5c;
    clear:left;
    float:left;
}

.menubutton-leftside {
    width:60px;
    height:20px;
    float:left;
    margin-top:95px;
}

.menubutton-rightside {
    width:60px;
    height:20px;
    float:left;
    margin-top:95px;
    text-align:right;
}

h2 {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    font-weight:normal;
    color:#666;
    display:inline;
}

.logo {
    width:170px;
    height:170px;
    float:left;
    margin-top:30px;
}

.largemenubutton {
    width:261px;
    height:259px;
    float:left;
    margin-top:20px;
}

.footer {
    width:100%;
    height: 61px;
    background-color:#334d5c;
    clear:left;
}

Answer 1

在menubutton-rightside和menubutton-rightside中，您可以添加font-size: 24px;和font-weight: bold;，然后删除所有<h2></h2>标记。（：

我没有看到你可以改变的更多事情。

Answer 2

.menubutton-leftside和.menubutton-rightside几乎相同 - 应删除重复。为他们使用一个单独的类，如.menubutton。
边距：95px;在每个按钮上设置。我会设置padding-top：95px;在父div。
你覆盖了看起来不太好的h2样式。我会将你的css中的h2样式与来自＃1

Answer 3

任何时候你发现自己必须添加内联样式，现在是时候重新考虑这种方法了。这里有一些标记可以实现您想要的功能，但它更清晰，更易于遵循和维护。这是outcome（当然没有您的徽标）。

<强> HTML：

<div class="mainhome">
    <div class="header">
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">portfolio</a>
        <a href="#">contact</a>
        <img src="images/es-logo.png" class="logo" /> 
        <a href="#">print</a>
        <a href="#">digital</a>
        <a href="#">illustration</a>
        <a href="#">brand</a>
    </div>
</div>

<强> CSS：

body {
    margin:0;
    padding:0;
}

.mainhome {
    width: 850px;
    margin: 0 auto;
}

.header {
    height: 236px;
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
    clear: both;
}

.header a {
    width: 85px;    
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    font-weight:normal;
    color:#666;
    display:block;
    text-decoration: none;
    float: left;
    text-align: center;
    margin-top:95px;
}

.logo {
    width:170px;
    float:left;
    margin-top:30px;
}

/*other styles copied from your css*/
.mainimage {
    width: 855px;
    height: 423px;
    background-color:#0C9;
    position:absolute;
    top:220px;
    float:left;
    z-index:-1;
}

#slider_container {
    width:855px;
    height:423px;
    overflow:hidden;
}

.bluebar {
    width: 855px;
    height: 16px;
    background-color:#334d5c;
}

.largemenubutton {
    width:261px;
    height:259px;
    float:left;
    margin-top:20px;
}

.footer {
    width:100%;
    height: 61px;
    background-color:#334d5c;
    clear:left;
}

所以，这就是我的所作所为：

将设计的固定宽度更改为850px而不是855px。原因是这样，当您减去170px的徽标时，您得到680，可以除以8（链接总数）。 85px也恰好是170的1/2，所以它创造了一个完美平衡的设计。
我删除了所有的div和h2并用锚标签替换它们（最终，我认为你会希望这些是链接，所以你可能只是设置链接的样式而不是拥有所有额外的标记和css）。 / LI>
我删除了图片标记周围的额外div标记，并将该类直接添加到img本身。
然后我将所有锚标记浮动到标题div（.header a）和.logo类中。
然后，只需要设置链接本身的样式。我为字体系列，大小，wieght和颜色添加了你的样式，并添加了text-decoration：none，这样锚标签就不会得到任何下划线。我还在这里添加了您的上边距。为了确保链接间隔相等，我将它们设置为display：block，给它们一个85像素的宽度并向左浮动它们。最后，我将它们设置为文本对齐中心。

为了使其更易于维护，您可以将锚点的宽度更改为10％，将.logo类的宽度更改为20％。这将使您更容易在媒体查询中更改整个设计的宽度，以便在您意识到需要时将自己设计为更具响应性的设计。

（请注意，我删除了不必要的样式，只留下了与您发布的html相关的样式。您要确保将每个元素的宽度调整为现在是850px，而不是适当的855px。更好的是，如果它们在你的主屋包装内，只需100％）。

我想在我的网站上的菜单栏上提供一些建议

3 个答案: