0
0

html中二级菜单以及主页的实现，HTML+css

近期在写一个图书管理系统，所有就简简单单地把首页部分拖了出来，哈哈哈应付个课设作业应该是没问题的，有需要图书管理系统源码的同学可私信，不过现在还不太成熟。

页面分为以下几个部分：头部（top），导航栏(nav)，内容区(content),,其中内容区又包含left和right

  1. 在导航栏中二级菜单是由以下代码实现: css部分， 有些也是在其他大佬博客中看到的，叫什么给忘了
<div id="nav">
            <!--导航栏-->
            <ul class="list-group">
                <li><a href="#" target="mainFiled" class=" list-group-item-action"> 图书分类</a>
                    <!--一级-->
                    <ul>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">科学类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">玄幻类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">军事类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">人生哲理</a></li>
                </li>
            </ul>

            <li><a href="#" target="mainFiled" class=" list-group-item-action">图书借阅</a>
                <!--一级-->
                <ul>
                    <li><a href="#" target="mainFiled" class=" list-group-item-action">借阅登记</a></li>
                    <li><a href="#" target="mainFiled" class=" list-group-item-action">归还登记</a></li>
            </li>
            </ul>

            <li><a href="#" target="mainFiled" class=" list-group-item-action">热销展示</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">我的</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">信息发布</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">图书购买</a></li>
            <!--一级-->

            </ul>
        </div>

/*实现二级菜单*/
#nav {
    /*知道了盒子宽度垂直居中*/
    height: 130px;
    
    width: 1500px;
background-color: aliceblue;
    border: solid 2px hidden ;
    
    

}

#nav>ul>li {
    float: left;/*使用组合选择器定位到第一级ul下一级的li，使其左浮动*/
    margin-left: 100px;/*每个超链接之间的空隙*/
    /* box-shadow: 5px 5px 8px .3px;盒子效果 */
    

}

li {
    list-style: none;
    
    /*所有的项目都取消标记*/
}

li>ul {
    display: none;
    /*使用组合选择器定位到li下一级的ul，使其隐藏*/
}

li:hover ul {
    /*使用伪类选择器设置悬停在li上面时显示ul*/
    display: block;
}

a {
    text-decoration: none;
    display: block;
    width: 120px;
    font-size: 20px;
    text-align: center;
    color: cadetblue;/*未点击时的颜色*/
}

a:hover {
    /*使用伪类选择器设置悬停在a上面时修改a的显示样式*/
    background-color: cornflowerblue;
    color: papayawhip;
}

2.float左右浮动：在content容器中包含left和right，要想让这两个子容器乖乖听话就得用到float属性：

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

<div id="content">

            <!--功能实现区-->
            <div id="left">

                <div id="left_one">
                    <p id="p2">消息公布</p>
                </div>

                <div id="left_two">
                    <p id="p3">友情链接</p>
                    <p id="p4">csdn <br>第二篇博客</p> <!-- 这里可以把id 改为class -->
                </div>

            </div>

            <div id="right">
                <div id="right_one">
                    <p class="p2">多功能展示区</p>
                </div>
            </div>

        </div>

#content{
    margin-top: 22px;
    margin-left: 15px;
    width: 100%;
    height:500px;
    border: solid 3px hidden;
    background-color: aliceblue;
}

#left{
    width: 400px;
    height:500px;
    margin-top: 15px;
    border: solid  3px hidden;
    
    float: left;
}

#left_one{
    width: 400px;
    height:200px;
    margin-top: 15px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#left_one #p2{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}
#left_two{
    width: 400px;
    height:200px;
    margin-top: 15px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#left_two #p3{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}
#left_two #p4{
    font-size: 15px;
    margin-left: 25px;
    
}
#right{
    width: 1000px;
    height:500px;
    margin-top: 15px;
    border: solid  3px hidden;
    
    float: right;
}
#right{
    width: 1000px;
    height:500px;
    margin-top: 30px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#right .p2{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}

上述代码改变字体大小的代码有些繁琐，可以将id改为class，同一个class类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

