HTML5+css+jquery网页设计+加静态网页部署到服务器上

---

前言

这次我们有个两周的实训然后要求我们自己设计一个网页进行答辩，我是在csdn里面找了一下的，是借鉴这位大佬的，然后代码我就不附加了，给你们上图片看一下
我也放在了阿里云里面，用了我才发现阿里云不开会员的下载速度是真爽
网页代码下载地址

---

一、使用软件

我用的是HBuilder，有需要的小伙伴也可以自取
解压之后直接点击下图圈起来的程序就可以运行了

二、实际效果

这个main.html是主页面

主页面效果

是用了轮播图的效果，我只放了六张图，3秒换下一张或者自己点击切换

关于我们界面效果

个人博客页面效果

我是仿照博客园做的

收藏视频页面效果

点击登录跳转到下页面

再点击登录跳转到视频页面

点击上面的主站就回到了主页面

三、js实现的动态效果概述

1、下拉效果
鼠标放发现上面就会出来下拉菜单

//鼠标覆盖发现时
$(".nav-find").hover(function(){
	
	$(".find-menu").stop().slideDown(300);
},function(){
	//当鼠标移除时
	$(".find-menu").stop().slideUp(300)
})

2.鼠标点击搜索栏，搜索框变色且出现下拉菜单

//鼠标覆盖搜索框
//JQuery的hover()：第一个函数是覆盖时执行的  第二个函数是移出时执行的
$(".topbar-cart").hover(function(){
	//显示区域
	$(".menu-content").stop().slideDown(300);
	//改变字体颜色
	$(".cart-mini").css({"color":"#ff6700","background-color":"#fff"})
	//更换亮色图片   改变属性：attr()
	$(".cart-mini img").attr("src","img/ep/up2.png")
},function(){
	$(".menu-content").stop().slideUp(300)
	//改变字体颜色
	$(".cart-mini").css({"color":"#ffffff","background-color":"#179fff"})
	//更换亮色图片   改变属性：attr()
	$(".cart-mini img").attr("src","img/ep/up0.png")
})

3.实现手风琴菜单
鼠标相对移动到圈起来的地方出现的效果

//展示手风琴效果
//鼠标覆盖时
$(".header-nav a").mouseenter(function(){
	//展示大的手风琴菜单 div
	$(".header-nav-menu").stop().slideDown(300)
	//获取鼠标覆盖a标签的下标
	var index = $(".header-nav a").index($(this))
	//根据index显示对应的ul(children-list)
	//eq(下标):控制让第几个显示
	//siblings():获取当前标签的所有同级标签(不包含当前标签的)
	$(".header-nav-menu .children-list").eq(index).show().siblings().hide()
})
//鼠标移出时要隐藏
$(".header-nav-menu").mouseleave(function(){
	//隐藏大的手风琴菜单 div
	$(".header-nav-menu").stop().slideUp(300)
})
//离开时也隐藏
$(".site-header").mouseleave(function(){
	//隐藏大的手风琴菜单 div
	$(".header-nav-menu").stop().slideUp(300)
})

4.轮播图效果
页面在固定时间实现图片的淡入和淡出
并且可以手动切换图片

//轮播图效果
//获取所有的轮播图图片
var imgList = $(".swiper-wrapper img");
//获取所有的轮播图按钮
var aList = $(".swiper-pagination a")
//定义下标变量，存储当前要显示图片的下标
var index = 0;
//默认显示第一章图片
imgList.eq(0).show()
//显示第一个圆圈变色
aList.eq(0).css("background-color","purple")
var timer = null
autoMove()
function autoMove(){
	//使用定时器
	timer = setInterval(function(){
		//淡出当前图片
		imgList.eq(index).fadeOut("slow")
		//index自增
		index++;
		if(index>imgList.length-1){
			//index最大值为4，超过时重新设置为0
			index = 0
		}
		//淡入下一章
		imgList.eq(index).fadeIn("slow")
		//当前圆圈变紫色，其余变回灰色
		aList.eq(index).css("background-color","purple").siblings().css("background-color","rgba(0,0,0,.4)")
	},3000)
}

//鼠标点击按钮实现图片切换
$(".swiper-pagination a").click(function(){
	//阻止默认事件跳转
	event.preventDefault()
	//获取当前点击圆圈的下标
	var currentIndex = $(".swiper-pagination a").index($(this))
	//淡出之前的图片
	imgList.eq(index).fadeOut("slow");
	//淡入当前点击的图片
	imgList.eq(currentIndex).fadeIn("slow");
	//将圆圈也立马变色
	aList.eq(currentIndex).css("background-color","purple").siblings().css("background-color","rgba(0,0,0,.4)")
	index = currentIndex
})
//给swiper-wrapper添加鼠标覆盖事件
$(".swiper-wrapper").mouseenter(function(){
	clearInterval(timer);
})
$(".swiper-wrapper").mouseleave(function(){
	//继续轮播
	autoMove();
})

四、将网页部署在服务器上

购买服务器和域名

这个我是买的最基础的，因为我也是刚了解，不是很懂

我买的时最基础的，系统在上图
然后记得自己选购域名，看自己喜好选，选购完成之后就是去备案，备案大概需要一到两周吧，具体看你们当地审核快慢。

域名解析

然后保存即可

SSL证书申请加下载

申请通过之后


即可以下载你所需要的证书，这里我只使用了iis服务

远程连接桌面

密码也是你服务器的登录密码

点击确定之后即可连接

配置服务器

服务器配置
打开控制面版选择管理工具


iis证书添加

右键网站选择添加网站


在默认文档里面选择添加你需要打开的html文件并置顶即可在浏览器搜索你的网站了，目前只支持静态操作，似乎不能有js文件，等我后面会了再分享给大家。

总结

上述页面布局和动态效果的实现都是实训学习到的，基本是借鉴小米、博客园加b站的，仿的不是很好。这次实训也收获挺多，我得下个目标是创造出自己的一个网站，能够做到真正的做到我想实现的操作