微商管理系统---所需静态页面的绘制：下拉导航栏、图片轮播效果、页面定时刷新

本文链接：https://blog.youkuaiyun.com/guangluo/article/details/103268750

整体认知

前端这一块，感觉除非你是专业学前端，或者是前端工程师，必须和这些东西打交道外，没必要按着死扣。因为现在是开源的世界么，所以在大致了解基本的用法之后去博客上搜一下某页面的web绘制，也能够改出符合自己要求的效果挺好的页面。因为这一块相比后端来说感觉难度并不大，而且甚至是没有编程经验的同学都能跟着资料很容易的学；但是不得不承认，前端的东西确实很多，能够熟练应用进行网页绘制的工程师也很值得尊敬。

他山之石，可以攻玉

对现在完全没接触过前端，想要全面了解一下的同学，推荐一个优质的资源：B站尚硅谷前端开发教程，这个是HTML和CSS的教程，还有这是JS的教程。

很多时候我们只是代码的搬运工，因为当前实力不够，而且没有多余的时间或者精力，更多的是如果重点不是在这里的话（好能找理由，哈哈~），整体学习肯定不现实，我的话大多就会这样做了。

在这里插入图片描述

如果想要获得这种主体页面展示效果的话，点击这里

下拉栏展示

	<style type="text/css">
		#nav ul {
			padding-left: 0;
			list-style: none;
			margin-left: 0;
			list-style: none;
		}

		#nav ul li {
			float: left;
			line-height: 20px;
			text-align: center;
			position: relative;
			padding-right: 15px;
		}

		#nav ul li a {
			text-decoration: none;
			color: darkcyan;
			display: block;
			padding: 0px 10px;
		}

		#nav ul li a:hover {
			color: #FFF;
			background: darkgray;
		}

		#nav ul li ul {
			position: absolute;
			display: none;
		}

		#nav ul li ul li {
			float: none;
			line-height: 20px;
			text-align: left;
		}

		#nav ul li ul li a {
			width: 100%;
		}

		#nav ul li ul li a:hover {
			background-color: #06F;
		}

		#nav ul li:hover ul {
			display: block;
		}
	</style>

<body>
	<!-- 下顶部 -->
	<div id="nav" class="nav_left">
		<ul>
			<li><a href="#">Mate系列</a>
				<ul>
					<li><a href="Mate30系列.html">Mate30系列</a></li>
					<li><a href="Mate20系列.html">Mate20系列</a></li>
					<li><a href="Mate10系列.html">Mate10系列</a></li>
				</ul>
			</li>
			<li><a href="#">P系列</a>
				<ul>
					<li><a href="P30系列.html">P30系列</a></li>
					<li><a href="P20系列.html">P20系列</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>

这个就能做出基本的下拉导航栏效果，到时扩展一下再换上自己的内容稍加修改即可用。

图片轮播

想法是将图片的名称从0开始，将图片按所想要的播放顺序来命名，比如：我想要先播优惠图片，再播限时图片，就可以将优惠图片命名为1.***，限时图片命名为 2.***。隔一段时间将展示区域所要展示的图片名称加一即可。不过这种方法仅仅适用于同一类的照片展示，比如都是png/jpg/…

<script type="text/javascript">
		function init() {
			window.setInterval(changeImg, 5000);
		}
		var index = 1;
		//实现将img文件夹下名称为1/2/3/4的图片按每个5s顺序轮播一张
		function changeImg() {
			myimg = document.getElementById("myimg"); //JS方法获取到html页面元素之后更改它的图片地址
			index++;
			if (index > 4)
				index = 1;
			myimg.src = "img/" + index + ".jpg";  //要是png图片的话就换成png
		}
	</script>

body中的东西很简单

 <img src="img/1.jpg" id="myimg" />

最后在body标签中加上 οnlοad=“init()” 并用CSS渲染一下即可。

页面定时刷新

最普遍的三种网页定时刷新方式

普通表单格式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>信息填报系统</title>
	<style type="text/css">
		body{ text-align:center;}
	</style>
</head>

<p>Welcome!</p>
<hr />

<body>
	<h1 style="text-align:center">用户登录界面</h1>
	<!-- 192.168.43.151 -->
	<div class="div">
		<form id="form1" accept-charset="UTF-8" action="http://192.168.43.151:3000/loadtable/" method="post" οnsubmit="return checkin()">
			账号:&nbsp;<input type="text" name="id" value="" required="required" style="width:260px; height:30px;" />
			<br><br>

			密码:&nbsp;<input type="password" name="password" value="" required="required" style="width:260px; height:30px;" />
			<br><br>
			<input type="submit" name="btn" value="提交" onclick=" return checkin() " style="height:40px;width:80px;display:inline-block;">
		</form>
	</div>
</body>
</html>