文章目录
- 前言
- 一、使用软件
- 二、实际效果
- 主页面效果
- 关于我们界面效果
- 个人博客页面效果
- 收藏视频页面效果
- 三、js实现的动态效果概述
- 四、将网页部署在服务器上
- 购买服务器和域名
- 域名解析
- SSL证书申请加下载
- 远程连接桌面
- 配置服务器
- 总结
前言
这次我们有个两周的实训然后要求我们自己设计一个网页进行答辩,我是在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站的,仿的不是很好。这次实训也收获挺多,我得下个目标是创造出自己的一个网站,能够做到真正的做到我想实现的操作
更多推荐
HTML5+css+jquery网页设计+加静态网页部署到服务器上
发布评论