找回密码
 立即注册
首页 资源区 教程 html创建网站导航栏目

html创建网站导航栏目

新程序 2025-5-24 12:10:36

1.png
html导航创建.zip (625.11 KB, 下载次数: 0)


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>caidandaohang</title>
  6.     <link rel="stylesheet" type="text/css" href="C:/Users/macbook/Desktop/daohang/css/ys.css">
  7. <!--
  8. <nav> 表示头部标签,用<ul>,<li>创建导航栏目,然后通过css样式来实现想要的导航
  9. -->
  10. </head>
  11. <body>

  12.    
  13. <nav>
  14. <ul>

  15. <a href="/" class="logo">
  16. <img src="C:/Users/macbook/Desktop/daohang/img/av.gif" alt="logo" width="100" height="50" >

  17. </a>


  18.    <li><a href="#">首页</a></li>
  19.    <li><a href="#">最新</a></li>
  20.    <li><a href="#">热门</a></li>
  21.    <li><a href="#">评分</a></li>
  22.    <li><a href="#">点赞</a></li>
  23.    <li><a href="#">分类</a></li>
  24. </ul>

  25. </nav>



  26. </body>
  27. </html>
复制代码



css样式文件


  1.         nav {
  2.             background-color: #333;
  3.             padding: 10px 0;
  4.         }
  5.         
  6.         nav ul {
  7.             list-style-type: none;
  8.             margin: 0;
  9.             padding: 0;
  10.             text-align: center;
  11.         }
  12.         
  13.         nav ul li {
  14.             display: inline;
  15.             margin: 0 15px;
  16.         }
  17.         
  18.         nav ul li a {
  19.             color: white;
  20.             text-decoration: none;
  21.             font-family: Arial, sans-serif;
  22.         }
  23.         
  24.         nav ul li a:hover {
  25.             color: #4CAF50;
  26.         }
复制代码


您需要登录后才可以回帖 登录 | 立即注册