HTML+CSS+JS网页设计与制作-黑神话悟空网页

HTML+CSS+JS网页设计与制作-黑神话悟空网页

一、网站介绍

1、网站程序:主要使用网页三剑客html+css+javaScript实现网页设计与制作,完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。

2、网站素材:搜集或制作适合网页风格和尺寸的图片,追求优质视觉体验。

3、网站文件:网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等。

4、网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、Sublime 、HBuilder、Vscode 、Webstorm、Notepad++ 、Text 等任意编辑软件进行编辑修改等操作)。

5、网站布局:主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。

6、网页效果预览:双击html文件或者拖拽html文件到浏览器打开,即可预览当前网页效果。

二、网页亮点

1、视觉设计:排版布局极简设计,优质的视觉体验等。

2、动效交互:幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能等。

三、作品演示

四、代码目录

五、页面结构

  1. 创建基本的 HTML 结构,包括 <html><head><body> 标签。
  2. <head> 标签中设置页面标题、引入 CSS 和 JavaScript 文件、设置视口等。
  3. <body> 标签中构建页面的主要结构,例如焦点图、轮播图、内容区域、页脚等。

六、CSS 样式

    创建一个 CSS 文件(例如 index.css),并在 HTML 文件中引入。
    设置全局样式,如字体、颜色、背景等。
    设计导航栏、焦点图、内容区域、页脚等的样式,使其在不同设备上具有良好的外观。

七、JavaScript 功能

    创建一个 JavaScript 文件(例如 index.js),并在 HTML 文件中引入。
    可以使用 JavaScript 实现图片自动轮播、背景图视差的交互效果等功能。

const slides = document.querySelectorAll('.slider img');
let currentSlide = 0;
 
function showSlide(n) {
    slides.forEach((slide, index) => {
        slide.classList.remove('active');
        if (index === n) {
            slide.classList.add('active');
        }
    });
}
 
function nextSlide() {
    currentSlide++;
    if (currentSlide >= slides.length) {
        currentSlide = 0;
    }
    showSlide(currentSlide);
}
 
setInterval(nextSlide, 3000);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值