html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bunei.css">
</head>
<body>
<h1>部内动态</h1>
<div class="banner">
<div class="wrapper">
<ul>
<li><img src="bntupian/tu1.png" alt=""></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<a href="#" class="prev"><</a>
<a href="#" class="next"> ></a>
</div>
<div class="box">
<ul>
<li class="rj"><a href="#"><div class="nr1">软件部</div></a></li>
<li class="dk"><a href="#"><div class="nr2">电控部</div></a></li>
<li class="jx"><a href="#"><div class="nr3">机械部</div></a></li>
<li class="sj"><a href="#"><div class="nr4">设计部</div></a></li>
</ul>
</div>
<div class="hengxian"></div>
<div class="hengxian1"></div>
<div class="fanhui"><a href="#" >返回首页</a></div>
</body>
</html>
css代码：
body {
height: 1380px;
}
/* 标题 */
h1 {
text-align: center;
font-size: 48px;
line-height: 55px;
}
/* 轮播图设置 */
.banner {
position: relative;
height: 480px;
}
/* 版心设置 */
.wrapper {
position: absolute;
/* background-color: grey; */
width: 1064px;
height: 480px;
margin-left: 50%;
left:-532px;
}
/* 左右箭头设置 */
.prev,
.next {
margin-top: -25px;
width: 40px;
height: 50px;
/*设置背景透明*/
background-color: rgba(0,0,0,0.2);
font-size:25px;
color: white;
text-align: center;
line-height: 50px;
text-decoration: none;
top: 50%;
position: absolute;/* 绝对定位 */
}
.banner .prev {
left: 41px;
}
.banner .next {
right: 41px;
}
/* 版心放置图片设置 */
ul {
list-style: none;
}
/* 底部小圆点设置 */
ol {
list-style: none;
/*步骤8：设置导航条的宽度和高度*/
/* width: 200px;
height: 40px; */
bottom: 15px;
/*步骤10，设置ol的背景颜色*/
/* background-color: rgba(255,255,255,.2); */
/*步骤12：绝对定位*/
position: absolute;
left: 50%;
margin-left: -100px;
border-radius: 20px;
}
ol li {
float: left;
/*设置每个li标签的宽高*/
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(2555,255,255,0.4);
margin: 10px;
cursor: pointer;
}
.box {
margin-top: 90px;
height:543px;
}
.box ul {
list-style: none;
width: 1300px;
position: relative;
margin-left: 50%;
left: -680px;
}
.box ul li {
position: relative;
width: 317px;
height: 543px;
background-color: pink;
float: left;
margin-right: 5px;
margin-bottom: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.rj {
background: url(bntupian/t1.png) no-repeat top center;
background-size: 317px 543px;
}
.dk {
background: url(bntupian/t2.png) no-repeat top center;
background-size: 317px 543px;
}
.jx {
background: url(bntupian/t3.png) no-repeat top center;
background-size: 317px 543px;
}
.sj {
background: url(bntupian/t4.png) no-repeat top center;
background-size: 317px 543px;
}
.box ul li .nr1,
.box ul li .nr2,
.box ul li .nr3,
.box ul li .nr4 {
position: absolute;
width: 50px;
height: 181px;
margin-top: 50%;
top: 25px;
margin-left: 50%;
left: -25px;
font-style: normal;
font-weight: normal;
font-size: 48px;
display: table;
line-height: 60px;
color: #FFF9F9;
mix-blend-mode: screen;
border-radius: 15px;
}
.box ul li .nr1 {
background: #59A1E4;
}
.box ul li .nr2 {
background: #9077A9;
}
.box ul li .nr3 {
background: #A26F6F;
}
.box ul li .nr4 {
background: #7C90A3;
}
.hengxian,
.hengxian1 {
margin-top:64px;
height:10px;
}
.hengxian:after,
.hengxian1:after {
position: relative;
margin-left: 50%;
content:'';
display:block;
margin-top:10px;
border-bottom:2px solid grey;
}
.hengxian:after {
width: 414px;
left: -207px;
}
.hengxian1:after {
width: 196px;
left: -98px;
}
.fanhui {
margin-top: 56px;
width: 630px;
height: 50px;
background: #C4C4C4;
position: relative;
margin-left: 50%;
left: -315px;
font-style: normal;
font-weight: normal;
font-size: 28px;
line-height: 50px;
display: table;
text-align: center;
}
.fanhui a {
text-decoration: none;
color: #000000;
}
页面效果：