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);