html+css+js 黑神话悟空网页设计与制作

news2024/12/30 1:36:46

网站介绍

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&shy;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&shy;sum do&shy;lor sit amet, con&shy;secte&shy;tur adip&shy;isc&shy;ing elit. Et
                                                            mo&shy;lestie habi&shy;tant enim, dig&shy;nis&shy;sim et, con&shy;secte&shy;tur eges&shy;tas
                                                            in. Dig&shy;nis&shy;sim viverra lec&shy;tus cras el&shy;e&shy;men&shy;tum.</span></p>
                                                </section>
                                                <!---->
                                                <!---->
                                                <!---->
                                            </section>
                                            <!---->
                                            <!---->
                                        </section>
                                        <div class="layout-margin_placeholder_bottom"></div>
                                    </section>
                                </section>
                            </section>
                        </section>
                        <!---->
                    </div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2049111.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！