2023年9月13日

原创

天线_m 2023-09-13 22:32:48 博主文章分类：HTML界面 ©著作权

文章标签 html css 侧边栏 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者天线_m的原创作品，请联系作者获取转载授权，否则将追究法律责任

2023年9月13日_css

案例：2023年9月13日

图片排版，集中排版，分散排版，侧边导航

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航页</title>
		<link rel="stylesheet" href="./css/index_style.css">
	</head>
	<body>
		<div id="dh">
			<span>侧边栏导航</span>
			<ol>
				<li><a href="#s1">001</a></li>
				<li><a href="#s2">002</a></li>
			</ol>
		</div>
		<div id="main">
			<span>2023年9月13日</span>
			
			<br>
			
			<span id="s1">001</span>
			
			<ul class="m1">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
			<ul class="m1">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
			<ul class="m1">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
			<ul class="m1">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
			<ul class="m1">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
		<span id="s2">002</span>
			<ul class="m2">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
			<ul class="m2">
				<li class="L1"></li>
				<li class="L2"></li>
				<li class="L3"></li>
				<li class="L4"></li>
				<li class="L5"></li>
				<li class="L6"></li>
				<li class="L7"></li>
			</ul>
		</div>
	</body>
</html>

CSS

#main{
	width: 1200px;
	margin: 0 auto;
	background-color: white;
}
body{
	background-color: antiquewhite;
}
*{
	margin: 0;
	padding: 0;
}
ul{
	background-color: aqua;
	overflow: hidden;
	list-style: none;
}
ul.m1 > li{
	width: 200px;
	height: 100px;
	/* background-color: blue; */
	float: left;
	margin: 20px;
}
li{
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.L1{
	background-image: url('../img/1.jpg');
}
.L2{
	background-image: url('../img/2.jpg');
}
.L3{
	background-image: url('../img/3.jpg');
}
.L4{
	background-image: url('../img/4.jpg');
}
.L5{
	background-image: url('../img/5.jpg');
}
.L6{
	background-image: url('../img/6.jpg');
}
.L7{
	background-image: url('../img/7.jpg');
}
ul.m2{
	margin: 30px 0;
}
ul.m2 > li{
	float: left;
	width: 300px;
	height: 200px;
}
#dh{
	position: fixed;
	left: 30px;
	top: 50px;
}
#dh > ol{
	margin: 20px;
}