|
能够运用网页三剑客html+css+js实现网页设计与制作，页面排版布局高端大气。
运用HTML+CSS页面布局设计，HTML+CSS+JS网页设计与制作摄影类个人网页，这是一个优秀的个人网页制作。
凭借简约的设计风格、精湛的制作工艺，突破与创新的理念。
个人网站、个人博客、个人介绍、摄影作品、照片画廊展示等个人网站的设计与制作。
网站介绍
1、网站程序：重点运用网页三剑客html+css+javaScript实现网页设计与制作，完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。
2、网站布局：重点采用浮动布局。兼容各大主流浏览器、表示效果稳定。
3、网站文件：网站系统文件种类包括html网页结构文件、css网页样式文件、js网页特效文件、images网页照片文件等。
4、网站素材：搜集或制作适合网页风格和尺寸的照片，追求优秀视觉体验。
5、网页编辑：网页作品代码简单，可运用任意HTML编辑软件（如：Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意编辑软件进行编辑修改等操作）。
6、网页效果预览：双击html文件或拖拽html文件到浏览器打开，就可预览当前网页效果。
网站亮点
1、视觉设计：排版布局极简设计，优秀的视觉体验等。
2、动效交互：幻灯效果、入场动画、按钮点击、视差功能、锚点功能、照片画廊功能、英文断行等。
重播
播放
00:00
/
00:00
直播
进入全屏
50
点击按住可拖动视频
网站文件目录
（1）index.html：首页html；
（2）style：静态资源目录，存放css网页样式文件、js网页特效文件、images网页照片文件等；
其中：
（1）css文件夹：存放网页所有css样式表文件文件；
（2）images文件夹：存放网页所有照片资源文件；
（3）js文件夹：存放网页所有网页特效文件；
网站源码<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="bac公斤round-color: rgb(158, 215, 255);">
<!---->
<div>
<section data-effect="fixed" data-size="contain" data-pos="cl" class="layout_bg layout_bg_pc" style="bac公斤round-image: url(style/images/1660620034353.png);">
<img src="style/images/1660620034353.png" style="opacity: 0;">
<div class="layout_bg-mask" style="bac公斤round-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="bac公斤round-image: url(style/images/1660631523882.png);">
<img src="style/images/1660631523882.png" style="opacity: 0;">
<div class="layout_bg-mask" style="bac公斤round-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; bac公斤round-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 oppins-Bold;">Fashion</span>
</p>
<p><span class="text-20 font-family" style="font-size:20px;color:rgb(255,255,255);font-familyoppins-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; bac公斤round-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-familyoppins-Regular;">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Et
molestie habitant enim, dignissim et, consectetur egestas
in. Dignissim viverra lectus cras elementum.</span></p>
</section>
<!---->
<!---->
<!---->
</section>
<!---->
<!---->
</section>
<div class="layout-margin_placeholder_bottom"></div>
</section>
</section>
</section>
</section>
<!---->
</div>
| 
发表于 2024-7-27 22:26:13
