【前端】HTML＋CSS 设计简洁美观的导航菜单

最新推荐文章于 2025-03-13 11:31:34 发布

虚拟现实旅人

最新推荐文章于 2025-03-13 11:31:34 发布

阅读量1.1k

点赞数 10

文章标签：前端 html css

本文链接：https://blog.csdn.net/L10131/article/details/145133521

版权

【前端】HTML＋CSS 设计简介美观的导航菜单

简介

导航菜单是网页中非常重要的组成部分，它帮助用户快速找到所需的信息。在这篇博客中，我们将学习如何使用HTML和CSS设计和实现一个简单、美观的导航栏。

1.HTML部分：构建网页结构

HTML是网页的基本骨架，它定义了网页内容的基本结构框架，下面是导航菜单的HTML代码结构：

<div class="nav">
        <div class="nav-inner">
            <!--第一行-->
            <div class="nav-item nav-first">
                <a href="#" target="_blank">新闻</a>
                <a href="#" target="_blank">图片</a>
                <a href="#" target="_blank">军事</a>
                <a href="#" target="_blank">天气</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">视频</a>
                <a href="#" target="_blank">热剧</a>
                <a href="#" target="_blank">综艺</a>
                <a href="#" target="_blank">拍摄</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">娱乐</a>
                <a href="#" target="_blank">明星</a>
                <a href="#" target="_blank">电影</a>
                <a href="#" target="_blank">音乐</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">汽车</a>
                <a href="#" target="_blank">旅游</a>
                <a href="#" target="_blank">房产</a>
                <a href="#" target="_blank">家园</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">文化</a>
                <a href="#" target="_blank">教育</a>
                <a href="#" target="_blank">出国</a>
                <a href="#" target="_blank">儿童</a>
            </div>
            <div class="nav-item nav-last">
                <a href="#" target="_blank">读书</a>
                <a href="#" target="_blank">大家</a>
                <a href="#" target="_blank">小说</a>
            </div>
            <!--第二行-->
            <div class="nav-item nav-first">
                <a href="#" target="_blank">财经</a>
                <a href="#" target="_blank">股票</a>
                <a href="#" target="_blank">港股</a>
                <a href="#" target="_blank">基金</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">体育</a>
                <a href="#" target="_blank">NBA</a>
                <a href="#" target="_blank">中超</a>
                <a href="#" target="_blank">彩票</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">时尚</a>
                <a href="#" target="_blank">美容</a>
                <a href="#" target="_blank">健康</a>
                <a href="#" target="_blank">育儿</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">科技</a>
                <a href="#" target="_blank">数码</a>
                <a href="#" target="_blank">手机</a>
                <a href="#" target="_blank">家电</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">游戏</a>
                <a href="#" target="_blank">动漫</a>
                <a href="#" target="_blank">星座</a>
                <a href="#" target="_blank">购物</a>
            </div>
            <div class="nav-item nav-last">
                <a href="#" target="_blank">公益</a>
                <a href="#" target="_blank">佛学</a>
                <a href="#" target="_blank"> 更多&#187;</a>
            </div>
        </div>
    </div>

<div class="nav">: 包裹整个导航菜单的最外层容器，具有类名nav，用于整体样式的设置。
<div class="nav-inner">: 包裹每一行导航条目的容器。
<div class="nav-item">: 每个导航分类的容器。每个分类包含4个链接，外层通过类名nav-item设置样式。
<a>标签: 超链接元素，每个导航项通过a标签实现点击跳转功能。target="_blank"设置为新标签页打开链接。
&#187:HTML字符实体的表示形式，代表右双角引号（>>)。这个符号常用于指示“更多”或“下一步”的含义。

运行结果
在这里插入图片描述

2.CSS部分：美化导航界面

CSS用于控制导航菜单的外观和布局，下面是CSS设置样式的代码结构：

a{
        text-decoration: none;
    }

全局样式：a { text-decoration: none; }: 取消超链接默认的下划线。

