2021-11-04

最新推荐文章于 2024-03-14 12:40:51 发布

厉害啊

最新推荐文章于 2024-03-14 12:40:51 发布

阅读量79

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_53232284/article/details/121136819

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .nav{ text-align: center;}
    .nav a{
        display: inline-block;
        width: 120px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-decoration: none;
        background-image: url(图片/bg.png);
       

    }

    .nav a:hover {
        background-image: url(图片/bgc.png);
    }
</style>
<body>
   <div class="nav">
       <a href="#">hello world</a>
       <a href="#">hello world</a>
       <a href="#">hello world</a>
       <a href="#">hello world</a>
       <a href="#">hello world</a>
       <a href="#">hello world</a>
      
   </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
     .box {
        border-top: 3px solid #ff8500;
        border-bottom:1px solid #edeef0;
    }
    .box a {
        display: inline-block;
        height: 50px;
        line-height:50px;
        text-decoration: none;
        color: #000;
        font-size: 12px;
        padding: 0 20px;
    }
    .box a:hover{
        color: #ccc;
    }
        
</style>  
</head>

<body>
    <div class="box">
        <a href="#">双十一抢购</a>
        <a href="#">移动客户端</a>
        <a href="#">零元抢购</a>
        <a href="#">个人中心</a>
        <a href="#">客服小姐姐</a>
        <a href="#">清理购物车</a>
    </div>

</body>
</html>