HTML+CSS 开发简单组件(三)

最新推荐文章于 2024-04-02 15:50:49 发布

易萌教主

最新推荐文章于 2024-04-02 15:50:49 发布

阅读量212

点赞数 2

分类专栏：原生组件开发文章标签： html css js

本文链接：https://blog.youkuaiyun.com/tian_yanT/article/details/118684244

版权

原生组件开发专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个后台布局，包括自定义导航栏、响应式布局和可交互菜单。通过flexbox实现布局，并使用数据属性控制导航项的行为，适合初学者理解前端开发实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS 开发简单组件(三)

手写一个后台布局

先上目录结构

项目根路径
- page
  - 1.html
  - 2.html
  - 3.html
  - 4.html
  - 5.html
- index.js
- index1.html
- theme-default.css

废话不说，直接上代码

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layout布局1</title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2666696_ohyudh5wuu9.css"/>
		<!-- 设定阿里矢量图标 -->
		<link rel="stylesheet" type="text/css" href="theme-default.css"/>
		<!-- 添加样式表 -->
	</head>
	<body>
		<div class="layout">
			<!-- 设定一个总体的布局包围盒 -->
			<div class="nav-box">
				<!-- 设定一个左侧的包围盒，包含logo+导航菜单 -->
				<div class="logo">
					<span>后台布局</span>
				</div>
				<!-- 设定一个logo，该logo是文字logo，可自行替换 -->
				<div class="nav-list">
					<!-- 设定一个导航菜单包围盒 -->
					<ul>
						<!-- 定义一个无序列表，用作存放导航项目 -->
						<li class="active">
							<!-- 定义一个表项 -->
							<div class="simple-line" data-router="1.html">
								<!-- 定义一个简单链接，data-router中的内容就是要跳转的位置 -->
								<i class="iconfont">&#xe600;</i>
								<!-- 定义一个图标，可以用自己的库中的图标 -->
								<span class="line-title">导航项目1</span>
								<!-- 定义一个span，用来描述该表项是干什么用的 -->
							</div>
						</li>
						<li>
							<div class="simple-line" data-router="2.html">
								<i class="iconfont">&#xe7cc;</i>
								<span class="line-title">导航项目2</span>
							</div>
						</li>
						<li>
							<div class="simple-line" data-router="3.html">
								<i class="iconfont">&#xe724;</i>
								<span class="line-title">导航项目3</span>
							</div>
						</li>
						<li>
							<div class="simple-line" data-router="4.html">
								<i class="iconfont">&#xe60a;</i>
								<span class="line-title">导航项目4</span>
							</div>
						</li>
						<li>
							<div class="simple-line" data-router="5.html">
								<i class="iconfont">&#xe606;</i>
								<span class="line-title">导航项目5</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="main-layout">
				<!-- 定义主体布局 -->
				<div class="header">
					<!-- 定义顶部栏 -->
					<div class="buttons-box">
						<!-- 定义一个按钮组包围盒 -->
						<a href="javascript:;" id="shrink"><i class="iconfont">&#xe612;</i></a>
						<!-- 定义一个a链接，设置为收缩/弹出的按钮 -->
					</div>
					<div class="tool-box">
						<!-- 设定一个快捷导航工具条包围盒 -->
					</div>
				</div>
				<div class="content">
					<!-- 设定正文包围盒 -->
					<object data="page/1.html" type="text/html"></object>
					<!-- object和iframe同理 -->
				</div>
			</div>
		</div>
	</body>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入js -->
</html>

