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

本文链接：https://blog.csdn.net/qq_48460681/article/details/124210466

文章目录

前言
一、使用软件
二、实际效果
三、js实现的动态效果概述
四、将网页部署在服务器上
总结

前言

这次我们有个两周的实训然后要求我们自己设计一个网页进行答辩，我是在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();
})