个人中心
gpt4 book ai didi

html - 如何使标签式导航流畅

转载 作者：太空宇宙 更新时间：2023-11-04 13:34:10 24 4
gpt4 key购买 nike

我的页面顶部有一个导航:

enter image description here

在大尺寸桌面屏幕上效果很好。当我尝试在平板电脑(8 英寸或 10 英寸)中查看它时，菜单会向右切掉，例如:

enter image description here

这是我的菜单代码:

<div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
    <div id="second-menu-navi" class="navi">
        <a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
        <a title="" href="physicians.aspx" id="tab-2">Physicians</a>
        <a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
        <a title="" href="locations.aspx" id="tab-4">Locations</a>
        <a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
        <a title="" href="radiology.aspx" id="tab-6">Radiology</a>
        <a title="" href="lab.aspx" id="tab-7">Lab</a>
    </div>
</div>

#second-menu-navi {
    float: none !important;
    height: 20px !important;
    margin: 0 auto;
    /*margin: 0px 0px 0px 8px;*/
    width: 1106px;
    z-index: 24;
}

#second-menu-navi a {
    float: left;
    width: 155px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    font-family: 'aleobold', 'soniano_sans_unicoderegular';
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
    background: rgb(20, 94, 153);
    background: rgba(20, 94, 153, .85); /*#013761; /*url('theImages/nav_menu_85_b.png') repeat; /*#013761;*/
    margin: 0 3px 0 0 !important;
    /*background-image: none !important;*/
    padding: 0 !important;

    -moz-border-radius-bottomleft: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -khtml-border-bottom-left-radius: 4px; 
    border-bottom-left-radius: 4px;

    -moz-border-radius-bottomright: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -khtml-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px;

    outline: none;
}

/*
#second-menu-navi a:hover, #second-menu-navi a.active {
    background-color:#155E9B;
}
*/

#tab-1:active, #tab-1:hover {
    background-color: #1AA5C1;
}
#tab-2:active, #tab-2:hover {
    background-color: #83ADB7;
}
#tab-3:active, #tab-3:hover {
    background-color: #7A0506;
}
#tab-4:active, #tab-4:hover {
    background-color: #CD71AE;
}
#tab-5:active, #tab-5:hover {
    background-color: #E39259;
}
#tab-6:active, #tab-6:hover {
    background-color: #422F5E;
}
#tab-7:active, #tab-7:hover {
    background-color: #4E68BF;
}
#break-line-2 {
    width: 100%;
    height: 7px;
    border-top: 1px solid #34A25B;
    background-color: #013761;
    position: fixed;
    top: 62px;
    z-index: 23;
}

我怎样才能让它流畅并根据屏幕宽度调整大小？

最佳答案

请看演示:http://jsbin.com/folix/2

对于平板电脑，你可以使用特殊css的媒体查询。

有关媒体查询的更多详细信息，请参阅标准设备的媒体查询: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #second-menu-navi {
        width: 1106px;
      margin:0 auto;
        z-index: 24;
        text-align:center;
    }
    #second-menu-navi a {
        display: inline-block;
        padding:12px 30px;
        vertical-align: middle;
        font-family:'aleobold', 'soniano_sans_unicoderegular';
        font-size: 16px;
        font-weight: normal;
        color: #ffffff;
        text-decoration: none;
        background: rgb(20, 94, 153);
        background: rgba(20, 94, 153, .85);
        margin: 0 3px 5px 0 !important;
        border-radius:0 0 4px 4px;
        outline: none;
    }
    #tab-1:active, #tab-1:hover {
        background-color: #1AA5C1;
    }
    #tab-2:active, #tab-2:hover {
        background-color: #83ADB7;
    }
    #tab-3:active, #tab-3:hover {
        background-color: #7A0506;
    }
    #tab-4:active, #tab-4:hover {
        background-color: #CD71AE;
    }
    #tab-5:active, #tab-5:hover {
        background-color: #E39259;
    }
    #tab-6:active, #tab-6:hover {
        background-color: #422F5E;
    }
    #tab-7:active, #tab-7:hover {
        background-color: #4E68BF;
    }
    #break-line-2 {
        width: 100%;
        height: 7px;
        border-top: 1px solid #34A25B;
        background-color: #013761;
        position: fixed;
        top: 62px;
        z-index: 23;
    }
    @media only screen and (max-width:1024px) {
        #second-menu-navi {
            width:100%;
        }
    }
    </style>
</head>

<body>

    <div id="menuHolder" style="position: fixed; z-index: 22; top: 69px; padding: 0; margin: 0; width: 100%; text-align: center; height: 40px;">
        <div id="second-menu-navi" class="navi">
            <a title="" href="why_choose_us.aspx" id="tab-1">Why Choose Us</a>
            <a title="" href="physicians.aspx" id="tab-2">Physicians</a>
            <a title="" href="medical_specialties.aspx" id="tab-3">Medical Specialties</a>
            <a title="" href="locations.aspx" id="tab-4">Locations</a>
            <a title="" href="urgent_care.aspx" id="tab-5">Urgent Care</a>
            <a title="" href="radiology.aspx" id="tab-6">Radiology</a>
            <a title="" href="lab.aspx" id="tab-7">Lab</a>
        </div>
    </div>


</body>

</html>

关于html - 如何使标签式导航流畅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23162284/

24 4 0
文章推荐： javascript慢慢降低音频元素的音量
文章推荐： java - 如何在 Javadoc 中包含 Google Analytics 片段？
文章推荐： java - 在一个 JSP 中访问另一个 JSP 中设置的 Bean
文章推荐： php - 如何用php检测当前页面？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com