【基于HTML5的网页设计及应用】——水平导航栏

最新推荐文章于 2024-06-13 09:00:00 发布

Y小夜

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量1k

点赞数 32

分类专栏：基于HTML5的网页设计及应用文章标签： html5 前端 html

本文链接：https://blog.csdn.net/shsjssnn/article/details/136306954

版权

基于HTML5的网页设计及应用专栏收录该内容

25 篇文章 1 订阅

订阅专栏

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

🥽Linux：Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

🎯功能简介

这是一个使用列表导航菜单的网页，包括一个水平方向的导航栏和多个下拉子菜单。主要功能如下：

点击每个导航菜单可以跳转到不同的页面。
鼠标悬停在每个导航菜单上时，会显示下拉子菜单，点击子菜单中的选项也可以跳转到相应的页面。
子菜单中的选项会在鼠标悬停时变色，并且有背景颜色高亮显示。
网页整体有一个蓝色的背景色，并且导航栏有黑色的边框。
子菜单的字体颜色是白色，在悬停时会变为红色。子菜单的背景颜色是蓝色。
导航菜单使用了无序列表（ul）和列表项（li）的标签，并且设置了样式，使得整个导航栏看起来更加美观。
使用 CSS 在样式中设置了每个导航菜单和子菜单的位置、大小、颜色、字体等属性。

🎯代码解析

<!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>
    <!-- 这里是 CSS 样式 -->
</head>
<body>
   <div>
    <ul class="menu">
        <li>
            <a href="#">学校首页</a>
        </li>
        <li>
            <a href="#">学校概况</a>
            <ul>
            <li>科大简介</li>
            <li>现任领导</li>
            <li>组织机构</li>
            </ul>
        </li>
        <!-- 其他菜单项和子菜单 -->
    </ul>
   </div>
</body>
</html>

HTML 部分定义了一个基本的网页结构，包括导航菜单和子菜单

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 1100px;
        height: 50px;
        background-color: #009;
        border: 1px solid black;
        margin: 0 auto;
    }
    ul{
        list-style: none;
    }
    .menu>li{
        width: 110px;
        float: left;
    }
    a{
        display: block;
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        line-height: 50px;
        
    }
    a:hover{
        background-color: #006;
        color: red;
    }
    .menu>li>ul{
        background-color: #00f;
        line-height: 50px;
        font-size: 14px;
        display: none;
        color: #fff;
        text-align: center;
    }
    .menu>li:hover>ul{ 
        display: block;
    }
    .menu>li>ul>li:hover{
        color: #df4136;
        background-color: #2a40bd;
    }
</style>

CSS 部分定义了页面的样式，包括背景颜色、字体颜色、边框等。这段代码实现了一个简单的水平导航菜单，并且包含了鼠标悬停显示子菜单的效果。

🎯核心代码

  <div>
    <ul class="menu">
        <li>
            <a href="#">学校首页</a>
        </li>
        <li>
            <a href="#">学校概况</a>
            <ul>
            <li>科大简介</li>
            <li>现任领导</li>
            <li>组织机构</li>
            </ul>
        </li>
        <!-- 其他菜单项和子菜单 -->
    </ul>
   </div>