总体代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>主导航栏</title>
        <link rel="stylesheet" type="text/css" href="css/mainpage.css" />
    </head>

    <body>

        <div id="top">
            <!--顶部图-->
            <p id="p1">同学你好,欢迎观看我的博客</p>
            <!-- 文字可改-->
        </div>

        <div id="nav">
            <!--导航栏-->
            <ul class="list-group">
                <li><a href="#" target="mainFiled" class=" list-group-item-action"> 图书分类</a>
                    <!--一级-->
                    <ul>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">科学类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">玄幻类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">军事类</a></li>
                        <li><a href="#" target="mainFiled" class=" list-group-item-action">人生哲理</a></li>
                </li>
            </ul>

            <li><a href="#" target="mainFiled" class=" list-group-item-action">图书借阅</a>
                <!--一级-->
                <ul>
                    <li><a href="#" target="mainFiled" class=" list-group-item-action">借阅登记</a></li>
                    <li><a href="#" target="mainFiled" class=" list-group-item-action">归还登记</a></li>
            </li>
            </ul>

            <li><a href="#" target="mainFiled" class=" list-group-item-action">热销展示</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">我的</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">信息发布</a></li>
            <!--一级-->
            <li><a href="#" target="mainFiled" class=" list-group-item-action">图书购买</a></li>
            <!--一级-->

            </ul>
        </div>

        <div id="content">

            <!--功能实现区-->
            <div id="left">

                <div id="left_one">
                    <p id="p2">消息公布</p>
                </div>

                <div id="left_two">
                    <p id="p3">友情链接</p>
                    <p id="p4">csdn <br>第二篇博客</p> <!-- 这里可以把id 改为class -->
                </div>

            </div>

            <div id="right">
                <div id="right_one">
                    <p class="p2">多功能展示区</p>
                </div>
            </div>

        </div>

    </body>
</html>

css:

* {
    padding: 0px;
    margin: 0px;
}

#top{width: 100%;
     height: 70px;
     background-color: cadetblue;
}
#top #p1{font-size: 30px;text-align: center;margin-top: 20px;}
/*顶部*/

#nav {
    /*知道了盒子宽度垂直居中*/
    height: 130px;
    
    width: 1500px;
background-color: aliceblue;
    border: solid 2px hidden ;
    
    

}

#nav>ul>li {
    float: left;/*使用组合选择器定位到第一级ul下一级的li，使其左浮动*/
    margin-left: 100px;/*每个超链接之间的空隙*/
    /* box-shadow: 5px 5px 8px .3px;盒子效果 */
    

}

li {
    list-style: none;
    
    /*所有的项目都取消标记*/
}

li>ul {
    display: none;
    /*使用组合选择器定位到li下一级的ul，使其隐藏*/
}

li:hover ul {
    /*使用伪类选择器设置悬停在li上面时显示ul*/
    display: block;
}

a {
    text-decoration: none;
    display: block;
    width: 120px;
    font-size: 20px;
    text-align: center;
    color: cadetblue;/*未点击时的颜色*/
}

a:hover {
    /*使用伪类选择器设置悬停在a上面时修改a的显示样式*/
    background-color: cornflowerblue;
    color: papayawhip;
}
#content{
    margin-top: 22px;
    margin-left: 15px;
    width: 100%;
    height:500px;
    border: solid 3px hidden;
    background-color: aliceblue;
}

#left{
    width: 400px;
    height:500px;
    margin-top: 15px;
    border: solid  3px hidden;
    
    float: left;
}

#left_one{
    width: 400px;
    height:200px;
    margin-top: 15px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#left_one #p2{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}
#left_two{
    width: 400px;
    height:200px;
    margin-top: 15px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#left_two #p3{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}
#left_two #p4{
    font-size: 15px;
    margin-left: 25px;
    
}
#right{
    width: 1000px;
    height:500px;
    margin-top: 15px;
    border: solid  3px hidden;
    
    float: right;
}
#right{
    width: 1000px;
    height:500px;
    margin-top: 30px;
    border: solid  3px hidden;
    background-color: #ffffffff;
    
}
#right .p2{
    font-size: 20px;
    text-align: center;
    background-color:cornflowerblue;
}
#l

!!!!注意<link rel="stylesheet" type="text/css" href="css/mainpage.css" />这行代码需根据自己的路径修改

需要图书管理系统的小伙伴也可以评论或私信

标签： css 前端 html5
本文转载自: https://blog.csdn.net/weixin_63478784/article/details/129028823
版权归原作者 it的小白！ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“html中二级菜单以及主页的实现，HTML+css”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

Postman导出报告

解决 git 不是内部或外部命令，也不是可运行的程序

Git技巧：Pre-commit

【Godot4自学手册】第四十一节背包系统（一）UI设置

答应我，在量化策略回测里，避开未来函数这4个坑

Servlet入门学习笔记-Servlet技术

ZooKeeper--分布式协调服务

文章导航