基于纯HTML5+CSS3的一个后台或者前台布局

最新推荐文章于 2020-01-02 21:25:50 发布
最新推荐文章于 2020-01-02 21:25:50 发布
阅读量2.2k 收藏 11
点赞数
文章标签： html menu tab js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40204129/article/details/86741194
版权

前言：本实例基于纯html和css3，不需要任何插件，可以作为新手参考！

第一部分

1.0 主要实现了：点击菜单改变颜色、下拉选择菜单、div选项卡、div相对布局等

话不多说，先上图：

图一：

图二：

1.1 代码部分

1.11 HTML部分（Index.html）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>keleiUI</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/index.js"></script>
	</head>

	<body>
		<div class="kelei_main">

			<div class="kelei_top">
				<ul class="menu">
					<li>
						<a href="">菜单一</a>
					</li>
					<li>
						<a href="">菜单二</a>
					</li>
					<li>
						<a href="">菜单三</a>
					</li>
					<li>
						<a href="">菜单四</a>
					</li>
					<li>
						<a href="">菜单五</a>
					</li>
					<li>
						<a href="">菜单</a>
					</li>
					<li>
						<a href="">菜单一</a>
					</li>
				</ul>
			</div>

			<div class="kelei_left">
				<div class="kelei_menu_row1">
					<div class="kelei_menu_name">测试菜单一</div>
					<div class="kelei_menu_value" id="detail_title">
						<div onmouseover="showdiv(1)">
							<a href="#">首页</a>
						</div>
						<div onmouseover="showdiv(2)">
							<a href="#">下拉测试菜单二</a>
						</div>
						<div onmouseover="showdiv(3)">
							<a href="#">下拉测试菜单三</a>
						</div>
						<div onmouseover="showdiv(4)">
							<a href="#">下拉测试菜单四</a>
						</div>
						<div onmouseover="showdiv(5)">
							<a href="#">下拉测试菜单五</a>
						</div>
					</div>
				</div>
				<div class="kelei_menu_row2">
					<div class="kelei_menu_name">测试菜单一</div>
					<div class="kelei_menu_value" id="detail_title">
						<div onmouseover="showdiv(1)">
							<a href="#">首页</a>
						</div>
						<div onmouseover="showdiv(2)">
							<a href="#">下拉测试菜单二</a>
						</div>
						<div onmouseover="showdiv(3)">
							<a href="#">下拉测试菜单三</a>
						</div>
						<div onmouseover="showdiv(4)">
							<a href="#">下拉测试菜单四</a>
						</div>
						<div onmouseover="showdiv(5)">
							<a href="#">下拉测试菜单五</a>
						</div>
					</div>
				</div>
				<div class="kelei_menu_row3">
					<div class="kelei_menu_name">测试菜单一</div>
					<div class="kelei_menu_value" id="detail_title">
						<div onmouseover="showdiv(1)">
							<a href="#">首页</a>
						</div>
						<div onmouseover="showdiv(2)">
							<a href="#">下拉测试菜单二</a>
						</div>
						<div onmouseover="showdiv(3)">
							<a href="#">下拉测试菜单三</a>
						</div>
						<div onmouseover="showdiv(4)">
							<a href="#">下拉测试菜单四</a>
						</div>
						<div onmouseover="showdiv(5)">
							<a href="#">下拉测试菜单五</a>
						</div>
					</div>
				</div>
				<div class="kelei_menu_row4">
					<div class="kelei_menu_name">测试菜单一</div>
					<div class="kelei_menu_value" id="detail_title">
						<div onmouseover="showdiv(1)">
							<a href="#">首页</a>
						</div>
						<div onmouseover="showdiv(2)">
							<a href="#">下拉测试菜单二</a>
						</div>
						<div onmouseover="showdiv(3)">
							<a href="#">下拉测试菜单三</a>
						</div>
						<div onmouseover="showdiv(4)">
							<a href="#">下拉测试菜单四</a>
						</div>
						<div onmouseover="showdiv(5)">
							<a href="#">下拉测试菜单五</a>
						</div>
					</div>
				</div>
			</div>

			<div class="kelei_right">
				<p>右侧</p>
			</div>

			<div class="kelei_center">

				<div id="detail_info">
					<div id="info1" class="detail_info_same" style="display: block">
						首页
					</div>
					<div id="info2" class="detail_info_same" style="display: none">
						下拉测试菜单二
					</div>
					<div id="info3" class="detail_info_same" style="display: none">
						下拉测试菜单三
					</div>
					<div id="info4" class="detail_info_same" style="display: none">
						下拉测试菜单四
					</div>
					<div id="info5" class="detail_info_same" style="display: none">
						下拉测试菜单五
					</div>
				</div>
				
				
					<div id="detail_info">
				
					<div id="info2" class="detail_info_same" style="display: none">
						下拉测试菜单二
					</div>
					<div id="info3" class="detail_info_same" style="display: none">
						下拉测试菜单三
					</div>
					<div id="info4" class="detail_info_same" style="display: none">
						下拉测试菜单四
					</div>
					<div id="info5" class="detail_info_same" style="display: none">
						下拉测试菜单五
					</div>
				</div>
				
				
				
					<div id="detail_info">
					
					<div id="info2" class="detail_info_same" style="display: none">
						下拉测试菜单二
					</div>
					<div id="info3" class="detail_info_same" style="display: none">
						下拉测试菜单三
					</div>
					<div id="info4" class="detail_info_same" style="display: none">
						下拉测试菜单四
					</div>
					<div id="info5" class="detail_info_same" style="display: none">
						下拉测试菜单五
					</div>
				</div>
				
					<div id="detail_info">
					
					<div id="info2" class="detail_info_same" style="display: none">
						下拉测试菜单二
					</div>
					<div id="info3" class="detail_info_same" style="display: none">
						下拉测试菜单三
					</div>
					<div id="info4" class="detail_info_same" style="display: none">
						下拉测试菜单四
					</div>
					<div id="info5" class="detail_info_same" style="display: none">
						下拉测试菜单五
					</div>
				</div>
			
			</div>

			<div class="kelei_down">
				<p>底部</p>
			</div>

		</div>
	</body>

