网站建设多少钱一平米,网站权重怎么看,黄页网站推广app咋做广告,xp系统中做网站服务器web静态网页设计与制作#xff0c;基于HTMLCSSJS实现精美的旅游摄影网站#xff0c;拥有极简的设计风格#xff0c;丰富的交互动效#xff0c;让人眼前一亮#xff0c;享受视觉上的体验。 我使用了基本的HTML结构来构建网页#xff0c;并使用CSS样式进行美化设计#xf…web静态网页设计与制作基于HTMLCSSJS实现精美的旅游摄影网站拥有极简的设计风格丰富的交互动效让人眼前一亮享受视觉上的体验。 我使用了基本的HTML结构来构建网页并使用CSS样式进行美化设计然后使用jquery.js实现酷炫的交互效果。需要注意的是确保将所需的图片文件与HTML和CSS文件放在同一目录下。最后将文件部署到Web服务器上即可通过浏览器访问旅游摄影网站的单页应用。 旅游摄影网站应用如何设计与制作呢
可以按照以下步骤进行
确定需求和页面内容确定网站需要展示的内容和每个页面的功能需求。例如首页、摄影作品集、目的地推荐、旅游摄影技巧 、旅行故事分享等。设计页面布局根据需求设计每个页面的布局和样式包括页面结构、导航栏、主要内容区域、底部信息等。准备网站素材根据页面布局准备所需的图片、文字等素材。对于旅游摄影网站可以准备一些精美的景点图片、游记图片等。编写页面代码使用HTML、CSS和JavaScript等前端技术编写页面的代码。在编写过程中要注意代码的可读性和可维护性同时遵循网页语义化和响应式设计原则。实现页面交互根据需求添加所需的交互效果和功能。例如轮播图、图片放大效果、表单验证等。测试页面效果在开发过程中不断进行测试和调试确保页面显示效果和功能正常。发布和部署完成测试后将页面代码部署到服务器上发布网站。
在开发过程中可以使用一些前端开发工具和框架来提高效率和质量例如Bootstrap、jQuery等。同时要注意页面的响应式设计和用户体验确保网站可以在不同的设备和屏幕尺寸上正常显示和访问。 下面展示如何使用HTML和CSS开发一个旅游摄影网站的单页应用。
首先创建一个HTML文件命名为index.html并将以下代码添加到文件中
!DOCTYPE html
html langen
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title旅游摄影网站/title meta namekeywords content木番薯科技(公众号),网站设计与制作meta namedescription content木番薯科技(公众号)极速建站设计交互领先的网站产品适合个人、企业网站建设link typetext/css hrefstyle/css/vender.css relstylesheet /link typetext/css hrefstyle/css/app.css relstylesheet /link typetext/css hrefstyle/css/others.css relstylesheet /
/head
body classbodylist bodysinglepage disable-betweendiv idsitecontent classsitecontentdiv classnpagePage default content_editordiv classcontentdiv classpostbody1 postbodydiv idpage_body_editor-wrapper data-type classpage_body_editor-wrapperdiv idBKyZlEXUcMdfZdpx data-key data-window_widthtrue data-limit_widthtruedata-stick-parent classlayout_group stylebackground-color:rgb(17, 17, 17)section data-effectparallax data-sizecontain data-postc classlayout_bg layout_bg_pcstylebackground-image:url(style/images/img/1567067636627.jpgquot)img srcstyle/images/img/1567067636627.jpg styleopacity:0div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection data-effectparallax data-sizecontain data-postl classlayout_bg layout_bg_mo stylebackground-image:url(style/images/img/1567606058151.jpgquot)div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection classlayout_limit_wrappersection classlayout_containersection classlayout_bodysection idOhovjeKEMrutJijq data-type-detailcustom data-justify_centercenterdata-align_centercenter classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:100px/divsection data-animate1 data-key data-col50_25_25 data-stick-parent classrow stylewidth:100%section idQIckvCikUMBfEMri classcol editor_wrapper col-50 styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentpnbsp;/ppspan classtext-72 stylefont-size:72px;color:#fff;font-family:MontDemo-Heavy自然景观/spanspanclasstext-72stylefont-size:72px;color:#fffnbsp;/span/ppspan classtext-30stylefont-size:30px;color:#00e04d;font-family:Arial旅游摄影作品/span/ppnbsp;/pfigure classmediadiv classck_share ck_share_style_one ck_share_theme_black ck_share_pos_leftdata-oembed-urlsection classck-share-containerahrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirecttarget_blankclassck-share-item ck-share-type-weiboi classifont ifont-weibo/ispan classck-editor-name/span/aahrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirecttarget_blankclassck-share-item ck-share-type-weixini classifont ifont-weixin/ispan classck-editor-name/span/aa hreftel:4000000000 target_blankclassck-share-item ck-share-type-calli classifont ifont-call/ispan classck-editor-name/span/a/section/div/figurepnbsp;/ppnbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:6%/spansection idkgNaZwFBlTpFwIkq classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentpnbsp;/pp styletext-align:centernbsp;/pfigure classtable data-bordertruetabletbodytrtdnbsp;/tdtd colspan4figure classimageimgstyleborder-radius:100pxsrc./style/images/img/tx.png/figure/tdtdnbsp;/td/tr/tbody/table/figurep styletext-align:centerspan stylecolor:#999非著名摄影师/spanspan stylecolor:#00e04d李潇然/span/pp styletext-align:centernbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:6%/spansection idsVyZnLMcglNlhZfZ classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentpnbsp;/ppspan classtext-26stylefont-size:26px;color:#fff;font-family:MontDemo-Heavy2016-2023/span/ppnbsp;/ppspan stylecolor:#999自然风光摄影 /spanspanstylecolor:#0ff661 旅游摄影 /spanspanstylecolor:#999婚纱摄影和写真摄影 nbsp;nbsp;/span/ppnbsp;/ppa styleborder-color:rgb(255, 255, 255);color:rgb(255, 255, 255)hrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirectdata-layout3 data-stylewhitedata-setting{quot;beforequot;:{quot;bgquot;:quot;rgb(255, 255, 255)quot;,quot;outlinequot;:quot;1quot;,quot;colorquot;:quot;rgb(255, 255, 255)quot;},quot;afterquot;:{quot;bgquot;:quot;#f0f0f0quot;,quot;outlinequot;:quot;0quot;,quot;colorquot;:quot;#333quot;},quot;layoutquot;:quot;3quot;,quot;stylequot;:quot;whitequot;}data-before-outline1data-before-bgrgb(255, 255, 255)data-before-colorrgb(255, 255, 255)data-after-bg#f0f0f0 data-after-color#333data-after-outline0 target_blank更多/a/ppnbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idQTLtFFfsHMyLQtpn data-type-detailcustom data-justify_centercenterdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col33_33_33 data-stick-parentclassrow stylewidth:100%section idTdEnAsfRnZqmqQBi classcol editor_wrapper col-33styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentfigure classimage ue-image data-image-ratio3-4div classue-image-shadowstylebackground-image:url(style/images/img/9cc343006af5d01c86a5cc73c3e600fb.jpg);width:100%;border-radius:0imgsrc./style/images/img/9cc343006af5d01c86a5cc73c3e600fb.jpgdiv classue-image-mask/div/div/figurepnbsp;/ppspan classtext-12stylefont-size:12px;color:#999;font-family:Roboto-Light旅游摄影作品/span/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:Techna-Sans-Regular-2暮光之野/span/ppnbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:1%/spansection idlXgfnvswRzDQnIuu classcol editor_wrapper col-33styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentfigure classimage ue-image data-image-ratio3-4div classue-image-shadowstylebackground-image:url(style/images/img/40acaef6ba943d444d3e103506e730a9.jpg);width:100%;border-radius:0imgsrc./style/images/img/40acaef6ba943d444d3e103506e730a9.jpgdiv classue-image-mask/div/div/figurepnbsp;/ppspan classtext-12stylefont-size:12px;color:#999;font-family:Roboto-Light旅游摄影作品/span/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:RobotoJ-Bold-2夜幕降临/span/ppnbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:1%/spansection idPGVaJleAaCHLlxQM classcol editor_wrapper col-33styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentfigure classimage ue-image data-image-ratio3-4div classue-image-shadowstylebackground-image:url(style/images/img/fb8d6dcb9c0c841867114557d0d4fbdf.jpg);width:100%;border-radius:0imgsrc./style/images/img/fb8d6dcb9c0c841867114557d0d4fbdf.jpgdiv classue-image-mask/div/div/figurepnbsp;/ppspan classtext-12stylefont-size:12px;color:#999;font-family:Montserrat-Light-6旅游摄影作品/span/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:RobotoJ-Bold-2山野之巅/span/ppnbsp;/ppnbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idiYTiQFjkNBqJyXrY data-type-detailcustom data-justify_centercenterdata-align_centercenter classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col50_50 data-stick-parentclassrow stylewidth:100%section idYFahiMYVbiFunOoI classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(29, 29, 29);padding:5%section classeditor ck-contentpnbsp;/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:Montserrat-Medium-7探索世界捕捉精彩/span/ppspan classtext-12stylefont-size:12px;color:#4c4c4c;font-family:Arial公众号-木番薯科技/span/ppnbsp;/ppspan stylecolor:#999;font-family:Arial欢迎来到我们的旅游摄影网站这里是一个集合了全球各地美丽景点和独特文化的平台让我们一起探索这个五彩斑斓的世界。/span/ppnbsp;/ppa styleborder-color:rgb(255, 255, 255);color:rgb(255, 255, 255)hrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirectdata-layout3 data-stylewhitedata-setting{quot;beforequot;:{quot;bgquot;:quot;rgb(255, 255, 255)quot;,quot;outlinequot;:quot;1quot;,quot;colorquot;:quot;rgb(255, 255, 255)quot;},quot;afterquot;:{quot;bgquot;:quot;#f0f0f0quot;,quot;outlinequot;:quot;0quot;,quot;colorquot;:quot;#333quot;},quot;layoutquot;:quot;3quot;,quot;stylequot;:quot;whitequot;}data-before-outline1data-before-bgrgb(255, 255, 255)data-before-colorrgb(255, 255, 255)data-after-bg#f0f0f0 data-after-color#333data-after-outline0 target_blank更多/a/ppnbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:0%/spansection idTyljhhHoOSgQLvny classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(4, 125, 46);padding:5%section classeditor ck-contentpnbsp;/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:Montserrat-Medium-7目的地推荐/span/ppspan classtext-12stylefont-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial公众号-木番薯科技/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial无论您是喜欢自然风光还是人文历史我们的目的地推荐板块将满足您的需求。我们为您精选了全球最值得一游的景点从壮观的自然奇观到繁华的城市风光让您足不出户就能感受到不同地域的魅力。/span/ppnbsp;/ppa styleborder-color:rgb(255, 255, 255);color:rgb(255, 255, 255)hrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirectdata-layout3 data-stylewhitedata-setting{quot;beforequot;:{quot;bgquot;:quot;rgb(255, 255, 255)quot;,quot;outlinequot;:quot;1quot;,quot;colorquot;:quot;rgb(255, 255, 255)quot;},quot;afterquot;:{quot;bgquot;:quot;#f0f0f0quot;,quot;outlinequot;:quot;0quot;,quot;colorquot;:quot;#333quot;},quot;layoutquot;:quot;3quot;,quot;stylequot;:quot;whitequot;}data-before-outline1data-before-bgrgb(255, 255, 255)data-before-colorrgb(255, 255, 255)data-after-bg#f0f0f0 data-after-color#333data-after-outline0 target_blank更多/a/ppnbsp;/ppnbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/section/section/section/section/divdiv idLIJfnrCoXcWweRKt data-key data-window_widthtrue data-limit_widthtruedata-stick-parent classlayout_group stylebackground-color:rgb(17, 17, 17)section data-effectparallax data-sizecontain data-postc classlayout_bg layout_bg_pcstylebackground-image:url(style/images/img/1567102749606.jpgquot)imgsrcstyle/images/img/1567102749606.jpg styleopacity:0div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection data-effectnormal data-sizenormal data-postl classlayout_bg layout_bg_mostylebackground-image:url(style/images/img/quotquot)imgsrcstyle/images/img/1567102749606.jpg styleopacity:0div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection classlayout_limit_wrappersection classlayout_containersection classlayout_bodysection idGMuLJoXYLgyoLGLb data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col25_25_25_25data-stick-parent classrow stylewidth:100%section idqOuFBJVaeufwhaNb classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentp styletext-align:centernbsp;/pp styletext-align:centerspan classtext-60stylefont-size:60px;color:#fff;font-family:Techna-Sans-Regular-26/span年brspanstylecolor:#999运营经验/span/pp styletext-align:centerspan stylecolor:#4c4c4cOperationalexperience/span/pp styletext-align:centernbsp;/p/section/sectionspan classcol_space stylewidth:0/spansection idbtXaiaYkWrJXzzBE classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentp styletext-align:centernbsp;/pp styletext-align:centerspan classtext-72stylefont-size:72px;color:#fff;font-family:Techna-Sans-Regular-25/span年/pp styletext-align:centerspan stylecolor:#999行业沉淀/span/pp styletext-align:centerspan stylecolor:#4c4c4cIndustryprecipitation/span/pp styletext-align:centernbsp;/p/section/sectionspan classcol_space stylewidth:0/spansection ideIcLrbayOexSijsL classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentp styletext-align:centernbsp;/pp styletext-align:centerspan classtext-72stylefont-size:72px;color:#fff;font-family:Techna-Sans-Regular-212/span项/pp styletext-align:centerspan stylecolor:#999国家专利/span/pp styletext-align:centerspan stylecolor:#4c4c4cnationalpatent/spanbrnbsp;/p/section/sectionspan classcol_space stylewidth:0/spansection idFmKhOfkFjEPzahaz classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0section classeditor ck-contentp styletext-align:centernbsp;/pp styletext-align:centerspan classtext-72stylefont-size:72px;color:#fff;font-family:Techna-Sans-Regular-220/span万/pp styletext-align:centerspan stylecolor:#999客户积累/span/pp styletext-align:centerspan stylecolor:#4c4c4cCustomerAccumulation/span/pp styletext-align:centernbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idccoyoMKlXImHpkif data-type-detailcustom data-justify_centerleftdata-align_centercenter classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col50_50 data-stick-parentclassrow stylewidth:100%section idLNbuMZgWpcMtyXlD classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(31, 55, 59);padding:0section classeditor ck-contentfigure classtable data-bordertruetabletbodytrtdnbsp;/tdtd colspan6pnbsp;/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:MontDemo-Heavy旅游摄影技巧nbsp;/span/ppspan classtext-12stylefont-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:ArialTourism Photography Skills/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial想要拍出令人惊叹的旅行照片吗我们将分享如何构图、运用光线、捕捉细节等技巧帮助您提升摄影技术捕捉旅途中的美好瞬间。nbsp;/span/ppnbsp;/ppa styleborder-color:rgb(255, 255, 255);color:rgb(255, 255, 255)hrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirectdata-layout3 data-stylewhitedata-setting{quot;beforequot;:{quot;bgquot;:quot;rgb(255, 255, 255)quot;,quot;outlinequot;:quot;1quot;,quot;colorquot;:quot;rgb(255, 255, 255)quot;},quot;afterquot;:{quot;bgquot;:quot;#f0f0f0quot;,quot;outlinequot;:quot;0quot;,quot;colorquot;:quot;#333quot;},quot;layoutquot;:quot;3quot;,quot;stylequot;:quot;whitequot;}data-before-outline1data-before-bgrgb(255, 255, 255)data-before-colorrgb(255, 255, 255)data-after-bg#f0f0f0data-after-color#333data-after-outline0target_blank更多/a/ppnbsp;/ppnbsp;/p/tdtdnbsp;/td/tr/tbody/table/figure/section/sectionspan classcol_space stylewidth:0/spansection idJgPHfGPONigKywsB classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(31, 55, 59);padding:0section classeditor ck-contentfigure classimage ue-image data-image-ratio4-3div classue-image-shadowstylebackground-image:url(style/images/img/b5d76e989b2c3678cfc2278fa2c6012a.jpg);width:100%;border-radius:0imgsrc./style/images/img/b5d76e989b2c3678cfc2278fa2c6012a.jpgdiv classue-image-mask/div/div/figure/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idFpxTBYBHWTkiGPUU data-type-detailcustom data-justify_centerleftdata-align_centercenter classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col50_50 data-stick-parentclassrow stylewidth:100%section idXwwLmCeXOvfvqklK classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(76, 58, 48);padding:0section classeditor ck-contentfigure classimage ue-image data-image-ratio4-3data-center60% 54%div classue-image-shadowstylebackground-image:url(style/images/img/7e77c2410edd20cf219740c8d017c1a4.jpg);background-position:60% 54%;width:100%;border-radius:0imgsrc./style/images/img/7e77c2410edd20cf219740c8d017c1a4.jpgdiv classue-image-mask/div/div/figure/section/sectionspan classcol_space stylewidth:0%/spansection idpMCDQsfrCupnWRhB classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(76, 58, 48);padding:0section classeditor ck-contentfigure classtable data-bordertruetabletbodytrtdnbsp;/tdtd colspan6pnbsp;/ppspan classtext-30stylefont-size:30px;color:#fff;font-family:MontDemo-Heavy旅行故事分享/span/ppspan classtext-12stylefont-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:ArialTravel Story Sharing/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial在我们的旅行故事分享板块您可以阅读到来自世界各地的旅行者的真实经历和感悟。这些故事将带您领略不同国家的风土人情激发您的旅行灵感。/span/ppnbsp;/ppa styleborder-color:rgb(255, 255, 255);color:rgb(255, 255, 255)hrefhttps://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU4NDc4MTY4MQactiongetalbumalbum_id2288753751610015749scene173from_msgid2247485724from_itemidx1count3nolastread1#wechat_redirectdata-layout3 data-stylewhitedata-setting{quot;beforequot;:{quot;bgquot;:quot;rgb(255, 255, 255)quot;,quot;outlinequot;:quot;1quot;,quot;colorquot;:quot;rgb(255, 255, 255)quot;},quot;afterquot;:{quot;bgquot;:quot;#f0f0f0quot;,quot;outlinequot;:quot;0quot;,quot;colorquot;:quot;#333quot;},quot;layoutquot;:quot;3quot;,quot;stylequot;:quot;whitequot;}data-before-outline1data-before-bgrgb(255, 255, 255)data-before-colorrgb(255, 255, 255)data-after-bg#f0f0f0data-after-color#333data-after-outline0target_blank更多/a/ppnbsp;/ppnbsp;/p/tdtdnbsp;/td/tr/tbody/table/figure/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:100px/div/section/section/section/section/divdiv idOmbgxXORKKXxJjRF data-key data-window_widthtrue data-limit_widthtruedata-stick-parent classlayout_group stylebackground-color:rgb(17, 17, 17)section data-effectparallax data-sizecontain data-postl classlayout_bg layout_bg_pcstylebackground-image:url(style/images/img/1567073497915.jpgquot)imgsrcstyle/images/img/1567073497915.jpg styleopacity:0div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection data-effectparallax data-sizecontain data-postl classlayout_bg layout_bg_mostylebackground-image:url(style/images/img/1567606202661.jpgquot)div classlayout_bg-mask stylebackground-color:rgba(255, 255, 255, 0)/div/sectionsection classlayout_limit_wrappersection classlayout_containersection classlayout_bodysection idqOJiKvLHYRwjWgXt data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate0 data-key data-col100 data-stick-parentclassrow stylewidth:100%section idQbPQoIJeXIKOoFUO classcol editor_wrapper col-100styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentsection classblank_block big_blanknbsp;/section/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idAkYpsWubIMOVFYLe data-type-detailcustom data-justify_centerleftdata-align_centercenter classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate3 data-key data-col25_50_25 data-stick-parentclassrow stylewidth:100%section idLfcBgMiSIbjPTnzg classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(34, 34, 34, 0.608);padding:5%section classeditor ck-contentpspan classtext-30stylecolor:#fff;font-size:30px;font-family:MontDemo-Heavy摄影比赛nbsp;/span/ppspan classtext-12stylecolor:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arialphotography/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial无论您是专业摄影师还是摄影爱好者都可以在这里分享您的旅行故事。nbsp;/span/phr classhr dashpspan classtext-30stylecolor:#fff;font-size:30px;font-family:MontDemo-Heavy摄影比赛nbsp;/span/ppspan classtext-12stylecolor:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arialphotography/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial无论您是专业摄影师还是摄影爱好者都可以在这里分享您的旅行故事。/spanspanstylecolor:rgba(255,255,255,0.743389423076923)nbsp;/span/ppnbsp;/p/section/sectionspan classcol_space stylewidth:0%/spansection idljlPtbljtHryiAol classcol editor_wrapper col-50styleborder-radius:0;background-color:rgb(4, 125, 46);padding:5%section classeditor ck-contentpspan classtext-72stylecolor:#fff;font-size:72px;font-family:MontDemo-Heavy社区交流nbsp;/span/ppspan classtext-30stylecolor:#fff;font-size:30px;font-family:MontDemo-HeavyCommunity communication/span/ppspan classtext-12stylecolor:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arialphotography/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial在我们的社区交流板块您可以与其他旅行者和摄影师互动交流分享彼此的经验和技术。这里是一个学习和成长的平台让您在旅途中结识志同道合的朋友。让我们一起用镜头记录下这个美丽的世界分享旅行的快乐与感动。欢迎加入我们的旅游摄影网站开启一段别样的视觉之旅/span/ppnbsp;/p/section/sectionspan classcol_space stylewidth:0%/spansection idHOXIoZhGFFPXInhI classcol editor_wrapper col-25styleborder-radius:0;background-color:rgba(34, 34, 34, 0.608);padding:5%section classeditor ck-contentpspan classtext-30stylefont-size:30px;color:#fff;font-family:MontDemo-Heavy摄影比赛nbsp;/span/ppspan classtext-12stylefont-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arialphotography/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial无论您是专业摄影师还是摄影爱好者都可以在这里分享您的旅行故事。nbsp;/span/phr classhr dashpspan classtext-30stylefont-size:30px;color:#fff;font-family:MontDemo-Heavy摄影比赛nbsp;/span/ppspan classtext-12stylefont-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arialphotography/span/ppnbsp;/ppspanstylecolor:rgba(255,255,255,0.743389423076923);font-family:Arial无论您是专业摄影师还是摄影爱好者都可以在这里分享您的旅行故事。/spanspanstylecolor:rgba(255,255,255,0.743389423076923)nbsp;/span/ppnbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idtKSCOxYODjiJpkKd data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate0 data-key data-col100 data-stick-parentclassrow stylewidth:100%section idTimbimuLCOpbDDZi classcol editor_wrapper col-100styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentsection classblank_block big_blanknbsp;/section/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/section/section/section/section/divdiv idBYKJHiXbSgexymQV data-key data-window_widthtrue data-limit_widthtruedata-stick-parent classlayout_group stylebackground-color:rgb(0, 0, 0)section classlayout_limit_wrappersection classlayout_containersection classlayout_bodysection idDHYVnqFPGQbhLUww data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate0 data-key data-col100 data-stick-parentclassrow stylewidth:100%section idxPMYKrZnKoBDgbeI classcol editor_wrapper col-100styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentsection classblank_block big_blanknbsp;/section/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idJngyqPUHwNVMNnOY data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate1 data-key data-col20_20_20_20_20data-stick-parent classrow stylewidth:100%section idlbXTuTWVZOXTrfKu classcol editor_wrapper col-20styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentpspan stylecolor:#e5e5e5;font-family:Arial详细地址/span/ppnbsp;/ppspan stylecolor:#999;font-family:Arialnbsp;花城大道667号/span/ppspan classtext-12stylefont-size:12px;font-family:ArialMarch 23,2023nbsp;/span/ppnbsp;/ppspan stylecolor:#999;font-family:ArialMeiLinnbsp;/span/ppspan classtext-12stylefont-size:12px;font-family:Arial17,2013nbsp;/span/ppnbsp;/ppspan stylecolor:#999;font-family:ArialMe Building/span/ppspan classtext-12stylefont-size:12px;font-family:ArialNovember 6,2022/span/ppnbsp;/p/section/sectionspan classcol_space stylewidth:5%/spansection idoAAPvqNbbWhwulII classcol editor_wrapper col-20styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentpspanstylecolor:#e5e5e5;font-family:Arial联系方式/span/ppnbsp;/ppspan stylefont-family:Arial公众号/span/ppspan classtext-26stylefont-size:26px;color:#00e04d;font-family:MontDemo-Heavymengchatchat91/span/ppnbsp;/ppspan stylefont-family:Arial星期一 至 星期五/span/ppspan stylefont-family:Arial早上9:00 – 下午18:00/span/ppnbsp;/ppnbsp;/p/section/sectionspan classcol_space stylewidth:5%/spansection idDiCADYBXqSUdhZjc classcol editor_wrapper col-20styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentpspanstylecolor:#e5e5e5;font-family:Arial作品集/span/ppnbsp;/ppspan stylefont-family:Arial写真旅游摄影作品/span/phr classhr dashpspan stylefont-family:Arial专业人像摄影/span/phr classhr dashpspan stylefont-family:Arial婚纱摄影作品/span/phr classhr dashpspan stylefont-family:Arial自然风光旅游摄影作品/span/ppnbsp;/p/section/sectionspan classcol_space stylewidth:5%/spansection idvVRzfmfELFWUNnLX classcol editor_wrapper col-20styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentpspan stylecolor:#fff扫一扫关注/span/ppnbsp;/pfigure classimage image-style-align-left image_resizedstylewidth:null%imgsrc./style/images/img/qrcode_for_gh.jpg/figurepnbsp;/p/section/sectionspan classcol_space stylewidth:5%/spansection idbEfEarBpxmNzfbBt classcol editor_wrapper col-20styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentpspan stylecolor:#e5e5e5;font-family:Arial关于nbsp;我们/span/ppnbsp;/ppspan stylefont-family:Arial欢迎来到我们的旅游摄影网站我深知每一次旅行都承载着独特的记忆和故事。/span/ppnbsp;/ppspan stylefont-family:Arial作为一个热爱旅行和摄影的行家曾在世界各地旅行拍摄我擅长运用光线、构图和色彩来表现旅行故事。/span/ppnbsp;/p/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/sectionsection idEGDipLYXcXNvHKvm data-type-detailcustom data-justify_centerleftdata-align_centertop classlayoutdiv classlayout-margin_placeholder_top stylepadding-top:0/divsection data-animate0 data-key data-col100 data-stick-parentclassrow stylewidth:100%section idwzazMMJjdSjfvEOp classcol editor_wrapper col-100styleborder-radius:0;background-color:rgba(255, 255, 255, 0);padding:0section classeditor ck-contentsection classblank_block big_blanknbsp;/section/section/section/sectiondiv classlayout-margin_placeholder_bottom stylepadding-top:0/div/section/section/section/section/div/div/div/div/div/div!-- 底部 --script typetext/javascript srcstyle/js/jquery.js/scriptscript typetext/javascript srcstyle/js/vender.js/scriptscript typetext/javascript srcstyle/js/app.js/script
/body
/html
然后创建一个CSS文件命名为vender.css并将以下代码添加到文件中
body { font-family: Arial, sans-serif; margin: 0; padding: 0;
} header { background-color: #333; color: #fff;
} nav ul { list-style-type: none; margin: 0; padding: 0;
} nav ul li { display: inline; margin-right: 10px;
} nav ul li a { color: #fff; text-decoration: none;
} .hero { background-image: url(hero-image.jpg); background-size: cover; height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
} .destination .gallery { display: flex; justify-content: center;
} .destination .gallery img { width: 300px; height: 200px; margin: 10px;
} .photography-tips ul { list-style-type: disc; margin-left: 20px;
}
......
还有app.css、others.css等样式表文件。
文件目录
