百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-11 18:14 57 浏览

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>

相关推荐

自助机网络监控（自助设备监控）

今日领导打电话说上次的自助机修好了，今天又不行了，这是第二次打电话了。目前也没有其他人反馈这个机器的问题。于是我就想能不能根据IP去ping这个自助机的网络是否正常，如果不正常，关机了就自动给我发到科...

C# 打字练习(WinForm)快速打字小游戏，输入正确自动爆炸效果

打字游戏窗体初始化：publicintk;PictureBoxpic=newPictureBox();//生成飞机控件privatev...

这三款颜值极高的工具完美契合win10风格，逼格满满

今天介绍三款开源软件让你的Windows10逼格再飞跃一个等级，而且功能与颜值兼具！ModernFlyouts这是一款Windows10弹出UI的替代品，比原生UI更漂亮、更现代。提示框的位置可以随意...

VC界面开发组件Xtreme Toolkit Pro全新发布v17.0.0

Codejock软件公司的XtremeToolkitPro是屡获殊荣的VC界面库，是MFC开发中最全面界面控件套包，它提供了Windows开发所需要的11种主流的VisualC++MFC控件，...

字体|好看的英文字体合集(四)（最好看的十种英文字体）

电脑里的字体不在于多而在精，拥有10000个字体不用的话也是浪费，找起来也不容易，只有经常使用的才是好字体。获取方式：私31.潮流赛博朋克金属字体32.潮流创意可扩展英文字体StretchPro3...

Qt5 C++入门教程-第13章 自定义控件(Custom Widgets)

大道至简，在Qt5C++入门教程的这一部分，我们将创建一个自定义部件。大多数工具包通常仅提供诸如按钮、文本部件或滑块等最常见的部件。没有哪个工具包能够提供所有可能的部件。程序员必须自行创建此类部件...

艾灸的美容养生功效（艾灸美容养颜）

艾灸，属于医外治物理疗法，通过百草之王艾草和13种名贵中草药特制成香条状，点燃以温热刺激患处四周或相关穴位，帮助人体全面温通经络，从而加速皮肤的血液循环，淡化色斑。艾灸疗法-温和灸1.四白穴：四白...

你可能不知道的10个CSS3中的隐藏特性

CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些...

不会才学-4 Tkinter 控件1一Label、Button、Entry

一、标签控件（Label）序号可选项&描述1anchor文本或图像在背景内容区的位置，默认为center，可选值为（n,s,w,e,ne,nw,sw,se,center）eswn是东南西北英文...

从0到1建立一张评分卡之可视化分析

　上一篇文章介绍了如何进行数据预处理，接下来介绍如何进行探索性数据分析。探索性数据分析又叫EDA,即ExploratoryDataAnalysis。其实数据预处理也属于EDA的一部分，EDA的目...

高温致日本冲绳最大珊瑚群90%白化褪色

来源:新华网高温致日本冲绳最大珊瑚群90%白化褪色A+A-分享2016-09-0412:50:53　来源:新华网查看原文<divclass="video-box"data-vid="...

学习笔记(十七)|PPT考点总结（ppt.1）

分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard学苑。今天小编为大家带来“学习笔记（十七）|PPT考点总结”，欢迎您的访问。Shareyourinterests,...

史上最全的浏览器兼容性问题和解决方案

微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一...

304071纽郎缝包机送料牙架（缝包机送料牙更换）

portant;white-space:normal;font-size-adjust:none;font-stretch:normal;background-color:rgb(25...

安卓手机微信设置字体大小导致页面错位的解决方案

切图网专注网页切图、小程序切图服务，在最近的客户反应中，当安卓手机设置字体大小以后，会导致从微信公众号进入的页面也会字体放大，导致页面的不同程度的错位，要想解决这个问题，可以通过代码解决，ios相对简...

一周热门
最近发表
标签列表