导航条怎么写啊？？

我想优艾设计网_PS问答问下，导航条怎么写啊，在线等。。。

---

王斌 2021-05-07 23:30

首先建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，导航共有几个栏目，就为列表添加几个的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：

ul {width:宽度值；优艾设计网_Photoshop论坛height：高度值； list-style:none；}

如果是横向导航，还需为里面的列表项标签设置左浮动的样式，代码为：li {float:left;}

每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html

---

木木 2021-05-07 23:39

这个要看你的布局思路了，如果你一开始就用个宽度为980px的container大DIV容器来容纳整体页面就要把导航的背景定义在body标签中

body{

{background:url(nav_bg.jpg) center 0px no-repeat } 这句里的0px指的是你导航距离页面顶部的距离，如果你导航背景切片是切局部图就要这么写

body{

{background:url(nav_bg.jpg) 0px 0px repeat-x }

如果你做的是自适应屏幕的话，即没优艾设计网_平面设计有大容器包裹的情况，无需设置宽度，默认就是width:100%，也无需浮动

即CSS代码

#nav{

background:url(nav_bg.jpg) 0px 0px repeat-x ;

clear:both}

---

阳苏 2021-05-07 23:44

你之所以出现这个问题，原因在于

li{
    list-style:none;
    margin-top:0px;
    text-align:left;
    float:left;
    width:30px;  /*  这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大  */
    }

我把你的代码重新改了一下，可以稍微好一点。

无标题文档.html 文件代码如下：

  
          /*  这行可以写得这样省略  */
    
      /*  使用外链CSS更好  */
  
  
              /*  标签去掉，这个标签是个淘汰的标签，可以用CSS控制  */
      优艾设计网_设计      
      
        
          首页家用电器手机数码日用百货书籍帮助中心免费开店全球咨询   /*  li的代码全部连起来，可以让li之间没有一个默认的空格  */
        
挖洞的西瓜皮        
                
              
                            
                2021-05-07 23:45

            
            
             优艾设计网_设计圈                                                          就一个DIV 用 jquery 的 动画函数进行 隐藏 增加鼠标事件 在将他显示