我想对我网站上的菜单栏提出一些建议[关闭]答案

【问题标题】：I would like some advice on my menu bar on my site [closed]我想对我网站上的菜单栏提出一些建议[关闭]
【发布时间】：2023-04-01 00:30:01
【问题描述】：

我希望网站顶部的菜单按钮看起来很简单。

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

看起来还不错，但我想让我的代码保持整洁。

有没有更简单的方法来做到这一点？

非常感谢您的任何建议。

我的 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;
}

【问题讨论】：

标签： html css menu margin

【解决方案1】：

每当您发现自己必须添加内联样式时，就该重新考虑该方法了。这里有一些标记可以完成你想要的，但它更干净，更容易遵循和维护。这是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;
}

所以，这就是我所做的：

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

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

（请注意，我删除了不必要的样式，只留下了与您发布的 html 无关的样式。您现在需要确保将每个元素的宽度调整为 850px在适当的情况下为 855 像素。更好的是，如果它们在您的 mainhome 包装器中，只需将它们设为 100%。

【讨论】：

【解决方案2】：

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

我没有看到更多可以更改的内容。

【讨论】：

感谢您的建议。只是一个想法 - 将 h 标签用于 SEO 目的没有帮助吗？
我很确定这只适用于H1标签..@user3714234

【解决方案3】：

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

【讨论】：