0

我正在为客户建立一个网站，我无法解决的最后一个问题是菜单问题。我相信这可能对其他人有帮助。

菜单div里面有三个 s （父级是 a div）。这是代码，有点缩短：

<div id="header">
    <div id="logo"><img src='logo.png' /></div>
    <div id='languageSELECT'>LANGUAGE SELECT</div>
    <div id="Menu">
        <ul id="menu_noya">
            <li class="head_item">
                <a href="index.php?page=Women">{$language["MenuWomen"]}</a>
                <ul>
                    <li><span style='color:#352618;font-family:tahoma;font-size:11px;font-weight:bold;'>{$language["InMenuWomen"]}</span></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women1.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women2.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women3.jpeg' style='height:170px;width:120px;' /></a></li>
                    <li><a href='index.php?page=Women'><img src='/styles/Images/women4.jpeg' style='height:170px;width:120px;' /></a></li>
                </ul>
            </li>
            <li class="head_item">
                { like this 5 more times } ...
            </li>
        </ul>
    </div>
</div>

CSS：

#LanguageSelect
{
    float:right;
    width:150px;
    margin-top:65px;
    padding-right:10px;
}

#menu_noya, #menu_noya ul {
    list-style: none;
    z-index:1;
}

#menu_noya, #menu_noya * { 
    padding: 0; margin: 0;
}

#menu_noya li.head_item {
    float:left;
    width:142px;
    margin-left: -1px;
    text-align:center;
}

#menu_noya li.head_item a {
    display: block;
    color:#62E1E3;
    text-align:center;
    font-weight:lighter;
}

li.head_item ul { 
    position:absolute;
    display: none;
}

li.head_item:hover ul {
    margin-right:50px; 
    position:absolute;
    display: block; 
    width:150px;
    background-color:#ececec;
    border-right:8px solid #352618;
}

#header {
    background-color:#352618;
    height: 100px;
    width:100%;
    text-align: center;
    position: relative;
}

#logo
{
    float:left;
    width:250px;
    height:80px;
    margin-top:12px;
    margin-left:15px;
}

#Menu {
    font-size:16px;
    margin: 0 auto;
    padding-top:65px;
    display:inline-block;
}

问题是：

  • 在分辨率较小的小型笔记本电脑（13 英寸或 11 英寸）上，中间菜单会从页眉中移出div，因此它不在页眉中，而是在其下方。在 iPad 和 iPhone 上也是如此。

  • 在某些 PC 和笔记本电脑上，菜单不在页面中间，因为logo和languageSELECT元素需要具有相同的宽度。菜单位于徽标和语言选择之间，但不在页面中间。

我尝试进行@media查询，但它非常“通用”并且适用于某些设备但不适用于其他设备。这适用于特定设备，我可以做到，但其他设备呢？

我在这里想要做的主要事情是让菜单达到它给定宽度的 100%。假设我的分辨率是 1024px；如果我有 250px 的徽标和 150px 的语言选择，那么还剩下 624px。我希望菜单能够 100% 传播 624 像素。

一个额外的小问题：较小的文字在我的网站上看起来非常模糊，就像它没有抗锯齿一样。有没有一种看起来像 Times New Roman 的好字体适用于小字体？

4

0 回答 0