1

好的，我正在处理这个网站（这是我的第一个网站），我正在寻找一些关于让我的导航菜单更好地工作的见解。当您转到“项目”页面时，突然之间，关于按钮看起来右边的间距太大了。此外，当您转到“联系”页面时，菜单完全一团糟。我想只是将主页按钮添加到主页导航，这样所有菜单都完全相同，也许它会正常工作，但必须有更好的解决方案。

此外，该网站看起来非常平坦。我愿意接受关于给予它一些深度的建议，以及你可能有的任何其他批评。（请记住，我只这样做了几个月）。

网址

HTML：

 <ul class="transparent" id="navcontainer" >        
    <li class="topnavleft floatleft"><a href="index2.html">Home</a></li>                    
    <li class="topnav floatleft"><a href="About.html">About</a></li>                           
    <li class="topnavright floatleft"><a href="Projects.html">Projects</a></li>                    
</ul>

CSS：

#navcontainer {
    margin-top: 0;
    height: 55px;
    width: 232px;
    float: right;
    overflow: visible;
    padding: 0;
}

.topnav {
    width: 45px;
    border-right: 1px solid #FFF;
    margin-right: 10px;
    padding-right: 22px;
    margin-left: 10px;
    margin-top: 16px;
}

.topnavleft {
    width: 45px;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    margin-left: 7px;
    padding-left: 10px;
    padding-right: 6px;
    margin-top: 16px;
}

.topnavright {
    width: 45px;
    border-right: 1px solid #FFF;
    margin-right: 7px;
    padding-right: 20px;
    padding-left: 1px;
    margin-top: 16px;
}
4

2 回答 2

0

间距是因为您将 topnav 宽度指定为 45...'projects' 太大而 'about' 太小..让它自动或尝试将所有文​​本对齐到中间，这样它就不会显得奇怪.. .

于 2012-07-29T22:10:50.047 回答
0

关于页面的这一行有问题：

<div class="transparent" id="logo"><a href="www.ALRGuitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" </a></img>

你错过了标签的关闭/>，img它应该是这样的：

<div class="transparent" id="logo"><a href="http://www.alrguitars.com"><img src="Images/ALR%20%20custom%20guitars2.png" alt="ALR Custom Guitars" width="250" border="0" /></a></img>

对于屏幕阅读器和搜索引擎，徽标应该包含 text ALR Custom Guitars，使用 abackground-image而不是img标签，并设置text-indent: -999px为仅显示图像。

此外，您的许多链接都指向www.ALRGuitars.com，它们应该是http://www.ALRGuitars.com。

编辑：

以下是一些需要更正的错误（请记住更正W3C 验证结果中的所有错误和警告）：

这个：

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" </img><a/>
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

应该：

<a href="http://www.facebook.com/pages/ALR-Guitars/301363959926689" target="_blank"><img src="Images/facebook_512.png" border="0" height="32px" width="32px" />
<a href="http://twitter.com/ALRGuitars" target="_blank"><img src="Images/twitter_512.png" border="0" height="32px" width="32px"</img></a>

在版权声明中，您忘记了字符引用后的分号。

使用&#169;或&copy;。

这个：

<link href'http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

应该：

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow|Open+Sans:600,700italic' rel='stylesheet' type='text/css'/>

之后有一个丢失的=标志href。

编辑＃2：

在摆弄 CSS 之后，试试这个菜单：

#navcontainer {
    float: right;
    width: 250px;
    height: 30px;
    padding: 5px;
    margin-top: 0;
    overflow: visible;
}
.topnav a {
    display: block;
    width: 70px;
    height: 20px;
    padding: 5px;
    text-align: center;
}
a:hover {
    color: #606060;
    font-style: italic;
}

它应该纠正悬停时链接移动的问题。

于 2012-07-29T22:49:02.397 回答