打开主菜单

“导航条”的版本间的差异
 
（未显示同一用户的9个中间版本）
第1行： 第1行：
  
 
<ul class="nav">
 
<ul class="nav">
−
     <li><a href="#">首　　页</a></li>
+
     <li>首　　页</li>
−
     <li><a href="#">关于我们</a></li>
+
     <li>关于我们</li>
−
     <li><a href="#">产品展示</a></li>
+
     <li>产品展示</li>
−
     <li><a href="#">售后服务</a></li>
+
     <li>售后服务</li>
−
     <li><a href="#">联系我们</a></li>
+
     <li>联系我们</li>
 
</ul>
 
</ul>
 
————————————————
 
————————————————
−
版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
+
 
−
原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229
+
 
−
*{ margin:0; padding:0; font-size:14px; }  //这里做了一个基本的样式清除，并且设置初始的文字大小为14px;
+
 
−
ul{ list-style:none; width:100px; }  //list-style:none;是为了清除条目前的那个圆点 
+
    <ul>
−
li{ height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;} //padding-left:10px是为了让文字向右移动10个像素，但是li的宽度也会增加10个像素，这里推荐用text-indent:10px;文本缩进10个像素
+
      <li><a href="#" title="首页" target="_blank">首页</a></li>
−
a{text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;
+
      <li><a href="#" title="国内新闻" target="_blank">国内新闻</a></li>
−
a:hover{ background-color:#f60; color:#0000;} //这个是鼠标经过的样式
+
      <li><a href="#" title="国外新闻" target="_blank">国外新闻</a></li>
 +
      <li><a href="#" title="娱乐新闻" target="_blank">娱乐新闻</a></li>
 +
      <li><a href="#" title="时事新闻" target="_blank">时事新闻</a></li>
 +
      <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
 +
    </ul>
 +
 
————————————————
 
————————————————
−
版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
+
 
−
原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229
+
 +
 
 +
<div id="nav">
 +
 
 +
    <ul>
 +
 
 +
        <li>网站首页</li>
 +
 
 +
        <li>公司简介</li>
 +
 
 +
        <li>产品展示</li>
 +
 
 +
        <li>新闻动态</li>
 +
 
 +
        <li>企业文化</li>
 +
 
 +
        <li>招贤纳士</li>
 +
 
 +
        <li>联系我们</li>
 +
 
 +
        <li>来访路线</li>
 +
 
 +
        <li>收藏本站</li> 
 +
 
 +
</ul> 
 +
 
 +
</div>

2019年12月3日 (二) 10:35的最新版本

  • 首　　页
  • 关于我们
  • 产品展示
  • 售后服务
  • 联系我们

————————————————


  • <a href="#" title="首页" target="_blank">首页</a>
  • <a href="#" title="国内新闻" target="_blank">国内新闻</a>
  • <a href="#" title="国外新闻" target="_blank">国外新闻</a>
  • <a href="#" title="娱乐新闻" target="_blank">娱乐新闻</a>
  • <a href="#" title="时事新闻" target="_blank">时事新闻</a>
  • <a href="#" title="联系我们" target="_blank">联系我们</a>

————————————————


取自“http://www.tywiki.com/index.php?title=导航条&oldid=23462”