• 所有问题

    • HTML5怎么做导航栏

    请注意以下几点
    一：只能用HTML5 + CSS
    二：要保证在不同页面跳转的时候导航栏始终不变。

    举报该问题
    推荐答案   推荐于2016-02-28
    建议使用FF，Safari，举个例子：
    <!doctype html>
    <html>
    <head>
    <title>HTML5+CSS3+JavaScript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <style type="text/css">
    body {
    behavior: url(ie-css3.htc);
    }
    * {margin:0 auto;padding:0;}
    body {font-size:13px;font-family:Arial;}
    ul li {list-style:none;}

    #menu {
    width:982px;
    height:35px;
    margin-top:20px;display:block;

    background: #e3e3e3;
    background: -moz-linear-gradient(top, #ccc, #999);
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

    -moz-box-shadow: 1px 1px 3px #333;
    -webkit-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;

    -webkit-border-top-left-radius:4px;;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-bottom-left-radius:4px;
    -webkit-border-bottom-right-radius:4px;
    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -o-border-radius:4px;
    -khtml-border-radius:4px;
    text-shadow: 0 1px 0 white;
    }
    #menu ul {
    margin-left:0;
    }
    #menu ul li {
    display:inline;
    }
    #menu ul li a:link, a:visited {
    text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
    }
    #menu ul li a:hover {
    text-decoration:none;
    background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
    background: -moz-linear-gradient(top, #333, #ccc);
    -webkit-background-size:0 35px;
    color: #ddd;
    text-shadow: 0 1px 0 black;

    }
    .text {
    border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
    -webkit-border-top-left-radius:90px;;
    -webkit-border-top-right-radius:90px;
    -moz-border-radius-topleft:90px;
    -moz-border-radius-topright:90px;
    -webkit-border-bottom-left-radius:90px;
    -webkit-border-bottom-right-radius:90px;
    -moz-border-radius-bottomleft:90px;
    -moz-border-radius-bottomright:90px;
    -o-border-radius:90px;
    -khtml-border-radius:90px;
    }
    </style>
    <script language="JavaScript" type="text/javascript">
    (function()
    {
    if(!0)
    return;
    var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
    while(i<length)
    {
    document.createElement_x(e[i++])
    }
    })();
    </script>
    </head>
    <body>
    <menu id="menu"><form action="index.php" method="get">
    <ul>
    <li><a href="#" title="HomePage">HomePage</a></li>
    <li><a href="#" title="Introuduce">Introuduce</a></li>
    <li><a href="#" title="Products">Products</a></li>
    <li><a href="#" title="My album">My album</a></li>
    <li><a href="#" title="Shopping">Shopping</a></li>
    <li><a href="#" title="Contact our">Contact our</a></li>
    </ul>
    <input type="search" class="text" value="search..." /></form>
    </menu>
    <body>
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2015-08-22
    使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单

    此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。

    HTML

    示例中有一个导航菜单的html结构，元素<nav>用来定位导航菜单，.current表示当前活动的导航项。

    复制代码
    代码如下:

    <ul>
    <li
    class="current"><a href="#">首页</a></li>
    <li><a
    href="#">客户服务</a></li>
    <li><a
    href="#">产品展示</a></li>
    <li><a
    href="#">经典案例</a></li>
    <li><a
    href="#">联系我们</a></li>
    </ul>

    CSS

    首先我们要给菜单nav相对定位，我们在.nav li中使用display:
    inline-block代替float:left，这样一来我们可以使用text-align
    来对nav菜单进行左中右对齐设置。

    复制代码
    代码如下:

    .nav {
    position: relative;
    margin:
    20px 0;
    }
    .nav ul {
    margin: 0;
    padding: 0;
    }
    .nav li {

    margin: 0 5px 10px 0;
    padding: 0;
    list-style: none;
    display:
    inline-block;
    }
    .nav a {
    padding: 3px 12px;
    text-decoration:
    none;
    color: #999;
    line-height: 100%;
    }
    .nav a:hover {

    color: #d0d0d0;
    }
    .nav .current a {
    background: #999;
    color:
    #fff;
    border-radius: 5px;
    }
    使用text-align对菜单进行右对齐和居中对齐。

    /*
    right nav */
    .nav.right ul {
    text-align: right;
    }

    /* center
    nav */
    .nav.center ul {
    text-align: center;
    }

    接下来我们来做响应式设计，我们使用CSS3的media
    query来实现。当浏览器窗口宽度小于600px时，我们把<nav>设置成relative相对定位，把<ul>设置成absolute绝对定位，并且display:none隐藏所有li元素，这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时，菜单下拉展开，设置所有li的样式display:
    block，具体请看代码：

    复制代码
    代码如下:

    @media screen and (max-width: 600px) {

    .nav {
    position: relative;
    min-height: 40px;
    }
    .nav ul {

    width: 180px;
    padding: 5px 0;
    position: absolute;
    top: 0;

    left: 0;
    border: solid 1px #aaa;
    background: #fff
    url(images/menu.png) no-repeat 10px 11px;
    border-radius: 5px;

    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .nav li {
    display: none;
    /* hide all items */
    margin: 0;
    }
    .nav .current {
    display:
    block; /* show only currentitem */
    }
    .nav a {
    display: block;

    padding: 5px 5px 5px 32px;
    text-align: left;
    }
    .nav .current a {

    background: none;
    color: #666;
    }

    /* on nav hover */
    .nav
    ul:hover {
    background-image: none;
    }
    .nav ul:hover li {
    display:
    block;
    margin: 0 0 5px;
    }
    .nav ul:hover .current {
    background:
    url(images/check.png) no-repeat 10px 7px;
    }

    /* right nav */

    .nav.right ul {
    left: auto;
    right: 0;
    }

    /* center nav */

    .nav.center ul {
    left: 50%;
    margin-left: -90px;
    }
    }
    第2个回答  2012-11-02
    很简单，html写结构，css控制样式。css单独保存，写出的导航代码单独保存为一个文件，导航文件引用css文件，在加载其他页面时引用写好的导航文件。追问

    可以写一个简单的例子不，麻烦了[email protected]谢谢哈~~~~

    追答

    标签就可以做到引用了，很简单的。网上搜搜html引用吧

    本回答被提问者采纳
    相似回答
    html5怎么设置横向导航css怎么设置横向导航答：如何设置html导航栏？1。用Dreamweaver创建一个新的HTML文件；2.先按ctrls保存，以防突然断电，数据丢失；3.将title修改为htmlcss，实现横向导航；4.创建一个新的divid“A”并添加ulli标签；5.在li中添加所需的文本，并调整文本间距。按F12预览，如下图所示:6.首先去掉字体前面的小黑点。代码如下:7...
    在html5页面中充当导航,经常会使用哪个结构化的标签?答：在HTML5页面中，经常使用<nav>标签来充当导航的结构化标签。<nav>标签用于定义页面的导航部分，通常包含导航链接或导航菜单。它提供了一种语义化的方式来标记页面的导航内容，使得搜索引擎和辅助技术能够更好地理解和处理导航部分的内容。示例代码：htmlCopy code<nav> <ul> <li><a href="#">首页</...
    怎么用css做网页左边的导航怎么用css做网页左边的导航框答：首先打开SublimeText软件，新建一个html页面，在html页面中准备好html结构，如下图所示。接下来，我们在html的body结构中添加导航栏的内容，如下图所示。然后需要在style标签中用CSS定义导航条的样式，如下图所示。写样式的时候一定要注意写在样式标签里。最后，运行html页面，您将看到如下图所示的导航栏。
    大家正在搜
    html5怎么做导航栏网站的导航栏怎么做网页导航栏怎么做二级导航栏怎么做导航栏下拉菜单怎么做web导航栏怎么做html怎么做导航栏导航栏怎么设置csshtml做导航栏
    相关问题
    HTML5如何才能让导航栏固定顶部不动，且！且！且！不遮挡住...
    HTML5如何制作特效导航栏？
    html5 css怎么写导航栏
    如何实现HTML5中导航栏3d旋转？
    如何使用HTML5+CSS制作通明导航条？ 就是这种的。
    CSS3+Html5做一个导航栏的效果，如图
    如何用html5按照图的样式做出一个网页导航条，实现相应选择...
    求大神用HTML5和CSS做出这个导航条，求源代码，急求大神...