HTML----导航栏（初步）

最新推荐文章于 2020-04-10 10:19:44 发布

索索索

最新推荐文章于 2020-04-10 10:19:44 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41391569/article/details/84800125

本文分享了如何使用HTML和CSS实现一个具有响应式布局的导航栏，包括样式设计和交互效果，如鼠标悬停时的背景变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老师布置的一个关于导航的作业，老师给的效果图如下：在这里插入图片描述
我写的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../common.css">
    <style>
        .box1{
            margin:200px 0 0 0;                   
            height: 150px;
            background: url(banner2_bg.jpg) repeat-x;   
        }
        .box2{
         background: url(button3_bg.jpg) repeat-x;


        }
         li{
             width:80px;        
             float: left;
             border-left:1px solid  white; 
             
          
         }
         .nav a{
             display: block;
             height: 32px;
            background: url(button3.jpg) no-repeat;
             color: #6942C2;
             line-height: 32px;
             text-align: center;
             font-size: 12px;
         }
         .nav a:hover{
             background: url(button4.jpg) no-repeat;
             color: white;
         }

    </style>
</head>
<body>

    <div class="box1"> 
    <img src="banner2_left.jpg" alt="" >
    </div>
    <div class="box2">
    <ul class="nav clearfix">
        <li><a href="#">首页导读</a></li>
        <li><a href="#">推荐版面</a></li>
        <li><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>
   </div>

</body>
</html>

我的效果图如下：
在这里插入图片描述