HTML+CSS制作二级菜单栏

HTML+CSS制作二级菜单栏今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈!效果图附上:首先:我已链接了外部样式重置,所以无需自己亲自写:reset.css网上有很多,我用的是下面这个,免费分享给大家,永久有效哦!链接:https://pan.baidu.com/s/1doPA17vy–Qt…

大家好,又见面了,我是你们的朋友全栈君。

今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈!

效果图附上:

二级菜单栏

首先:我已链接了外部样式重置,所以无需自己亲自写:

reset.css网上有很多,我用的是下面这个,免费分享给大家,永久有效哦!

链接:https://pan.baidu.com/s/1doPA17vy–QtSzUB8q9b8w 
提取码:qq4o 

HTML:代码:

<!-- 外部样式表reset.css -->
<link rel="stylesheet" href="reset.css">
<!-- 外部样式表二级菜单 -->
<link rel="stylesheet" href="style.css">

注意:以下我写的所有样式,必须要用reset.css外部样式表!! 

1. 首先,我们来创建一个容器,用来放置整个导航栏:

HTML代码:
<div class="topmenu"></div>
CSS代码:
/* 设置整个容器宽高背景色 */
.topmenu {
    width: 100%;
    height: 50px;
    background: lightgreen;
}

效果图:只有一个绿色的条哈!

HTML+CSS制作二级菜单栏

2. 接下来我们要在.topmenu 容器中添加内容:

HTML代码:
<div class="topmenu">
        <!-- nav 整个导航栏 -->
        <ul class="nav">
             <!-- 一级菜单 -->
             <li class="nav-container">
                <a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
             </li>
             <!-- 一级菜单 w3school -->
             <li class="nav-container">
                <a href="https://www.w3school.com.cn/">W3school</a>
             </li>
             <!-- 一级菜单 菜鸟教程 -->
             <li class="nav-container">
                <a href="https://www.runoob.com/">菜鸟教程</a>
             </li>
        </ul>
</div>
CSS代码:

/* 一级菜单栏.nav-container设置 */
.topmenu .nav .nav-container {
    float: left;                  /* 一级菜单设置左浮动,使其水平排列 */
    background: lightgreen;       /*给整个一级菜单设置背景色(二级菜单包括在一级菜单中)*/
    text-align: center;           /* 对齐方式为居中 */
    width: 155px;                 /*设置宽度*/
    border-right:solid 2px #fff;  /*使用右边框分割*/
}
设置字体行高和颜色:
a {
    line-height: 50px;
    color: #fff;
}

3. 一级菜单栏写完啦,接下来写二级菜单栏,把二级菜单栏添加到一级的<li>下面:

附上完整的HTML代码:

<div class="topmenu">
        <!-- nav 整个导航栏 -->
        <ul class="nav">
            <!-- 一级菜单 -->
            <li class="nav-container">
                <a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
                <!-- 二级菜单 -->
                <ul class="nav-list">
                    <li>
                        <a href="https://blog.csdn.net/weixin_36732046/category_9560702.html">工具安装</a>
                    </li>
                    <li>
                        <a href="https://blog.csdn.net/weixin_36732046/category_8012920.html">问题解决</a>
                    </li>
                    <li>
                        <a href="https://blog.csdn.net/weixin_36732046/category_8527355.html">实战案例</a>
                    </li>
                    <li>
                        <a href="https://blog.csdn.net/weixin_36732046/category_8078929.html">Js函数</a>
                    </li>
                </ul>
            </li>
            <li class="nav-container">
                <!-- 一级菜单 w3school -->
                <a href="https://www.w3school.com.cn/">W3school</a>
                <!-- 二级菜单 -->
                <ul class="nav-list">
                    <li>
                        <a href="https://www.w3school.com.cn/html/index.asp">HTML</a>
                    </li>
                    <li>
                        <a href="https://www.w3school.com.cn/html5/index.asp">HTML5</a>
                    </li>
                    <li>
                        <a href="https://www.w3school.com.cn/html5/index.asp">CSS</a>
                    </li>
                    <li>
                        <a href="https://www.w3school.com.cn/css3/index.asp">CSS3</a>
                    </li>
                </ul>
            </li>
            <li class="nav-container">
                <!-- 一级菜单 菜鸟教程 -->
                <a href="https://www.runoob.com/">菜鸟教程</a>
                <!-- 二级菜单 -->
                <ul class="nav-list">
                    <li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li>
                    <li><a href="https://www.runoob.com/foundation/foundation-tutorial.html">Foundation5 教程</a></li>
                    <li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li>
                    <li><a href="https://www.runoob.com/angularjs/angularjs-tutorial.html">CSS3 教程</a></li>
                    <li><a href="https://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li>
                </ul>
            </li>
        </ul> <!-- nav 整个导航栏结束 -->
    </div>

 

