案例：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;
}文件结构
对于其中的内容可添加，（可在最后一个图片后边添加一个图片中间的内容为加好，点击最后的加号，上传图片，便于管理）
备注：对于文中涉及到的图片来源于网络，如有不便使用，请告知，将及时删除
标签：13,img,..,url,image,jpg,background,2023 From： https://blog.51cto.com/tianxian/7465311