Java教程

部内动态页面

本文主要是介绍部内动态页面，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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">&lt;</a> 
			<a href="#" class="next"> &gt;</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;
}

页面效果：

 

 

 

这篇关于部内动态页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航