效果图:

HTML+CSS制作二级菜单栏

3. 我们完成的差不多了,现在只需要把二级菜单栏隐藏,然后让它点击对应的一级菜单栏的时候再出现就行了。

CSS代码:

/* 隐藏二级菜单 */
.topmenu .nav .nav-container .nav-list {
    display: none;
}
/*点击一级菜单的时候显示二级菜单*/
.topmenu .nav .nav-container:hover .nav-list {
    display: list-item;
}
/*点击时变色*/
.topmenu li:hover{
    background: lightskyblue;
}

4. 好啦!已经全部做完啦! 网页背景是我自己添加的,为了美化视觉效果用!

CSS代码:

/* 网页背景图片 */
body {
    background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg);
}

效果图参考页面最顶部!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130049.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 几种更新(Update语句)查询的方法

    几种更新(Update语句)查询的方法

    2021年12月13日
  • php递归算法经典实例_递归算法1加到100

    php递归算法经典实例_递归算法1加到100在前面的文章《PHP递归算法(一)》中,我们为大家介绍了如何利用静态变量的方法来实现递归算法。本篇文章我们就继续为大家介绍另一种实现递归算法的方法即通过全局变量的方法。下面我们结合代码示例,为大家介绍通过全局变量Global实现递归的方法。代码如下:…

  • linux中getchar函数用法,linux getchar函数使用

    linux中getchar函数用法,linux getchar函数使用1函数介绍1)函数原型intgetchar(void);2)函数功能从stdin中读取一个字符。3)返回值返回读取字符的ASCII值或者EOF字符或者出错值。4)头文件#include2函数使用2.1getchar函数的特点Linux下编写的一个例子:#includeintmain(void){charch;intnum;num=0;printf…

    2022年10月18日
  • RPC协议了解

    RPC协议了解1.RPC概述RPC(RemoteProcedureCallProtocol)远程过程调用协议。通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个过程或函数,就像调用本地应用程序中的一样。正确的描述是:一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议。2.RPC特点:2.1)RPC是协议:协议意味着规范。目前典型的RPC实现包括Dubbo、Thrift、Herrty等。但这些实现往往都会附加其他重要功能,例如Dubbo还包括服务管理、访问权限

  • 【Python】 【绘图】plt.figure()的使用

    【Python】 【绘图】plt.figure()的使用1.figure语法及操作(1)figure语法说明figure(num=None,figsize=None,dpi=None,facecolor=None,edgecolor=None,frameon=True)num:图像编号或名称,数字为编号,字符串为名称 figsize:指定figure的宽和高,单位为英寸; dpi参数指定绘图对象的分辨率,即每英寸多少个像素,…

  • Java:JavaSocket编程开发多人聊天室「建议收藏」

    Java:JavaSocket编程开发多人聊天室「建议收藏」Java|JavaSocket编程开发多人聊天室实现内容运行结果部分代码完整代码实现内容用Java图形用户界面编写聊天室服务器端和客户端,支持多个客户端连接到一个服务器。每个客户端能够输入账号。可以实现群聊(聊天记录显示在所有客户端界面)。完成好友列表在各个客户端上显示。可以实现私人聊天,用户可以选择某个其他用户,单独发送信息。服务器能够群发系统消息,能够强行让某些用户下线。客户端的上线下线要求能够在其他客户端上面实时刷新。运行结果部分代码importjava.awt

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号