打开主菜单

“导航条”的版本间的差异
第8行： 第8行：
 
</ul>
 
</ul>
 
————————————————
 
————————————————
−
版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
+
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
*{ margin:0; padding:0; font-size:14px; }  //这里做了一个基本的样式清除，并且设置初始的文字大小为14px;
+
<head>
−
ul{ list-style:none; width:100px; }  //list-style:none;是为了清除条目前的那个圆点 
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
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个像素
+
<title>无标题文档</title>
−
a{text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;
+
<link href="styles/navigation.css" rel="stylesheet" type="text/css"/>
−
a:hover{ background-color:#f60; color:#0000;} //这个是鼠标经过的样式
+
</head>
 +
 
 +
<body>
 +
<header>
 +
  <nav>
 +
    <ul>
 +
      <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>
 +
      <li><a href="#" title="时事新闻" target="_blank">时事新闻</a></li>
 +
      <li><a href="#" title="联系我们" target="_blank">联系我们</a></li>
 +
    </ul>
 +
  </nav>
 +
</header>
 +
</body>
 +
</html>
 
————————————————
 
————————————————
−
版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
+
版权声明：本文为CSDN博主「_LDL」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
−
原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229
+
原文链接：https://blog.csdn.net/lindonglian/article/details/46044439

2019年12月3日 (二) 10:25的版本

  • <a href="#">首　　页</a>
  • <a href="#">关于我们</a>
  • <a href="#">产品展示</a>
  • <a href="#">售后服务</a>
  • <a href="#">联系我们</a>

———————————————— !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="styles/navigation.css" rel="stylesheet" type="text/css"/> </head>

<body> <header> 

 <nav>
  • <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>
 </nav>

</header> </body> </html> ———————————————— 版权声明：本文为CSDN博主「_LDL」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/lindonglian/article/details/46044439

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