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

最新推荐文章于 2024-05-27 17:40:18 发布
最新推荐文章于 2024-05-27 17:40:18 发布
阅读量4.1k 收藏 43
点赞数 13
文章标签： css 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63478784/article/details/129028823
版权

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

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

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

哎呦☞ᨐ
关注
  • 13
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
用html和css完成二级菜单
weixin_49868928的博客
10-20 331
二级菜单 用html+css完成一个鼠标移动上去实现二级菜单的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*静态页面样式设置开始*/ /*一级菜单样式设置开始*/ *{margin:0px
用html和css实现一个简单的二级菜单
m0_71491195的博客
07-09 113
css全部代码内容： * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: white; .......
HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
09-25
通过嵌套的ul li 实现简单的二级菜单兼容IE6-9,谷歌火狐等主流浏览器，示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。 效果演示介绍地址： https://blog.csdn.net/weixin_43151418/article/details/131412565
HTML垂直二级菜单的设计与实现
2301_77335001的博客
05-27 287
【代码】HTML垂直二级菜单的设计与实现。
html、css 实现二级菜单
Zhangguohao666的博客
12-11 7711
利用html、css 实现二级菜单，一级菜单用浮动，二级菜单用定位
html简单下拉二级菜单
君临天下的博客
06-21 7550
在实际网页中经常能看到二级菜单的使用，如下图所示， 鼠标移动到相应位置菜单栏才会有响应 具体实现代码如下（仅供参考）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉二级菜单</title> <!--这是一段注释--> <style type="text/css"> /*初始化
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6217
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
HTML基础学习
ZJRUIII的博客
04-17 3484
文章目录一、HTML结构1.认识HTML标签2.HTML 文件基本结构3.标签层次结构4. 快速生成代码框架和利用开发者工具看二、写HTML的编译器三、HTML常见标签1.注释标签 一、HTML结构 1.认识HTML标签 HTML 代码是由 “标签” 构成的，在HTML中，对标签的叫法还有“元素”。每个标签可以视为一个对象，这些对象也可以包含一些属性和方法，然后就可以在JS 中来访问或者修改这里的属性，或者调用其中的方法。 这些对象，都是通过浏览器在解析html的时候自动创建的，咱们可以通过JS 就能操作这
HTML+CSS+JS实现的下拉菜单源码
最新发布
07-02
HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...
纯html+css制作三级下拉菜单
09-24
代码中，二级菜单的`<ul>`默认是隐藏的（`display: none`），而在`<li>`的`:hover`状态下，将其设置为`display: block`，使得二级菜单可见。 接下来，对于三级菜单，原理与二级菜单相同，但嵌套更深。在一级菜单项...
HTML+CSS实现简单下拉菜单效果
09-24
使用Html+css实现简单的下拉菜单代码非常简单，具有参考借鉴价值，需要的的朋友参考下吧
html5+css3下拉菜单特效代码
03-20
要实现下拉菜单的特效，我们可以利用以下CSS3特性： 1. **伪类选择器**：如`:hover`、`:focus`和`:active`，用于在不同状态下改变元素的样式。例如，当鼠标悬停在主菜单项上时，可以显示下拉菜单： ```css ....
【Web前端HTML+CSS基础——定位(二级菜单，弹出层和轮播图的应用)】
weixin_64993156的博客
02-25 2795
四个属性值同时设置会产生矛盾，开发时尽量避免，默认情况，一般左右冲突的时候以左为主，一般上下冲突以上为主。一个元素，只要position的取值不是static,认为该元素就是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖。绝对定位和固定定位中，margin为auto的时候，会自动吸收剩余空间。包含块不一样，绝对定位的包含块怎么找的，相对定位的包含块怎么找的。设置z-index，通常情况下，该值越大，越靠近用户。包含块的不同：固定为视口(浏览器的可视窗口)
二级页面的极简模板（帮助理解二级页面）
m0_74069684的博客
12-16 1744
二级页面的极简版（帮助初学者理解）
二级导航栏（html、css)
热门推荐
leihao-lester
10-13 1万+
二级导航栏（html、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
HTML导航栏二级菜单（垂直、水平方向）
weixin_48591974的博客
09-12 4382
二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构，子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 1万+
二级导航栏的制作
html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤
weixin_31649177的博客
06-30 1万+
网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签，p标签里面放置了一个主菜单“头像”。我们要做的效果就是当鼠标放在“头像”这里就会弹出下拉菜单。03然后我们使用*清除所有元素的margin和padding值。04接着我们来设置id为ic...
html二级菜单的自动宽度,HTML+CSS导航栏自适应
05-25
要实现 HTML+CSS 导航栏自适应，可以使用 flex 布局，并设置菜单项的 flex-grow 属性为 1，同时设置菜单容器的 justify-content 为 space-between 或者 space-around。这样菜单项就会自动平分容器宽度，实现自适应效果。 代码示例： HTML： ```html <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> </ul> </nav> ``` CSS： ```css nav { display: flex; justify-content: space-between; /* 或者 space-around */ background-color: #333; } ul { display: flex; padding: 0; margin: 0; list-style: none; } li { flex-grow: 1; text-align: center; } a { display: block; color: white; padding: 10px; text-decoration: none; } ``` 这样就可以实现一个自适应的导航栏，菜单项的宽度会根据容器的宽度自动调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哎呦☞ᨐ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值