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）index.html：首页html；
（2）style：静态资源目录，存放css网页样式文件、js网页特效文件、images网页图片文件等；
（3）css文件夹：存放网页所有css样式表文件文件；
（4）images文件夹：存放网页所有图片资源文件；
（5）js文件夹：存放网页所有网页特效文件；
适用于课程设计、HTML期末大作业等。
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>木番薯科技（公众号）</title>
<meta name="keywords" content="木番薯科技,公众号,极速建站,木番薯科技(公众号)极速建站,企业快速建站">
<meta name="description" content="木番薯科技(公众号)极速建站，拥有5年中外知名企业建站经验">
<link type="text/css" href="style/css/vender.css" rel="stylesheet"/>
<link type="text/css" href="style/css/app.css" rel="stylesheet"/>
<link type="text/css" href="style/css/others.css" rel="stylesheet"/>
<link href="style/css/font-awesome.min.css" rel="stylesheet" />
<link href="style/css/editorPageStyle.css" rel="stylesheet" />
</head>
<div id="aEUOSHbQ" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgb(158, 215, 255);">
<!---->
<div>
<section data-effect="fixed" data-size="contain" data-pos="cl" class="layout_bg layout_bg_pc" style="background-image: url(style/images/1660620034353.png);">
<img src="style/images/1660620034353.png" style="opacity: 0;">
<div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div>
</section>
<section data-effect="fixed" data-size="contain" data-pos="tl" class="layout_bg layout_bg_mo" style="background-image: url(style/images/1660631523882.png);">
<img src="style/images/1660631523882.png" style="opacity: 0;">
<div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div>
</section>
</div>
<section class="layout_limit_wrapper">
<section class="layout_container">
<section class="layout_body">
<section id="PMvyFKDU" data-type-detail="custom" data-justify_center="left" data-mo_justify_center="center" data-align_center="top" class="layout">
<div class="layout-margin_placeholder_top"></div>
<section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row">
<section id="PWAtJZgj" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;">
<!---->
<section class="editor ck-content">
<p><span class="text-84 font-family" style="font-size:84px;color:rgb(255,255,255);font-family:Poppins-Bold;">Fash-ion</span>
</p>
<p><span class="text-20 font-family" style="font-size:20px;color:rgb(255,255,255);font-family:Poppins-Bold;">时尚街拍</span>
</p>
</section>
<!---->
<!---->
<!---->
</section>
<!---->
<!---->
</section>
<div class="layout-margin_placeholder_bottom"></div>
</section>
<section id="ewHRQytA" data-type-detail="custom" data-justify_center="right" data-mo_justify_center="center" data-align_center="top" class="layout">
<div class="layout-margin_placeholder_top"></div>
<section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row">
<section id="ptOYCsKM" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;">
<!---->
<section class="editor ck-content">
<p><span class="font-family" style="color:rgb(255,255,255);font-family:Poppins-Regular;">Lorem
ip-sum do-lor sit amet, con-secte-tur adip-isc-ing elit. Et
mo-lestie habi-tant enim, dig-nis-sim et, con-secte-tur eges-tas
in. Dig-nis-sim viverra lec-tus cras el-e-men-tum.</span></p>
</section>
<!---->
<!---->
<!---->
</section>
<!---->
<!---->
</section>
<div class="layout-margin_placeholder_bottom"></div>
</section>
</section>
</section>
</section>
<!---->
</div>