</html>

1.12 CSS部分（Index.css）

	.kelei_main {
		width: auto;
		height: 750px;
		position: relative;
		border: 1px solid #96c2f1;
		background: #eff7ff;
		border-radius: 5px;
	}
	
	.kelei_top {
		width: 99%;
		height: 15%;
		z-index: 996;
		top: 0.5%;
		left: 0.5%;
		right: 0.5%;
		position: relative;
		border: 1px solid #9bdf70;
		background: #f0fbeb;
		border-radius: 5px;
	}
	
	.kelei_left {
		width: 24%;
		height: 72%;
		left: 0.5%;
		top: 1%;
		float: left;
		position: relative;
		border: 1px solid #bbe1f1;
		background: #f0fbeb;
		border-radius: 5px;
	}
	
	.kelei_center {
		width: 59%;
		height: 72%;
		top: 1%;
		left: 25%;
		position: relative;
		border: 1px solid #cceff5;
		background:#f0fbeb;
		border-radius: 5px;
	}
	
	.kelei_right {
		width: 15%;
		height: 72%;
		top: 1%;
		right: 0.5%;
		position: relative;
		float: right;
		border: 1px solid #cceff5;
		background: #f0fbeb;
		border-radius: 5px;
	}
	
	.kelei_down {
		z-index: 99;
		position: absolute;
		bottom: 0;
		right: 0.5%;
		left: 0.5%;
		top: 89%;
		width: 99%;
		height: 10%;
		border: 1px solid #cee3e9;
		background: #f0fbeb;
		border-radius: 5px;
	}
	
	.menu {
		position:relative;
		top: 46%;
		left: 30%;
		width: 80%;
		height: 40%;
		/*去除内联元素间隙*/
		font-size: 0;
		/*去掉ul自带的.格式*/
		list-style: none;
		padding: 0;
	}
	
	.menu li {
		/*将元素转换为行内块元素*/
		display: inline-block;
		width: 98px;
		height: 48px;
		border: 1px solid burlywood;
		font-size: 16px;
		/*将边框合并*/
		margin-right: -1px;
		text-align: center;
		line-height: 48px;
	}
	
	.menu a {
		font-family: "Microsoft YaHei UI";
		color:#A9A9A9;
		/*去掉a元素的下划线*/
		text-decoration: none;
	}
	/*鼠标位于元素位置时改变元素样式*/
	
	.menu li:hover {
		background-color:burlywood;
	}
	
	.menu a:hover {
		color: #fff;
	}
	
	.kelei_menu_row1 {
		position: relative;
		top: 5%;
		left: 10%;
		width: 80%;
	}
	
	.kelei_menu_row2 {
		position: relative;
		top: 10%;
		left: 10%;
		width: 80%;
	}
	
	.kelei_menu_row3 {
		position: relative;
		top: 15%;
		left: 10%;
		width: 80%;
	}
	
	.kelei_menu_row4 {
		position: relative;
		top: 20%;
		left: 10%;
		width: 80%;
	}
	
	
	.kelei_menu_name {
		width: 80%;
		height: 10%;
		text-align: center;
		line-height: 50px;
		background:darkkhaki;
		font-size: 20px;
	}
	
	.kelei_menu_value {
		width: 80%;
		height: 10%;
		display: none;
		background: none;
	}
	
	.kelei_menu_name:hover {
		background:darkkhaki;
		cursor: pointer;
	}
	
	.kelei_menu_row1:hover .kelei_menu_value {
		display: block;
	}
	.kelei_menu_row2:hover .kelei_menu_value {
		display: block;
	}
	.kelei_menu_row3:hover .kelei_menu_value {
		display: block;
	}
	.kelei_menu_row4:hover .kelei_menu_value {
		display: block;
	}
	
	.kelei_menu_value a {
		/* 子菜单属性设置*/
		display: block;
		text-decoration: none;
		height: 40px;
		text-align: center;
		line-height: 40px;
		/*子菜单字体颜色*/
		color:dimgray;
	}
	
	.kelei_menu_value a:hover {
		/*子菜单点击后属性设置*/
		background:darkgrey;
		color: black;
	}

 

