个人网页摄影街拍单页-html+css+javaScript网页设计与制作使用网页三剑客html+css+javaScript实现网页设计与制作，页面排版布局高端大气。使用HTML+CSS页面布局设计，web大学生网页设计作业源码，这是一个优质的个人网页制作。凭借简约的设计风格、精湛的制作工艺，突破与创新的理念。这个实例比较全面，非常适合初学者学习使用，有助于大家的学习。本文将介绍如何从0到1设计个人网站并用代码实现排版布局以及界面交互的过程。  个人网页摄影街拍单页-演示 https://www.zhihu.com/video/1624436034422489088 个人网页摄影街拍单页-演示 一、网站题目个人介绍、摄影作品、图片画廊展示等个人网站的设计与制作。 二、网站介绍1、网站布局：主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。 2、网站程序：主要使用网页三剑客html+css+javaScript实现网页设计与制作，完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。 3、网站素材：搜集或制作适合网页风格和尺寸的图片，追求优质视觉体验。 4、网站文件：网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等； 5、网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意编辑软件进行编辑修改等操作）。 6、网页效果预览：双击html文件或者拖拽html文件到浏览器打开，即可预览当前网页效果。 三、网站亮点1、视觉设计：排版布局极简设计，优质的视觉体验等。 2、动效交互：幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能、英文断行等。 四、网站文件目录（1）index.html：首页html； （2）style：静态资源目录，存放css网页样式文件、js网页特效文件、images网页图片文件等；   其中： （1）css文件夹：存放网页所有css样式表文件文件； （2）images文件夹：存放网页所有图片资源文件； （3）js文件夹：存放网页所有网页特效文件；    五、基础知识储备HTML 定义网页的内容；CSS 规定网页的布局；JavaScript 对网页行为进行编程。 即：HTML——结构；CSS——样式；JS——行为。 1、HTMLHTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 文档 = 网页： HTML 文档描述网页； HTML 文档包含 HTML 标签和纯文本； HTML 文档也被称为网页；  Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。 <!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。 下面是一个可视化的HTML页面结构：  2、CSSCSS 指的是层叠样式表* (Cascading Style Sheets)。CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 CSS 可以通过以下方式添加到HTML中: （1）内联样式- 在HTML元素中使用"style" 属性； （2）内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS； （3）外部引用 - 使用外部 CSS 文件； 注：最好的方式是通过外部引用CSS文件。 3、JavaScriptJavaScript 是 web 开发者必学的三种语言之一。 JavaScript 能够改变 HTML 内容、 JavaScript 能够改变 HTML 属性、 JavaScript 能够改变 HTML 样式 (CSS)、 JavaScript 能够隐藏 HTML 元素、 JavaScript 能够显示 HTML 元素、 ...... 六、网站效果1、HTML 头部元素解读：（1）<head> 元素是所有头部元素的容器。 （2）<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 （3）<title> 标题定义文档的标题。 （4）<link> 标签定义文档与外部资源之间的关系。 而这里，我们在HTML文档头部 <head> 区域使用<link> 元素 来通过外部引用CSS文件。 <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="木番薯科技(公众号)极速建站，拥有10年中外知名企业建站经验。是设计交互领先的网站模板产品，便于SEO优化，操作简单，原创设计使用稳定，适合个人、企业网站建设，网站改版，可免费试用"> <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> 2、网页首屏HTML结构代码： <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> 实现布局样式效果：  3、图文模块HTML结构代码： <div id="uLFmbHWQ" data-key="" data-window_width="true" data-limit_width="true" data-img_gallery="{"open":"1"}" data-stick-parent="" class="layout_group" style="background-color: rgba(255, 255, 255, 0);"><!----> <div> <!----> <!----> </div> <section class="layout_limit_wrapper"> <section class="layout_container"> <section class="layout_body"> <section id="XGDirIjn" data-type-detail="custom" data-justify_center="center" data-mo_justify_center="center" data-align_center="top" class="layout"> <div class="layout-margin_placeholder_top"></div> <section data-animate="1" data-key="" data-col="2--6_4--6" data-stick-parent="" class="row full-w-row"> <section id="oVzHToNN" class="col editor_wrapper col-2--6" style="width: calc(33.33%); 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(62,62,62);font-family:Poppins-Bold;">Lat­est</span><br><span class="text-84 font-family" style="font-size:84px;color:rgb(62,62,62);font-family:Poppins-Bold;">Pho­tos</span> </p> <p> </p> <p><span class="font-family" style="font-family:Poppins-Regular;">Lorem ip­sum do­lor sit amet, con­secte­tur adip­isc­ing elit. Sit ia­c­ulis nibh sem adip­isc­ing po­suere. Enim ali­quam ac, non mi, non duis nisl sem morbi.</span></p> <p> </p> <p> </p> <p><a style="background:rgba(240, 240, 240, 0.14);border-color:rgba(240, 240, 240, 0.14);color:rgb(35, 35, 35);" href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect" data-setting="{"before":{"bg":"rgba(240, 240, 240, 0.14)","outline":"0","color":"rgb(35, 35, 35)"},"after":{"bg":"rgba(240, 240, 240, 0)","outline":"0","color":"rgb(0, 0, 0)"},"layout":"4","style":"white"}" data-before-outline="0" data-before-bg="rgba(240, 240, 240, 0.14)" data-before-color="rgb(35, 35, 35)" data-after-bg="rgba(240, 240, 240, 0)" data-after-color="rgb(0, 0, 0)" data-after-outline="0" data-layout="4" data-style="white"><span class="font-family" style="font-family:Poppins-Bold;">Ex­plore</span></a></p> </section> <!----> <!----> <!----> </section><span class="col_space"></span> <section id="qCGpCdzP" class="col editor_wrapper col-4--6" style="width: calc(66.67%); border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"> <!----> <section class="editor ck-content"> <figure class="image ue-image" data-image-ratio="auto" data-center="32% 28%" data-align="right"> <div class="ue-image-shadow" style="background-image:url(style/images/img/1660621448711.png);background-position:32% 28%;"> <img src="style/images/img/1660621448711.png"> <div class="ue-image-mask"></div> </div> </figure> <p> </p> <p> </p> <figure class="image ue-image" data-image-ratio="auto" data-align="right"> <div class="ue-image-shadow" style="background-image:url(style/images/img/1660621477663.png);"> <img src="style/images/img/1660621477663.png"> <div class="ue-image-mask"></div> </div> </figure> <p> </p> <p> </p> <figure class="image ue-image" data-image-ratio="auto" data-align="right"> <div class="ue-image-shadow" style="background-image:url(style/images/img/1660621491781.png);"> <img src="style/images/img/1660621491781.png"> <div class="ue-image-mask"></div> </div> </figure> </section> <!----> <!----> <!----> </section> <!----> <!----> </section> <div class="layout-margin_placeholder_bottom"></div> </section> </section> </section> </section> <!----> </div> 实现布局样式效果：   4、新闻列表HTML结构代码： <div id="EszoQqYo" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgba(255, 255, 255, 0);"><!----> <div> <!----> <!----> </div> <section class="layout_limit_wrapper"> <section class="layout_container"> <section class="layout_body"> <section id="IKwxErGO" data-type-detail="custom" data-justify_center="center" 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="50_50" data-stick-parent="" class="row"> <section id="rsIafSNg" class="col editor_wrapper col-50 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(62,62,62);font-family:Poppins-Bold;">​News</span> </p> <p> </p> <p><span class="font-family" style="font-family:Poppins-Regular;">Lorem ip­sum do­lor sit amet, con­secte­tur adip­isc­ing elit. ​</span></p> <p><span class="font-family" style="font-family:Poppins-Regular;">Sit ia­c­ulis nibh sem adip­isc­ing po­suere. </span></p> </section> <!----> <!----> <!----> </section><span class="col_space"></span> <section id="dyWIwBWD" class="col editor_wrapper col-50 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"> <!----> <section class="editor ck-content"> <p><a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect"><span class="text-16 font-family" style="font-size:16px;color:rgb(71,71,71);font-family:Poppins-Regular;">Lorem ip­sum do­lor sit amet, con­secte­tur adip­isc­ing elit.</span></a></p> <hr class="hr solid"> <p><span class="text-16 font-family" style="font-size:16px;color:rgb(71,71,71);font-family:Poppins-Regular;">Et mo­lestie habi­tant enim, dig­nis­sim et, con­secte­tur eges­tas in. </span></p> <hr class="hr solid"> <p><span class="text-16 font-family" style="font-size:16px;color:rgb(71,71,71);font-family:Poppins-Regular;">Dig­nis­sim viverra lec­tus cras el­e­men­tum.</span></p> <hr class="hr solid"> <p><span class="text-16 font-family" style="font-size:16px;color:rgb(71,71,71);font-family:Poppins-Regular;">Lorem ip­sum do­lor sit amet, con­secte­tur adip­isc­ing elit.</span> </p> <p> </p> <p> </p> <p> </p> <p><a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect"><span class="text-16 font-family" style="font-size:16px;color:rgb(71,71,71);font-family:Poppins-Regular;"><strong>Explore</strong></span></a> </p> </section> <!----> <!----> <!----> </section> <!----> <!----> </section> <div class="layout-margin_placeholder_bottom"></div> </section> </section> </section> </section> <!----> </div> 实现布局样式效果：  5、轮播图HTML结构代码： <div id="brULbtBV" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgba(255, 255, 255, 0);"><!----> <div> <!----> <!----> </div> <section class="layout_limit_wrapper"> <section class="layout_container"> <section class="layout_body"> <section id="sFiVAhUI" data-type-detail="slider" data-justify_center="center" 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 full-w-row"> <section id="OYjPxLTv" class="col editor_wrapper col-100 animated" style="visibility: visible;"> <!----> <!----> <div data-num="3" data-theme="dark" data-autoplay="true" data-margin-size="middle" class="layout_slider slick-initialized slick-slider slick-dotted"><div class="slick-prev slick-arrow" style=""><i class="fa fa-angle-left"></i></div><div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 4136px; transform: translate3d(-1880px, 0px, 0px); transition: transform 500ms ease 0s;"><div class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/55880556f2b1fd1eccf03d32fd658e86.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/239e482ca9b64d159698da453c73e20a.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/bb623b06468dfa047712ccfc30152530.jpg" alt=""></div></div></div><div class="slick-slide" data-slick-index="0" aria-hidden="true" role="tabpanel" id="slick-slide00" style="width: 376px;" aria-describedby="slick-slide-control00" tabindex="-1"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/c76cb1f1bfea99a99d2d98027aaba3b6.jpg" alt=""></div></div></div><div class="slick-slide" data-slick-index="1" aria-hidden="true" role="tabpanel" id="slick-slide01" style="width: 376px;" aria-describedby="slick-slide-control01"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/55880556f2b1fd1eccf03d32fd658e86.jpg" alt=""></div></div></div><div class="slick-slide slick-current" data-slick-index="2" aria-hidden="true" role="tabpanel" id="slick-slide02" style="width: 376px;" aria-describedby="slick-slide-control02"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/239e482ca9b64d159698da453c73e20a.jpg" alt=""></div></div></div><div class="slick-slide" data-slick-index="3" aria-hidden="true" role="tabpanel" id="slick-slide03" style="width: 376px;" aria-describedby="slick-slide-control03"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/bb623b06468dfa047712ccfc30152530.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="4" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/c76cb1f1bfea99a99d2d98027aaba3b6.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="5" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/55880556f2b1fd1eccf03d32fd658e86.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/239e482ca9b64d159698da453c73e20a.jpg" alt=""></div></div></div><div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 376px;"><div><div class="slider_item" style="width: 100%; display: inline-block;"><img src="style/images/bb623b06468dfa047712ccfc30152530.jpg" alt=""></div></div></div></div></div><div class="slick-next slick-arrow" style=""><i class="fa fa-angle-right"></i></div><ul class="slick-dots" style="" role="tablist"><li class="" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="-1">1</button></li><li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 2" tabindex="0" aria-selected="true">2</button></li><li role="presentation" class="slick-active"><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 2" tabindex="-1">3</button></li><li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control03" aria-controls="slick-slide03" aria-label="4 of 2" tabindex="-1">4</button></li></ul></div> <!----> <!----> </section> <!----> <!----> </section> <div class="layout-margin_placeholder_bottom"></div> </section> </section> </section> </section> <!----> </div> 实现布局样式效果：  6、网页底部HTML结构代码： <div id="Rkqglvcl" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgba(255, 255, 255, 0);"><!----> <div> <!----> <!----> </div> <section class="layout_limit_wrapper"> <section class="layout_container"> <section class="layout_body"> <section id="mTubOLAF" data-type-detail="block" 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 full-w-row"> <section id="DYSnwciv" class="col editor_wrapper col-100 animated" style="visibility: visible;"> <!----> <!----> <!----> <!----> <div data-type="line" class="layout_block" style="padding-top: 40px;"> <div data-line-type="solid" class="layout_block_line" style="border-color: rgba(153, 153, 153, 0.5);"></div> </div> </section> <!----> <!----> </section> <div class="layout-margin_placeholder_bottom"></div> </section> <section id="FUwHHZSs" 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="2--6_1--6_3--6" data-stick-parent="" class="row full-w-row"> <section id="NCKMErpJ" class="col editor_wrapper col-2--6 animated" style="width: calc(33.33%); border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"> <!----> <section class="editor ck-content"> <p><span class="text-60 font-family" style="font-size:60px;color:rgb(71,71,71);font-family:MontDemo-Heavy;">Brand</span> </p> <p> </p> <p><span style="color:rgb(65,65,65);"><strong>674782630@qq.com</strong></span> </p> <p>广州市天河区花城大道666号2688室<br>公众号 木番薯科技</p> <p> </p> <figure class="table" data-border="true"> <table> <tbody> <tr> <td> <figure class="media"> <div class=" ck_share ck_share_style_two ck_share_theme_black ck_share_pos_left" data-oembed-url="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect"> <section class="ck-share-container"><a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect" target="_blank" class="ck-share-item ck-share-type-weibo"> <i class="ifont ifont-weibo"></i> <span class="ck-editor-name"></span> </a></section> </div> </figure> </td> <td> <figure class="media"> <div class=" ck_share ck_share_style_two ck_share_theme_black ck_share_pos_left" data-oembed-url="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect"> <section class="ck-share-container"><a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect" target="_blank" class="ck-share-item ck-share-type-weixin"> <i class="ifont ifont-weixin"></i> <span class="ck-editor-name"></span> </a></section> </div> </figure> </td> <td> <figure class="media"> <div class=" ck_share ck_share_style_two ck_share_theme_black ck_share_pos_left" data-oembed-url="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NDc4MTY4MQ==&action=getalbum&album_id=2288753751610015749&scene=173&from_msgid=2247485724&from_itemidx=1&count=3&nolastread=1#wechat_redirect"> <section class="ck-share-container"><a href="tencent://message/?uin=674782630&Site=400301.com&Menu=yes" target="_blank" class="ck-share-item ck-share-type-qq"> <i class="ifont ifont-qq"></i> <span class="ck-editor-name"></span> </a></section> </div> </figure> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> </figure> <p> </p> </section> <!----> <!----> <!----> </section><span class="col_space"></span> <section id="hEAotIVO" class="col editor_wrapper col-1--6 animated" style="width: calc(16.67%); border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"> <!----> <section class="editor ck-content placehold"></section> <!----> <!----> <!----> </section><span class="col_space"></span> <section id="jxkeyYrb" class="col editor_wrapper col-3--6 animated" style="width: calc(50%); border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;"> <!----> <section class="editor ck-content"> <figure class="table" data-border="true"> <table> <tbody> <tr> <td> <p><span class="text-16 font-family" style="font-size:16px;font-family:微软雅黑;"><strong>首页</strong></span> </p> <p> </p> <p><span class="font-family" style="color:rgb(67,67,67);font-family:微软雅黑;">产品中心</span><br><br><span class="font-family" style="color:rgb(67,67,67);font-family:微软雅黑;">新闻资讯</span><br><br><span class="font-family" style="color:rgb(67,67,67);font-family:微软雅黑;">关于我们</span><br> </p> </td> <td> <p><span class="text-16" style="font-size:16px;"><strong>服务</strong></span> </p> <p> </p> <p><span style="color:rgb(67,67,67);">网页设计</span><br><br><span style="color:rgb(67,67,67);">品牌设计</span><br><br><span style="color:rgb(67,67,67);">小程序设计</span><br><br><span style="color:rgb(67,67,67);">前端开发</span> </p> </td> <td> <p><span class="text-16" style="font-size:16px;"><strong>关于</strong></span> </p> <p> </p> <p><span style="color:rgb(67,67,67);">社会责任</span><br><br><span style="color:rgb(67,67,67);">公益活动</span> </p> </td> <td> <p><span class="text-16" style="font-size:16px;"><strong>其他</strong></span> </p> <p> </p> <p><span style="color:rgb(67,67,67);">合作企业</span><br><br><span style="color:rgb(67,67,67);">招聘内容</span><br><br><span style="color:rgb(67,67,67);">行业报告</span><br><br><span style="color:rgb(67,67,67);">立即预约</span> </p> </td> </tr> </tbody> </table> </figure> </section> <!----> <!----> <!----> </section> <!----> <!----> </section> <div class="layout-margin_placeholder_bottom"></div> </section> </section> </section> </section> <!----> </div> 实现布局样式效果：  |
万奢网手机版
官网微博：万奢网服务平台
