html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="idx.css">
</head>
<body>
<h1>最新动态</h1>
<div class="banner">
<div class="wrapper">
<ul>
<li><a href="#"></a></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">
<!-- hd头部 -->
<div class="hd">
<h2>实验室动态</h2>
</div>
<!-- bd内容 -->
<div class="bd"><ul>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
</ul></div>
</div>
<!-- 招新动态 -->
<div class="box1">
<!-- hd1头部 -->
<div class="hd1">
<h2>招新动态</h2>
</div>
<!-- bd1内容 -->
<div class="bd1"><ul>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
</ul></div>
</div>
<!-- 近日参加 -->
<div class="box2">
<!-- hd2头部 -->
<div class="hd2">
<h2>近日参加</h2>
</div>
<!-- bd2内容 -->
<div class="bd2"><ul>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
<li>
<img src="tupian/微信图片_20220213105103.png" alt="">
<h4>这里是动态1。</h4>
<h5>2022.2.10</h5>
</li>
</ul></div>
</div>
<div class="hengxian"></div>
<div class="hengxian1"></div>
<div class="fanhui"><a href="#" >返回首页</a></div>
</body>
</html>
css代码:
body {
height:4000px;
}
/* 标题 */
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;
/* 背景 */
background: url(tupian/tu1.png) no-repeat top center;
}
/* 版心放置图片设置 */
.wrapper ul {
list-style: none;
}
/* 左右箭头设置 */
.prev,
.next {
margin-top: -25px;
width: 40px;
height: 50px;
/*设置背景透明*/
background-color: rgba(0,0,0,0.2);
font-size:25px;
color: black;
text-align: center;
line-height: 50px;
text-decoration: none;
top: 50%;
position: absolute;/* 绝对定位 */
}
.banner .prev {
left: 41px;
}
.banner .next {
right: 41px;
}
/* 底部小圆点设置 */
.banner ol {
list-style: none;
/*设置导航条的宽度和高度*/
/* width: 200px;
height: 40px; */
bottom: 15px;
/*设置ol的背景颜色*/
/* background-color: rgba(255,255,255,.2); */
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -100px;
border-radius: 20px;
}
.banner 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: 64px;
height: 880px;
}
.hd h2 {
text-indent: 0.5em;
letter-spacing: 0.02em;
font-size: 36px;
line-height: 41px;
}
.hd:after {
content:'';
display:block;
width:400px;
margin-top:-20px;
border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
.bd ul {
list-style: none;
width: 1500px;
position: relative;
margin-left: 50%;
left: -680px;
}
.bd ul li {
width: 317px;
height: 397px;
background-color: white;
float: left;
margin-right: 5px;
margin-bottom: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd ul li img {
width:100%;
}
/* 盒子里的文字内容 */
.bd ul li h4,
.bd ul li h5 {
margin:12px 12px ;
}
.bd ul li h4:after {
text-align: center;
content:'';
display:block;
width:294px;
margin-top:10px;
border-bottom:2px solid grey;
}
/* 招新动态 */
.box1 {
margin-top: 64px;
height: 465px;
}
.hd1 h2 {
text-indent: 0.5em;
letter-spacing: 0.02em;
font-size: 36px;
line-height: 41px;
}
.hd1:after {
content:'';
display:block;
width:400px;
margin-top:-25px;
border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
.bd1 ul {
list-style: none;
width: 1500px;
position: relative;
margin-left: 50%;
left: -680px;
}
.bd1 ul li {
width: 317px;
height: 397px;
background-color: white;
float: left;
margin-right: 5px;
margin-bottom: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd1 ul li img {
width:100%;
}
/* 盒子里的文字内容 */
.bd1 ul li h4,
.bd1 ul li h5 {
margin:12px 12px ;
}
.bd1 ul li h4:after {
text-align: center;
content:'';
display:block;
width:294px;
margin-top:10px;
border-bottom:2px solid grey;
}
/* 近日参加 */
.box2 {
margin-top: 64px;
height: 880px;
}
.hd2 h2 {
text-indent: 0.5em;
letter-spacing: 0.02em;
font-size: 36px;
line-height: 41px;
}
.hd2:after {
content:'';
display:block;
width:400px;
margin-top:-20px;
border-bottom:2px solid grey;
}
/* 内容 */
/* 把li的父亲ul 修改得足够宽一行能装下4个盒子就不会换行 */
.bd2 ul {
list-style: none;
width: 1500px;
position: relative;
margin-left: 50%;
left: -680px;
}
.bd2 ul li {
width: 317px;
height: 397px;
background-color: white;
float: left;
margin-right: 5px;
margin-bottom: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);}
/* 盒子里的图片 */
.bd2 ul li img {
width:100%;
}
/* 盒子里的文字内容 */
.bd2 ul li h4,
.bd2 ul li h5 {
margin:12px 12px ;
}
.bd2 ul li h4:after {
text-align: center;
content:'';
display:block;
width:294px;
margin-top:10px;
border-bottom:2px solid grey;
}
.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;
}
页面展示: