部内动态页面

最新推荐文章于 2024-07-24 20:21:31 发布

begin 专注

最新推荐文章于 2024-07-24 20:21:31 发布

阅读量215

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_61718994/article/details/123036102

版权

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"><div class="nr1">软件部</div></li>
				<li class="dk"><div class="nr2">电控部</div></li>
				<li class="jx"><div class="nr3">机械部</div></li>
				<li class="sj"><div class="nr4">设计部</div></li>
			</ul>
		</div>
		<div class="hengxian"></div>
		<div class="hengxian1"></div>
		<div class="fanhui"><a href="#" >返回首页</a></div>
	</body>
</html>

css代码：

body {
	height: 1280px;
}
/* 标题 */
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;
}
/* 左右箭头设置 */
.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;
}

页面成果展示：

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
部内动态页面

html代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="bunei.css"> </head> <body> <h1>部内动态</h1> <div class="banner">
复制链接

扫一扫