css部分

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "comic sans ms";
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* 设置基本类型 */
}
a{
	text-decoration: none;
	/* 取消超链接下划线 */
}
ul>li{
	list-style: none;
	/* 清除列表前的小圆点 */
}
body{
	width: 100vw;
	height: 100vh;
	/* 设定页面尺寸 */
}
.layout{
	--nav-width: 200px;
	/* 定义变量 */
	width: 100%;
	height: 100%;
	/* 定义整体布局尺寸与body持平 */
	display: flex;
	/* 设定flex布局 */
}
.nav-box{
	width: var(--nav-width);
	/* 使用变量中的宽度 */
	height: 100%;
	/* 设定高度100% */
	background-color: #001529;
	/* 设置背景颜色 */
	transition-duration: .4s;
	/* 设定一个过渡效果 */
}
.logo{
	width: 100%;
	height: 60px;
	/* 设定宽高 */
	padding: 12px 24px;
	/* 设定一个内边距 */
}
.logo>span{
	width: 100%;
	height: 100%;
	/* 设定logo文字框尺寸 */
	background-color: rgba(255,255,255,.25);
	/* 设定背景颜色 */
	display: block;
	/* 设定快捷元素 */
	text-align: center;
	/* 文字居中 */
	line-height: 36px;
	overflow: hidden;
	/* 超出隐藏 */
	color: #F0F0F0;
	/* 设定文字颜色 */
}
.nav-list{
	width: 100%;
	height: calc(100% - 60px);
	/* 设定导航列表的尺寸 */
	overflow-y: auto;
	/* 设定纵向超出时显示滚动条 */
}
.nav-list>ul{
	width: 100%;
	height: 100%;
	/* 设定列表框尺寸100% */
}
.nav-list>ul>li{
	width: 100%;
	height: 56px;
	/* 设定单项尺寸 */
	padding: 8px 24px;
	/* 设定一个内边距 */
}
.nav-list>ul>li>.simple-line{
	width: 100%;
	height: 100%;
	/* 设定单项包围盒尺寸 */
	display: flex;
	/* 设定flex布局 */
	cursor: pointer;
	/* 设定鼠标指针为手型 */
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	/* 设定文字样式 */
}
.nav-list>ul>li>.simple-line:hover{
	color: #FFFFFF;
}
.nav-list>ul>li.active{
	background-color: #1890ff;
	color: #FFFFFF;
}
.nav-list>ul>li>.simple-line>i.iconfont{
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设定flex布局,水平垂直居中 */
	width: 40px;
	height: 40px;
	/* 设定图标尺寸 */
}
.nav-list>ul>li>.simple-line>span.line-title{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* 设定flex布局,垂直居中,水平居左 */
	width: calc(100% - 56px);
	height: 100%;
	/* 设定尺寸 */
	overflow: hidden;
	/* 设定超出后隐藏 */
}
.main-layout{
	width: calc( 100% - var(--nav-width) );
	/* 设定布局宽度为100%-导航包围盒宽度 */
	height: 100%;
	/* 高度设定为100% */
}
.header{
	width: 100%;
	height: 60px;
	/* 设定顶部尺寸 */
	padding: 0 18px;
	/* 设置内边距 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 设定flex布局,垂直居中,水平分散 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
	/* 给一个阴影 */
}
.buttons-box{
	height: 42px;
	/* 设定高度,宽度自适应 */
	display: flex;
}
.buttons-box>a{
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设定flex布局,水平垂直居中 */
	width: 42px;
	height: 42px;
	/* 设定按钮尺寸 */
	margin-right: 12px;
	/* 给按钮一个向右的外边距 */
	color: #001529;
}
.buttons-box>a>i.iconfont{
	width: 100%;
	height: 100%;
	/* 设定尺寸 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设定flex布局,水平垂直居中 */
	font-size: 24px;
	/* 设定图标大小 */
}
.tool-box{
	/* 这里就是设定右上方的样式,这里不列举,后面会有专门的组件 */
}
.content{
	width: 100%;
	height: calc(100% - 60px);
	/* 设定尺寸 */
	background-color: #f0f2f5;
	/* 设置背景颜色 */
	padding: 24px;
	/* 设置一个内边距 */
}
.content>object{
	background-color: #FFFFFF;
	/* 设定背景颜色 */
	width: 100%;
	height: 100%;
	/* 设定尺寸 */
	border-radius: 6px;
	/* 添加圆角度 */
	box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
	/* 添加阴影突显 */
}

js部分

;(doc=>{
	const btnShrink = doc.querySelector("#shrink");
	// 获取顶部按钮组中收缩按钮
	const layout = doc.querySelector(".layout");
	// 获取整体布局
	const navBox = doc.querySelector(".nav-box");
	btnShrink.addEventListener("click",e=>{
		if(navBox.clientWidth == 200){
			layout.style.setProperty("--nav-width","64px");
		}else{
			layout.style.setProperty("--nav-width","200px");
		}
	});
	// 为收缩按钮添加单击监听事件
	const btnRouters = doc.querySelectorAll(".simple-line");
	// 获取所有简单链接元素
	const object = doc.querySelector("object");
	// 获取跳转元素
	btnRouters.forEach(item=>{
		// 遍历所有简单链接
		item.addEventListener("click",e=>{
			// 为每一个简单链接添加单击监听事件
			btnRouters.forEach(btn=>{
				// 重新遍历所有简单链接
				if(btn.parentNode.className.indexOf("active")!==-1){
					// 如果该简单链接类名中含有"active"
					btn.parentNode.classList.remove("active");
					// 清除该类名
				}
			});
			// 先将所有样式清空
			item.parentNode.classList.add("active");
			// 再给当前被点击的元素添加"acitve"类名
			object.data = "page/" + item.dataset.router;
			// 跳转到对应页面
		});
	});
})(document);

效果图

在这里插入图片描述