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

WebDesign_Mu

于 2024-12-04 21:40:13 发布

阅读量678

点赞数 11

CC 4.0 BY-SA版权

文章标签： html css javascript html5 游戏课程设计毕业设计

本文链接：https://blog.youkuaiyun.com/WebDesign_Mu/article/details/144250567

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、动效交互：幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能等。

三、作品演示

四、代码目录

五、页面结构

创建基本的 HTML 结构，包括 <html>、<head> 和 <body> 标签。
在 <head> 标签中设置页面标题、引入 CSS 和 JavaScript 文件、设置视口等。
在 <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);