CSS实现简易导航

最新推荐文章于 2023-11-10 18:17:09 发布

快乐江小鱼

最新推荐文章于 2023-11-10 18:17:09 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/dolly_baby/article/details/130446265

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS实现简易导航

首先搭建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>我的导航</title>
</head>
<body>
    
</body>
</html>

添加导航内容，使用nav+a实现

<nav>
    <a href="#">Java</a>
    <a href="#">PHP</a>
    <a href="#">Ruby</a>
    <a href="#">Python</a>
</nav>

添加样式

/* 设置导航栏高度，背景色，边框 */
nav {
    height: 41px;
    background-color: #fcfcfc;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
}

/* 超链接修改为行内块元素，左右保持15px填充 */
nav a {
    font-size: 14px;
    color: #4c4c4c;
    text-decoration: none;
    height: 41px;
    line-height: 41px;
    padding: 0 15px;
    display: inline-block;
}

nav a:hover {
    background-color: #ccc;
}

完整源码

<!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>新浪导航</title>
    <style>
        nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        nav a {
            font-size: 14px;
            color: #4c4c4c;
            text-decoration: none;
            height: 41px;
            line-height: 41px; /* 行高等于高度使得文字垂直居中 */
            padding: 0 15px;
            display: inline-block;
        }

        nav a:hover {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">网站导航</a>
        <a href="#">李元芳</a>
    </nav>
</body>
</html>