一个导航栏的代码

最新推荐文章于 2024-08-31 08:32:04 发布

燕雀9527

最新推荐文章于 2024-08-31 08:32:04 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_45359234/article/details/106631799

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个导航栏的图片
成品如上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    a {
        /* 去掉下划线 */
        text-decoration:none;
        /* 转为行内块元素 */
        display:inline-block;
        /* 字体转为黑色 */
        color: black;
        /* 行内块元素a的内边距为20px */
        padding:20px;
    }  
    a:hover{
        /* 鼠标悬停时，a的背景颜色变色 */
        background-color:rgb(204, 202, 206);
    }
    div {
        /* 上边框为3像素直线橙色 */
        border-top:3px solid orange;
        /* 下边框为1像素直线灰色 */
        border-bottom: 1px solid #F1F2F1;
    }
    </style>    
</head>
<body>
    <div>
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>
</html>