从头做图书馆管理系统课设，css3轮播图，导航栏，持续更新~（前端篇1）

主要包括顶部菜单栏，上bannar图，导航栏，轮播图，在代码编写过程中一定要注意代码规范，千万要写注释，不然自己写着写着自己都忘了哪里是哪里，所有的代码都是手写的最基本的代码没有引入前端框架以便大家理解。

首先是顶部菜单栏：

首先要让顶部固定在浏览器上方不论滚到哪里都在顶部定位采用position: fixed;

底部阴影效果box-shadow:0px 15px 10px -15px #000;

欢迎文字采position: absolute; left 和top和rigth调节

<!-- 顶部导航 -->
<div class="topNavigation">
		<!-- 顶部菜单栏 -->
		<div class="topMenu">
			<div class="welcomeText">
				欢迎使用大学图书馆综合管理系统!
			</div>
			<div class="userInfo">
				欢迎
				<a href="http://www.baidu.com">黄小明</a>
				&nbsp
				<a href="#">注销</a>
			</div>
		</div>
</div>

/*顶部导航样式*/
.topMenu{
	position: fixed;
	background-color: white;
	width: 100%;
	height: 30px;
	box-shadow:0px 15px 10px -15px #000;
}
.topMenu .welcomeText{
	position: absolute;
	left: 10px;
	top: 8px;
}
.topMenu .userInfo{
	position: absolute;
	right: 20px;
	top: 8px;
}

接下来是顶部图

tips：一定要在bannar上方添加一个空div 不然顶图会被覆盖一部分

<!-- 顶部banner -->
		<div style="height: 30px;">
			
		</div>
		<div class="bannar">
			<img src="img/bannar.png">
		</div>

/*顶图*/
.bannar{

	background-color: red;
	width: 100%;
	height: 100px;
}

导航栏比较复杂大家可以百度一个自己喜欢的框架，这里我用了一个比较简单的，主要就是利用ul标签和li标签和a标签的组合，去掉原有样式并自己添加需要的样式

tips 这里为了导航栏的居中效果采用了margin：0px auto；这里有个坑，一定要给要使用的元素加上宽度！

<div class="navigation">
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">借书</a>
				</li>
				<li>
					<a href="">选座</a>
				</li>
				<li>
					<a href="">关于我们</a>
				</li>
			</ul>
		</div>

/*导航栏*/
.navigation {
	width: 100%;
	height: 50px;
	background-color: #0EE848;	 
}
.navigation ul {
	/*居中*/
	margin: 0px auto;
	padding: 0;
	width: 1000px;
	/*去掉li的样式*/
	list-style:none;
	 
}
.navigation a{
	 color:white;
	 font-size: 20px;
	 /*去a标签的下划线*/
	 text-decoration: none;
}
.navigation ul li{
	float:left;
    width:100px;
    height:50px;
    text-align:center;
    background:#0EE848;
    line-height:50px;
    color:#FFF;
}
/*css3的鼠标经过效果*/
.navigation ul li:hover{
    background:#15FFF8;
    text-decoration: underline;
}

轮播图

轮播图我采用了css3的简单写法，毕竟不是实际项目，手写一个过于复杂的代码没有必要，不需要自己造轮子，实际项目可以采用前端框架

<div class="slide" id="container">
			<div id="photo">
        		<img src="img/slide1.png" />
        		<img src="img/slide2.png" />
        		<img src="img/slide3.png" />
    		</div>
</div>

/*轮播图*/

#container {
	width:  100vw;
	height: 400px;
	overflow: hidden;
}
 
#photo {
	width: 300vw;
	animation: switch 5s ease-out infinite;
}
 
#photo > img {
	float: left;
	width: 100vw;
	height: 400px;
}
 
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -100vw;
	}
	70%, 100% {
		margin-left: -200vw;
	}
}

附上完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>图书馆综合管理系统</title>
	<script type="text/javascript">document.write('<link rel="stylesheet" type="text/css" href="css/style.css?timestamp='+new Date().getTime()+'" >');</script>
	
</head>
<body>
		<!-- 顶部导航 -->
	<div class="topNavigation">
		<!-- 顶部菜单栏 -->
		<div class="topMenu">
			<div class="welcomeText">
				欢迎使用大学图书馆综合管理系统!
			</div>
			<div class="userInfo">
				欢迎
				<a href="http://www.baidu.com">黄小明</a>
				&nbsp
				<a href="#">注销</a>
			</div>
		</div>
		<!-- 顶部banner -->
		<div style="height: 30px;">
			
		</div>
		<div class="bannar">
			<img src="img/bannar.png">
		</div>
		<div class="navigation">
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">借书</a>
				</li>
				<li>
					<a href="">选座</a>
				</li>
				<li>
					<a href="">关于我们</a>
				</li>
			</ul>
		</div>
		<div class="slide" id="container">
			<div id="photo">
        		<img src="img/slide1.png" />
        		<img src="img/slide2.png" />
        		<img src="img/slide3.png" />
    		</div>
		</div>
	</div>
	<div class="contain">
		<div >
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
	</div>
	
	
	
</body>
</html>

css：

/*全局样式*/
body{ 
	font-family:"微软雅黑";
	font-size:12px;
	margin:0px;
	padding:0px; 
	overflow-x:hidden;
}
/*顶部导航样式*/
.topMenu{
	position: fixed;
	background-color: white;
	width: 100%;
	height: 30px;
	/*background-color: #9e9e9e5e;*/
	box-shadow:0px 15px 10px -15px #000;
    z-index: 100px;
}
.topMenu .welcomeText{
	position: absolute;
	left: 10px;
	top: 8px;
}
.topMenu .userInfo{
	position: absolute;
	right: 20px;
	top: 8px;
}
/*顶图*/
.bannar{

	background-color: red;
	width: 100%;
	height: 100px;
}
/*导航栏*/
.navigation {
	width: 100%;
	height: 50px;
	background-color: #0EE848;	 
}
.navigation ul {
	margin: 0px auto;
	padding: 0;
	width: 1000px;
	
	list-style:none;
	 
}
.navigation a{
	 color:white;
	 font-size: 20px;
	 text-decoration: none;
}
.navigation ul li{
	float:left;
    width:100px;
    height:50px;
    text-align:center;
    background:#0EE848;
    line-height:50px;
    color:#FFF;
}
.navigation ul li:hover{
    background:#15FFF8;
    text-decoration: underline;
}
/*轮播图*/

#container {
	width:  100vw;
	height: 400px;
	overflow: hidden;
}
 
#photo {
	width: 300vw;
	animation: switch 5s ease-out infinite;
}
 
#photo > img {
	float: left;
	width: 100vw;
	height: 400px;
}
 
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -100vw;
	}
	70%, 100% {
		margin-left: -200vw;
	}
}
/*内容*/
.contain{
	background-color: red;
	min-height: 1000px;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
}

本来想写的更细一点，但是觉得把所有前端知识展开讲不现实，所以用到的相关内容不了解的可以自行百度或者留言交流

从头做图书馆管理系统课设，css3轮播图，导航栏，持续更新~（前端篇1）

猜你喜欢