菜单 搜索
首页 前端知识 html中二级菜单以及主页的实现，HTML css

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

2024-06-02 09:06:51 前端知识 前端哥 652 750 我要收藏

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

页面分为以下几个部分：头部（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" />这行代码需根据自己的路径修改

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10477.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于微信小程序的高校宿舍管理系统

2024-08-20 09:08:59

HTML5 地理定位

2024-08-20 09:08:58

HTML5和css样式精灵图和字体图标的使用

2024-08-20 09:08:57

解决窗口滚动条消失而导致的页面内容抖动的问题

2024-08-20 09:08:57

Vue2从基础到实战（指令篇）

2024-08-20 09:08:51

HTML5 的真相（一）

2024-08-20 09:08:31

基于vue elementPlus的动态导航标签栏-tabs

2024-08-20 09:08:28

使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)

2024-05-28 09:05:34

HTML学习：前端实现文字滚动效果（附视频教程）_html文字轮播代码(4)

2024-08-20 09:08:52

web期末作业设计网页/web前端开发期末大作业/html css网页制作成品(第41-50套/总计100套)欣赏

2024-08-20 09:08:39

大家推荐的文章
1

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
2

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
3

npm的使用

2024-08-18 00:08:131000
4

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
5

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
6

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
7

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
8

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
9

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
10

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！