1.13 JS部分（Index.js）

//切换选项卡功能
function showdiv(number){
    for(var i=1;i<=5;i++){
        if(i==number){
            var obj=document.getElementById("info"+number);
            obj.style.display="";
        }else{
            var obj=document.getElementById("info"+i);
            obj.style.display="none";
        }
    }
}

 

结语：

欢迎批评指正，后续会继续更新完善。

附：

Demo下载地址：https://github.com/laohudamaomi/keleiUI.git

老虎打猫咪
关注
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
HTML网页设计
08-04 1552
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6405
h5(html5)+css3+移动端前端 知识点详细总结
纯HTML (div+css)后台模板
11-07
纯HTML (div+css)后台模板,超全面的后台模板文件集合.
纯html后台模板
12-25
多个纯html+css+js可以，添加php，asp或者java开发后台
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
使用HTML+css3写的漂亮后台管理系统登录界面，界面非常美观，分格好看。拿来作为系统的登录界面非常合适
HTML5+CSS3后台管理登录模板
09-14
HTML5+CSS3后台管理登录模板
web（纯html）后台管理模板
05-18
几个实用的web后台管理模板，纯html语言，自己加上有关脚本语言，可以直接使用
非常帅气的后台管理前台框架bootstrp+HTML5+css3
02-05
【标题】：“非常帅气的后台管理前台框架bootstrp+HTML5+css3” 这个标题指出，这是一个设计精美的后台管理界面框架，它基于Bootstrap、HTML5和CSS3技术。Bootstrap是一个广泛使用的开源前端框架，它提供了丰富的...
后台模板HTML+CSS
11-27
总的来说，这个“后台模板HTML+CSS”资源为开发者提供了一个快速构建专业、美观的后台管理界面的基础框架。通过下载并研究这个模板，开发者可以学习到如何组织后台页面结构，如何应用CSS样式，以及如何整合图表和...
基于php+mysql+html+jQuery 养老院网站的设计与制作（前台展示+后台管理）.zip
03-17
综上所述，这个基于PHP+MySQL+HTML+jQuery的养老院网站设计与制作，是计算机专业课程设计或毕业设计的典型实例，它涵盖了Web开发中的核心技术，锻炼了学生的实际操作能力和团队协作能力，同时也体现了信息技术在养老...
css后台模板
01-21
css后台模板
30个html5 css后台模板
11-12
30个后台模板 建站必备！！！ html css js jquery easy-jq
1649-60套HTML5+CSS3后台管理登录模板
05-30
60套完整的模板满足各种对美观模板的需求，其中包括，电商。游戏开发。景区管理。银行系统等等多达60套你值得拥有
后台管理模板 纯静态html
11-08
一款纯静态的html模板，页面内容丰富，非常便于二次开发。
html+css一个后台静态页面布局设计
08-08
自己做html和css练习时做的一个后台管理系统的静态网页（无后台和js），做的比较注意一些细节，把很多细微的东西也做了，但是算不上完整，仅供各位学习参考！
html+css 简易后台布局结构
路克森的博客
01-02 943
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ ...
css后台页面布局技巧
weixin_34409822的博客
06-27 162
目标： 实现左边侧边栏固定，右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动，且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条，较多时可以滚动 code: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
漂亮的CSS后台管理登录界面
weixin_33836223的博客
11-13 834
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>漂亮的CSS后台管理登录界面_网页代码站(www.webdm.cn)</TITLE><style>BODY{PADDING-BOTTOM: 0p...
html+css+js在一个页面实现登录注册页面内部切换
最新发布
06-28
HTML、CSS和JavaScript都是网页制作的基础语言。...总之，在实现登录注册页面内部切换时，我们需要使用HTML和CSS布局，JavaScript实现交互功能和后台接口的调用。同时，需要对表单的验证和数据交互进行专门的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值