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

最新推荐文章于 2024-07-24 17:16:26 发布
最新推荐文章于 2024-07-24 17:16:26 发布
阅读量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

老虎打猫咪
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 3841
h5(html5)+css3+移动端前端 知识点详细总结
HTML5期末大作业：静态购物网站设计——静态购物网站模板11页(前台+后台) HTML+CSS+JS
11-25 2544
HTML5期末大作业：静态购物网站设计——静态购物网站模板11页(前台+后台) HTML+CSS+JS 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关
【期末网页设计】基于HTML学生信息管理系统网页项目的设计与实现
网页设计与制作 | HTML+CSS+JS
06-03 455
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
qq_365392777
10-24 852
????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介绍​​​​四、????网站演示​​​​五、⚙️ 网站代码​​​​????HTML结构代码​​​​六、???? 如何让学习不再盲目​​​​七、????更多干货​​一、????‍????网站题目????‍???? 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。...
【原创作品】html5+css3+js+bootstrap实现响应式Web前端科技商城网站(包含多个页面)
go
04-19 5060
前言 曾经，我也是一个设计并写页面的纯前端媛，学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了，这个是我大二写的静态页面，实现的是一个科技企业网站，包含主页及二级页面多个页面，登录注册用了点php+mysql实现，UI页面效果图是自己原创设计，哈哈，曾经学过设计，有点设计功底残存。废话不多说，看图~ 实现效果 目录前言实现效果一、网站需求分析二、效果图设计三、网站详细设计四、分工简介五、总结与心得 一、网站需求分析 （一）网站功能结构 随着网络技术的发展与互联网的普及，网站建
后台管理系统前端模板（html + CSS + JavaScript）
热门推荐
最爱喝椰奶
06-30 1万+
一个基于 vue 和 Layui 的控制面板 UI 框架，模板包含后台管理系统的常用页面。大家在开发时可以直接套用，非常方便。
html+css+javascript 大数据科技登录界面模板html
qq_365392777
08-19 7736
大数据科技登录界面模板html 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：蓝色科技风格后台登录框，科幻的网站后台系统登录界面模板下载, 文章页支持手机PC响应式布局。 2.网页作品编辑方面：此作品为登录页面设计题材，HTML+CS...
web前端期末大作业 基于HTML+CSS+JavaScript学生宿舍管理系统
HTML网页设计
08-04 2130
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML 5+CSS 3网站布局应用教程 (赵振方) 随书光盘 ​
randyjin6的博客
04-21 208
《HTML5+CSS3网站布局应用教程》全面介绍HTML 5与CSS 3进行Web设计的知识。全书由16章组成。主要内容包括：主流浏览器对HTML 5的支持情况、HTML 5与HTML4在语法上的区别、结构元素、表单与文件、图形绘制、多媒体播放。同时还详细介绍CSS 3的相关知识，包括新增选择器、文字与字体样式、颜色样式、盒样式、背景与边框样式、变形处理、多媒体和动画等内容。《HTML5+CSS3...
【网页设计】基于HTML+CSS+JavaScript学生网上报到系统响应式网站
HTML网页设计
05-23 587
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
非常帅气的后台管理前台框架bootstrp+HTML5+css3
02-05
【标题】：“非常帅气的后台管理前台框架bootstrp+HTML5+css3” 这个标题指出，这是一个设计精美的后台管理界面框架，它基于Bootstrap、HTML5和CSS3技术。Bootstrap是一个广泛使用的开源前端框架，它提供了丰富的...
后台模板HTML+CSS
11-27
总的来说，这个“后台模板HTML+CSS”资源为开发者提供了一个快速构建专业、美观的后台管理界面的基础框架。通过下载并研究这个模板，开发者可以学习到如何组织后台页面结构，如何应用CSS样式，以及如何整合图表和...
信息管理系统，后台信息管理模板，多页面链接，html+css+js，前端实战项目，适用于大作业，上机任务Javaweb,前端练习
03-18
本项目聚焦于一个基于HTML+CSS+JS的后台信息管理模板，旨在为JavaWeb开发人员提供一个前端实战平台，用于大作业、上机任务或日常练习。下面，我们将深入探讨这个系统的各项特性及其应用。 1. **多页面链接设计** ...
基于php+mysql+html+jQuery 养老院网站的设计与制作（前台展示+后台管理）.zip
03-17
综上所述，这个基于PHP+MySQL+HTML+jQuery的养老院网站设计与制作，是计算机专业课程设计或毕业设计的典型实例，它涵盖了Web开发中的核心技术，锻炼了学生的实际操作能力和团队协作能力，同时也体现了信息技术在养老...
模仿京东登录web源码（html+css）
10-12
本教程将基于提供的"模仿京东登录web源码（html+css）"进行深入讲解，帮助你了解HTML和CSS3在构建网页登录界面中的应用。 首先，我们要理解HTML（HyperText Markup Language）的作用，它是网页内容的结构标记语言，...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3280
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 986
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
最新发布
柯晓楠
07-24 696
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html+css+js在一个页面实现登录注册页面内部切换
06-28
### 回答1： HTML、CSS和JavaScript都是网页制作的基础语言。要在一个页面里实现登录注册页面内部切换，可以使用JavaScript实现。以下是实现步骤： 1. 在页面中创建两个DIV，一个DIV用于展示登录界面，另一个DIV用于展示注册界面。设置两个DIV的CSS属性display:none，使其一开始不显示。 2. 在页面中创建切换按钮，例如Tab，点击Tab时可以实现登录和注册界面的切换。每个Tab都绑定一个点击事件，事件触发时显示对应的DIV。具体实现可以使用JavaScript的DOM操作。 3. 对于登录和注册表单，可以设置表单的hidden属性为true，初始状态下不显示表单。当用户点击Tab时，根据Tab的ID，通过JavaScript修改对应表单的hidden属性为false，就可以显示表单了。 4. 对于表单提交，可以使用JavaScript监听提交事件，根据具体表单的提交事件进行表单验证和数据提交操作。表单验证可以使用JavaScript，也可以使用其他框架如jQuery Validate。 5. 在实现登录注册的功能时，还需要涉及到后台接口的调用，后台可以使用PHP、Java等语言实现，前台则可以使用AJAX等技术进行数据的异步交互。 总之，在实现登录注册页面内部切换时，我们需要使用HTML和CSS布局，JavaScript实现交互功能和后台接口的调用。同时，需要对表单的验证和数据交互进行专门的处理。 ### 回答2： 登录注册页面内部切换需要用到HTML、CSS、JS三种技术。其中HTML负责页面结构的搭建、CSS负责页面的样式设计、JS负责页面的交互操作。 首先，我们需要在HTML中定义两个div分别来代表登录和注册的页面。在每个div内部分别放置对应的输入框及按钮，并设置相应的ID和class，以便于后续通过JS操作页面结构。 接下来，使用CSS美化页面的样式，比如设置背景、字体、边框等等，以便于提高注册登录页面的用户体验。此时页面已经具备了切换注册登录的基本框架，但缺乏用户交互的功能。 最后，我们需要使用JS实现切换注册登录页面的功能。我们可以使用事件监听器，通过点击登录或注册按钮来切换页面。当用户点击注册按钮时，将登录页面隐藏，显示注册页面；当用户点击登录按钮时，将注册页面隐藏，显示登录页面。 具体来说，我们可以使用document.getElementByID()方法来选取元素，并通过style.display属性来实现元素的显示或隐藏。而切换页面的操作可以通过添加或删除元素的class来实现。此外，我们还需要为切换按钮添加事件监听器，当点击按钮时，执行相应的操作。 可以理解为，通过前端框架实现页面内的切换，让用户更加便捷的进行操作，提升用户的体验。以上就是如何在一个页面中实现登录注册页面内部切换的详细操作步骤。 ### 回答3： HTML、CSS和JS是网页开发中常用的三种语言，它们各自拥有不同的功能和作用。如果要在一个页面内实现登录注册页面的切换，我们需要使用这三种语言协同完成。 首先，我们可以使用HTML来构建整个页面的结构。考虑到登录注册表单可能较为繁琐，我们可以将其分别封装成两个不同的div容器，分别添加id属性。可以设置一个公共的包裹容器，用于包含这两个div容器，从而实现页面切换的效果。此时，页面的代码结构就已经建立起来。 接下来，我们需要使用CSS样式来美化页面。我们可以通过CSS设置两个div容器的样式，分别为login-container和register-container，通过调节它们的position属性和display属性，来实现页面的隐藏和显示。此外，在包裹容器上，可以添加一个类似于“switch-active”的类，来代表当前显示的是登录表单还是注册表单，从而在切换操作时更方便地修改包裹容器的样式。 最后，我们可以使用JavaScript来实现页面的切换交互动作。我们可以在页面中添加一个切换按钮，通过监听点击事件，来实现页面内容的切换。具体实现可以使用addEventListener方法来给切换按钮添加点击事件，然后通过调用getElementById方法，获取到包裹容器和登录、注册表单的div容器，来修改它们的位置和显示状态。 总的来说，通过HTML、CSS和JS的协同作用，我们可以方便地实现登录注册页面的内部切换，提高网页的交互性和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值