.nav{
        width: 1400px;
        margin: 0 auto;
        background: linear-gradient(to bottom,#6eb4de 0%,#217ab5 100%);
    }

.nav样式:
width: 1400px; margin: 0 auto;: 宽度固定为1400像素，并水平居中。
background: linear-gradient(to bottom, #6eb4de 0%, #217ab5 100%);: 使用渐变背景色。

.nav .nav-inner:after{
        display: block;
        content: "";
        clear: both;
    }

.nav-inner:after伪元素:
实现清除浮动的效果，使容器能够包裹内部浮动的子元素。

.nav .nav-item{
        float: left;
        padding:0 20px;
        border-right: 2px dotted white;
    }

.nav-item样式:
float: left;: 使各导航分类横向排列。
padding: 0 20px;: 左右内边距设置20像素。
border-right: 2px dotted white;: 每个分类之间有一条白色虚线分隔。

.nav .nav-item a{
        float: left;
        width: 44px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: white;
        margin: 0 3px;
    }

.nav .nav-item a样式:
每个链接宽度为44像素，高度为32像素，文字垂直居中，并水平居中对齐。
color: white; margin: 0 3px;: 设置文字颜色为白色，并且链接之间有3像素的间距。

.nav .nav-inner a:hover{
        color: #20546f;
        background: #c6e3eb;
    }

悬停效果:a:hover: 改变链接文字颜色为深色，并设置浅蓝背景色以提示交互状态。

.nav .nav-item a:nth-child(1){
        font-weight: bold;
    }

font-weight: bold;:设置每行的第一个为粗体。

.nav .nav-last{
        border: 0;
    }
    .nav .nav-first{
        padding-left: 0;
    }

.nav-first和.nav-last特殊样式:
.nav-first移除了左侧内边距。
.nav-last移除了右边的分隔线。

运行结果
在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航菜单</title>
    <style>
    a{
        text-decoration: none;
    }
    .nav{
        width: 1400px;
        margin: 0 auto;
        background: linear-gradient(to bottom,#6eb4de 0%,#217ab5 100%);
    }
    .nav .nav-inner:after{
        display: block;
        content: "";
        clear: both;
    }
    .nav .nav-item{
        float: left;
        padding:0 20px;
        border-right: 2px dotted white;
    }
    .nav .nav-item a{
        float: left;
        width: 44px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: white;
        margin: 0 3px;
    }
    .nav .nav-inner a:hover{
        color: #20546f;
        background: #c6e3eb;
    }
    .nav .nav-item a:nth-child(1){
        font-weight: bold;
    }
    .nav .nav-last{
        border: 0;
    }
    .nav .nav-first{
        padding-left: 0;
    }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-inner">
            <!--第一行-->
            <div class="nav-item nav-first">
                <a href="#" target="_blank">新闻</a>
                <a href="#" target="_blank">图片</a>
                <a href="#" target="_blank">军事</a>
                <a href="#" target="_blank">天气</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">视频</a>
                <a href="#" target="_blank">热剧</a>
                <a href="#" target="_blank">综艺</a>
                <a href="#" target="_blank">拍摄</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">娱乐</a>
                <a href="#" target="_blank">明星</a>
                <a href="#" target="_blank">电影</a>
                <a href="#" target="_blank">音乐</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">汽车</a>
                <a href="#" target="_blank">旅游</a>
                <a href="#" target="_blank">房产</a>
                <a href="#" target="_blank">家园</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">文化</a>
                <a href="#" target="_blank">教育</a>
                <a href="#" target="_blank">出国</a>
                <a href="#" target="_blank">儿童</a>
            </div>
            <div class="nav-item nav-last">
                <a href="#" target="_blank">读书</a>
                <a href="#" target="_blank">大家</a>
                <a href="#" target="_blank">小说</a>
            </div>
            <!--第二行-->
            <div class="nav-item nav-first">
                <a href="#" target="_blank">财经</a>
                <a href="#" target="_blank">股票</a>
                <a href="#" target="_blank">港股</a>
                <a href="#" target="_blank">基金</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">体育</a>
                <a href="#" target="_blank">NBA</a>
                <a href="#" target="_blank">中超</a>
                <a href="#" target="_blank">彩票</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">时尚</a>
                <a href="#" target="_blank">美容</a>
                <a href="#" target="_blank">健康</a>
                <a href="#" target="_blank">育儿</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">科技</a>
                <a href="#" target="_blank">数码</a>
                <a href="#" target="_blank">手机</a>
                <a href="#" target="_blank">家电</a>
            </div>
            <div class="nav-item">
                <a href="#" target="_blank">游戏</a>
                <a href="#" target="_blank">动漫</a>
                <a href="#" target="_blank">星座</a>
                <a href="#" target="_blank">购物</a>
            </div>
            <div class="nav-item nav-last">
                <a href="#" target="_blank">公益</a>
                <a href="#" target="_blank">佛学</a>
                <a href="#" target="_blank"> 更多&#187;</a>
            </div>
        </div>
    </div>
</body>
</html>