web静态网页设计与制作-基于HTML+CSS+JS实现旅游摄影网站
web静态网页设计与制作，基于HTML+CSS+JS实现精美的旅游摄影网站，拥有极简的设计风格，丰富的交互动效，让人眼前一亮，享受视觉上的体验。
我使用了基本的HTML结构来构建网页，并使用CSS样式进行美化设计，然后使用jquery.js实现酷炫的交互效果。需要注意的是，确保将所需的图片文件与HTML和CSS文件放在同一目录下。最后，将文件部署到Web服务器上，即可通过浏览器访问旅游摄影网站的单页应用。
旅游摄影网站应用如何设计与制作呢？
可以按照以下步骤进行：
- 确定需求和页面内容：确定网站需要展示的内容和每个页面的功能需求。例如，首页、摄影作品集、目的地推荐、旅游摄影技巧 、旅行故事分享等。
- 设计页面布局：根据需求，设计每个页面的布局和样式，包括页面结构、导航栏、主要内容区域、底部信息等。
- 准备网站素材：根据页面布局，准备所需的图片、文字等素材。对于旅游摄影网站，可以准备一些精美的景点图片、游记图片等。
- 编写页面代码：使用HTML、CSS和JavaScript等前端技术编写页面的代码。在编写过程中，要注意代码的可读性和可维护性，同时遵循网页语义化和响应式设计原则。
- 实现页面交互：根据需求，添加所需的交互效果和功能。例如，轮播图、图片放大效果、表单验证等。
- 测试页面效果：在开发过程中，不断进行测试和调试，确保页面显示效果和功能正常。
- 发布和部署：完成测试后，将页面代码部署到服务器上，发布网站。
在开发过程中，可以使用一些前端开发工具和框架来提高效率和质量，例如Bootstrap、jQuery等。同时，要注意页面的响应式设计和用户体验，确保网站可以在不同的设备和屏幕尺寸上正常显示和访问。
下面展示如何使用HTML和CSS开发一个旅游摄影网站的单页应用。
首先，创建一个HTML文件，命名为index.html，并将以下代码添加到文件中：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旅游摄影网站</title> <meta name="keywords" content="木番薯科技(公众号),网站设计与制作"><meta name="description" content="木番薯科技(公众号)极速建站，设计交互领先的网站产品，适合个人、企业网站建设"><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" />
</head>
<body class="bodylist bodysinglepage disable-between"><div id="sitecontent" class="sitecontent"><div class="npagePage default content_editor"><div class="content"><div class="postbody1 postbody"><div id="page_body_editor-wrapper" data-type='' class="page_body_editor-wrapper"><div id=BKyZlEXUcMdfZdpx data-key='' data-window_width=true data-limit_width=truedata-stick-parent='' class="layout_group" style='background-color:rgb(17, 17, 17)'><section data-effect=parallax data-size=contain data-pos=tc class='layout_bg layout_bg_pc'style="background-image:url(style/images/img/1567067636627.jpgquot)"><img src="style/images/img/1567067636627.jpg" style="opacity:0"><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section data-effect=parallax data-size=contain data-pos=tl class='layout_bg layout_bg_mo' style=background-image:url(style/images/img/1567606058151.jpgquot)><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section class=layout_limit_wrapper><section class=layout_container><section class=layout_body><section id=OhovjeKEMrutJijq data-type-detail=custom data-justify_center=centerdata-align_center=center class=layout><div class=layout-margin_placeholder_top style=padding-top:100px></div><section data-animate=1 data-key='' data-col=50_25_25 data-stick-parent='' class=row style=width:100%><section id=QIckvCikUMBfEMri class='col editor_wrapper col-50' style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p> </p><p><span class=text-72 style=font-size:72px;color:#fff;font-family:MontDemo-Heavy>自然景观</span><spanclass=text-72style=font-size:72px;color:#fff> </span></p><p><span class=text-30style=font-size:30px;color:#00e04d;font-family:Arial>旅游摄影作品</span></p><p> </p><figure class=media><div class='ck_share ck_share_style_one ck_share_theme_black ck_share_pos_left'data-oembed-url=''><section class=ck-share-container><ahref='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=_blankclass='ck-share-item ck-share-type-weibo'><i class='ifont ifont-weibo'></i><span class=ck-editor-name></span></a><ahref='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=_blankclass='ck-share-item ck-share-type-weixin'><i class='ifont ifont-weixin'></i><span class=ck-editor-name></span></a><a href=tel:4000000000 target=_blankclass='ck-share-item ck-share-type-call'><i class='ifont ifont-call'></i><span class=ck-editor-name></span></a></section></div></figure><p> </p><p> </p><p> </p></section></section><span class=col_space style=width:6%></span><section id=kgNaZwFBlTpFwIkq class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p> </p><p style=text-align:center> </p><figure class=table data-border=true><table><tbody><tr><td> </td><td colspan=4><figure class=image><imgstyle=border-radius:100pxsrc=./style/images/img/tx.png></figure></td><td> </td></tr></tbody></table></figure><p style=text-align:center><span style=color:#999>非著名摄影师</span><span style=color:#00e04d>李潇然</span></p><p style=text-align:center> </p><p> </p></section></section><span class=col_space style=width:6%></span><section id=sVyZnLMcglNlhZfZ class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p> </p><p><span class=text-26style=font-size:26px;color:#fff;font-family:MontDemo-Heavy>2016-2023</span></p><p> </p><p><span style=color:#999>自然风光摄影， </span><spanstyle=color:#0ff661> 旅游摄影 </span><spanstyle=color:#999>，婚纱摄影和写真摄影 </span></p><p> </p><p><a style='border-color:rgb(255, 255, 255);color:rgb(255, 255, 255)'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_redirectdata-layout=3 data-style=whitedata-setting='{"before":{"bg":"rgb(255, 255, 255)","outline":"1","color":"rgb(255, 255, 255)"},"after":{"bg":"#f0f0f0","outline":"0","color":"#333"},"layout":"3","style":"white"}'data-before-outline=1data-before-bg='rgb(255, 255, 255)'data-before-color='rgb(255, 255, 255)'data-after-bg=#f0f0f0 data-after-color=#333data-after-outline=0 target=_blank>更多</a></p><p> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=QTLtFFfsHMyLQtpn data-type-detail=custom data-justify_center=centerdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=33_33_33 data-stick-parent=''class=row style=width:100%><section id=TdEnAsfRnZqmqQBi class='col editor_wrapper col-33'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><figure class='image ue-image' data-image-ratio=3-4><div class=ue-image-shadowstyle=background-image:url(style/images/img/9cc343006af5d01c86a5cc73c3e600fb.jpg);width:100%;border-radius:0><imgsrc=./style/images/img/9cc343006af5d01c86a5cc73c3e600fb.jpg><div class=ue-image-mask></div></div></figure><p> </p><p><span class=text-12style=font-size:12px;color:#999;font-family:Roboto-Light>旅游摄影作品</span></p><p><span class=text-30style=font-size:30px;color:#fff;font-family:Techna-Sans-Regular-2>暮光之野</span></p><p> </p><p> </p></section></section><span class=col_space style=width:1%></span><section id=lXgfnvswRzDQnIuu class='col editor_wrapper col-33'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><figure class='image ue-image' data-image-ratio=3-4><div class=ue-image-shadowstyle=background-image:url(style/images/img/40acaef6ba943d444d3e103506e730a9.jpg);width:100%;border-radius:0><imgsrc=./style/images/img/40acaef6ba943d444d3e103506e730a9.jpg><div class=ue-image-mask></div></div></figure><p> </p><p><span class=text-12style=font-size:12px;color:#999;font-family:Roboto-Light>旅游摄影作品</span></p><p><span class=text-30style=font-size:30px;color:#fff;font-family:RobotoJ-Bold-2>夜幕降临</span></p><p> </p><p> </p></section></section><span class=col_space style=width:1%></span><section id=PGVaJleAaCHLlxQM class='col editor_wrapper col-33'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><figure class='image ue-image' data-image-ratio=3-4><div class=ue-image-shadowstyle=background-image:url(style/images/img/fb8d6dcb9c0c841867114557d0d4fbdf.jpg);width:100%;border-radius:0><imgsrc=./style/images/img/fb8d6dcb9c0c841867114557d0d4fbdf.jpg><div class=ue-image-mask></div></div></figure><p> </p><p><span class=text-12style=font-size:12px;color:#999;font-family:Montserrat-Light-6>旅游摄影作品</span></p><p><span class=text-30style=font-size:30px;color:#fff;font-family:RobotoJ-Bold-2>山野之巅</span></p><p> </p><p> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=iYTiQFjkNBqJyXrY data-type-detail=custom data-justify_center=centerdata-align_center=center class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=50_50 data-stick-parent=''class=row style=width:100%><section id=YFahiMYVbiFunOoI class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(29, 29, 29);padding:5%'><section class='editor ck-content'><p> </p><p><span class=text-30style=font-size:30px;color:#fff;font-family:Montserrat-Medium-7>探索世界，捕捉精彩</span></p><p><span class=text-12style=font-size:12px;color:#4c4c4c;font-family:Arial>公众号-木番薯科技</span></p><p> </p><p><span style=color:#999;font-family:Arial>欢迎来到我们的旅游摄影网站！这里是一个集合了全球各地美丽景点和独特文化的平台，让我们一起探索这个五彩斑斓的世界。</span></p><p> </p><p><a style='border-color:rgb(255, 255, 255);color:rgb(255, 255, 255)'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_redirectdata-layout=3 data-style=whitedata-setting='{"before":{"bg":"rgb(255, 255, 255)","outline":"1","color":"rgb(255, 255, 255)"},"after":{"bg":"#f0f0f0","outline":"0","color":"#333"},"layout":"3","style":"white"}'data-before-outline=1data-before-bg='rgb(255, 255, 255)'data-before-color='rgb(255, 255, 255)'data-after-bg=#f0f0f0 data-after-color=#333data-after-outline=0 target=_blank>更多</a></p><p> </p><p> </p></section></section><span class=col_space style=width:0%></span><section id=TyljhhHoOSgQLvny class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(4, 125, 46);padding:5%'><section class='editor ck-content'><p> </p><p><span class=text-30style=font-size:30px;color:#fff;font-family:Montserrat-Medium-7>目的地推荐</span></p><p><span class=text-12style=font-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial>公众号-木番薯科技</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>无论您是喜欢自然风光还是人文历史，我们的目的地推荐板块将满足您的需求。我们为您精选了全球最值得一游的景点，从壮观的自然奇观到繁华的城市风光，让您足不出户就能感受到不同地域的魅力。</span></p><p> </p><p><a style='border-color:rgb(255, 255, 255);color:rgb(255, 255, 255)'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_redirectdata-layout=3 data-style=whitedata-setting='{"before":{"bg":"rgb(255, 255, 255)","outline":"1","color":"rgb(255, 255, 255)"},"after":{"bg":"#f0f0f0","outline":"0","color":"#333"},"layout":"3","style":"white"}'data-before-outline=1data-before-bg='rgb(255, 255, 255)'data-before-color='rgb(255, 255, 255)'data-after-bg=#f0f0f0 data-after-color=#333data-after-outline=0 target=_blank>更多</a></p><p> </p><p> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section></section></section></section></div><div id=LIJfnrCoXcWweRKt data-key='' data-window_width=true data-limit_width=truedata-stick-parent='' class=layout_group style='background-color:rgb(17, 17, 17)'><section data-effect=parallax data-size=contain data-pos=tc class='layout_bg layout_bg_pc'style=background-image:url(style/images/img/1567102749606.jpgquot)><imgsrc=style/images/img/1567102749606.jpg style=opacity:0><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section data-effect=normal data-size=normal data-pos=tl class='layout_bg layout_bg_mo'style=background-image:url(style/images/img/quotquot)><imgsrc=style/images/img/1567102749606.jpg style=opacity:0><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section class=layout_limit_wrapper><section class=layout_container><section class=layout_body><section id=GMuLJoXYLgyoLGLb data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=25_25_25_25data-stick-parent='' class=row style=width:100%><section id=qOuFBJVaeufwhaNb class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p style=text-align:center> </p><p style=text-align:center><span class=text-60style=font-size:60px;color:#fff;font-family:Techna-Sans-Regular-2>6</span>年<br><spanstyle=color:#999>运营经验</span></p><p style=text-align:center><span style=color:#4c4c4c>Operationalexperience</span></p><p style=text-align:center> </p></section></section><span class=col_space style=width:0></span><section id=btXaiaYkWrJXzzBE class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p style=text-align:center> </p><p style=text-align:center><span class=text-72style=font-size:72px;color:#fff;font-family:Techna-Sans-Regular-2>5</span>年</p><p style=text-align:center><span style=color:#999>行业沉淀</span></p><p style=text-align:center><span style=color:#4c4c4c>Industryprecipitation</span></p><p style=text-align:center> </p></section></section><span class=col_space style=width:0></span><section id=eIcLrbayOexSijsL class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p style=text-align:center> </p><p style=text-align:center><span class=text-72style=font-size:72px;color:#fff;font-family:Techna-Sans-Regular-2>12</span>项</p><p style=text-align:center><span style=color:#999>国家专利</span></p><p style=text-align:center><span style=color:#4c4c4c>nationalpatent</span><br> </p></section></section><span class=col_space style=width:0></span><section id=FmKhOfkFjEPzahaz class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:5% 0'><section class='editor ck-content'><p style=text-align:center> </p><p style=text-align:center><span class=text-72style=font-size:72px;color:#fff;font-family:Techna-Sans-Regular-2>20</span>万</p><p style=text-align:center><span style=color:#999>客户积累</span></p><p style=text-align:center><span style=color:#4c4c4c>CustomerAccumulation</span></p><p style=text-align:center> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=ccoyoMKlXImHpkif data-type-detail=custom data-justify_center=leftdata-align_center=center class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=50_50 data-stick-parent=''class=row style=width:100%><section id=LNbuMZgWpcMtyXlD class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(31, 55, 59);padding:0'><section class='editor ck-content'><figure class=table data-border=true><table><tbody><tr><td> </td><td colspan=6><p> </p><p><span class=text-30style=font-size:30px;color:#fff;font-family:MontDemo-Heavy>旅游摄影技巧 </span></p><p><span class=text-12style=font-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial>Tourism Photography Skills</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>想要拍出令人惊叹的旅行照片吗？我们将分享如何构图、运用光线、捕捉细节等技巧，帮助您提升摄影技术，捕捉旅途中的美好瞬间。 </span></p><p> </p><p><a style='border-color:rgb(255, 255, 255);color:rgb(255, 255, 255)'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_redirectdata-layout=3 data-style=whitedata-setting='{"before":{"bg":"rgb(255, 255, 255)","outline":"1","color":"rgb(255, 255, 255)"},"after":{"bg":"#f0f0f0","outline":"0","color":"#333"},"layout":"3","style":"white"}'data-before-outline=1data-before-bg='rgb(255, 255, 255)'data-before-color='rgb(255, 255, 255)'data-after-bg=#f0f0f0data-after-color=#333data-after-outline=0target=_blank>更多</a></p><p> </p><p> </p></td><td> </td></tr></tbody></table></figure></section></section><span class=col_space style=width:0></span><section id=JgPHfGPONigKywsB class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(31, 55, 59);padding:0'><section class='editor ck-content'><figure class='image ue-image' data-image-ratio=4-3><div class=ue-image-shadowstyle=background-image:url(style/images/img/b5d76e989b2c3678cfc2278fa2c6012a.jpg);width:100%;border-radius:0><imgsrc=./style/images/img/b5d76e989b2c3678cfc2278fa2c6012a.jpg><div class=ue-image-mask></div></div></figure></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=FpxTBYBHWTkiGPUU data-type-detail=custom data-justify_center=leftdata-align_center=center class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=50_50 data-stick-parent=''class=row style=width:100%><section id=XwwLmCeXOvfvqklK class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(76, 58, 48);padding:0'><section class='editor ck-content'><figure class='image ue-image' data-image-ratio=4-3data-center='60% 54%'><div class=ue-image-shadowstyle='background-image:url(style/images/img/7e77c2410edd20cf219740c8d017c1a4.jpg);background-position:60% 54%;width:100%;border-radius:0'><imgsrc=./style/images/img/7e77c2410edd20cf219740c8d017c1a4.jpg><div class=ue-image-mask></div></div></figure></section></section><span class=col_space style=width:0%></span><section id=pMCDQsfrCupnWRhB class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(76, 58, 48);padding:0'><section class='editor ck-content'><figure class=table data-border=true><table><tbody><tr><td> </td><td colspan=6><p> </p><p><span class=text-30style=font-size:30px;color:#fff;font-family:MontDemo-Heavy>旅行故事分享</span></p><p><span class=text-12style=font-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial>Travel Story Sharing</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>在我们的旅行故事分享板块，您可以阅读到来自世界各地的旅行者的真实经历和感悟。这些故事将带您领略不同国家的风土人情，激发您的旅行灵感。</span></p><p> </p><p><a style='border-color:rgb(255, 255, 255);color:rgb(255, 255, 255)'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_redirectdata-layout=3 data-style=whitedata-setting='{"before":{"bg":"rgb(255, 255, 255)","outline":"1","color":"rgb(255, 255, 255)"},"after":{"bg":"#f0f0f0","outline":"0","color":"#333"},"layout":"3","style":"white"}'data-before-outline=1data-before-bg='rgb(255, 255, 255)'data-before-color='rgb(255, 255, 255)'data-after-bg=#f0f0f0data-after-color=#333data-after-outline=0target=_blank>更多</a></p><p> </p><p> </p></td><td> </td></tr></tbody></table></figure></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:100px></div></section></section></section></section></div><div id=OmbgxXORKKXxJjRF data-key='' data-window_width=true data-limit_width=truedata-stick-parent='' class=layout_group style='background-color:rgb(17, 17, 17)'><section data-effect=parallax data-size=contain data-pos=tl class='layout_bg layout_bg_pc'style=background-image:url(style/images/img/1567073497915.jpgquot)><imgsrc=style/images/img/1567073497915.jpg style=opacity:0><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section data-effect=parallax data-size=contain data-pos=tl class='layout_bg layout_bg_mo'style=background-image:url(style/images/img/1567606202661.jpgquot)><div class=layout_bg-mask style='background-color:rgba(255, 255, 255, 0)'></div></section><section class=layout_limit_wrapper><section class=layout_container><section class=layout_body><section id=qOJiKvLHYRwjWgXt data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=0 data-key='' data-col=100 data-stick-parent=''class=row style=width:100%><section id=QbPQoIJeXIKOoFUO class='col editor_wrapper col-100'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><section class='blank_block big_blank'> </section></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=AkYpsWubIMOVFYLe data-type-detail=custom data-justify_center=leftdata-align_center=center class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=3 data-key='' data-col=25_50_25 data-stick-parent=''class=row style=width:100%><section id=LfcBgMiSIbjPTnzg class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(34, 34, 34, 0.608);padding:5%'><section class='editor ck-content'><p><span class=text-30style=color:#fff;font-size:30px;font-family:MontDemo-Heavy>摄影比赛 </span></p><p><span class=text-12style=color:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arial>photography</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>无论您是专业摄影师还是摄影爱好者，都可以在这里分享您的旅行故事。 </span></p><hr class='hr dash'><p><span class=text-30style=color:#fff;font-size:30px;font-family:MontDemo-Heavy>摄影比赛 </span></p><p><span class=text-12style=color:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arial>photography</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>无论您是专业摄影师还是摄影爱好者，都可以在这里分享您的旅行故事。</span><spanstyle=color:rgba(255,255,255,0.743389423076923)> </span></p><p> </p></section></section><span class=col_space style=width:0%></span><section id=ljlPtbljtHryiAol class='col editor_wrapper col-50'style='border-radius:0;background-color:rgb(4, 125, 46);padding:5%'><section class='editor ck-content'><p><span class=text-72style=color:#fff;font-size:72px;font-family:MontDemo-Heavy>社区交流 </span></p><p><span class=text-30style=color:#fff;font-size:30px;font-family:MontDemo-Heavy>Community communication</span></p><p><span class=text-12style=color:rgba(255,255,255,0.24338942307692307);font-size:12px;font-family:Arial>photography</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>在我们的社区交流板块，您可以与其他旅行者和摄影师互动交流，分享彼此的经验和技术。这里是一个学习和成长的平台，让您在旅途中结识志同道合的朋友。让我们一起用镜头记录下这个美丽的世界，分享旅行的快乐与感动。欢迎加入我们的旅游摄影网站，开启一段别样的视觉之旅！</span></p><p> </p></section></section><span class=col_space style=width:0%></span><section id=HOXIoZhGFFPXInhI class='col editor_wrapper col-25'style='border-radius:0;background-color:rgba(34, 34, 34, 0.608);padding:5%'><section class='editor ck-content'><p><span class=text-30style=font-size:30px;color:#fff;font-family:MontDemo-Heavy>摄影比赛 </span></p><p><span class=text-12style=font-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial>photography</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>无论您是专业摄影师还是摄影爱好者，都可以在这里分享您的旅行故事。 </span></p><hr class='hr dash'><p><span class=text-30style=font-size:30px;color:#fff;font-family:MontDemo-Heavy>摄影比赛 </span></p><p><span class=text-12style=font-size:12px;color:rgba(255,255,255,0.24338942307692307);font-family:Arial>photography</span></p><p> </p><p><spanstyle=color:rgba(255,255,255,0.743389423076923);font-family:Arial>无论您是专业摄影师还是摄影爱好者，都可以在这里分享您的旅行故事。</span><spanstyle=color:rgba(255,255,255,0.743389423076923)> </span></p><p> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=tKSCOxYODjiJpkKd data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=0 data-key='' data-col=100 data-stick-parent=''class=row style=width:100%><section id=TimbimuLCOpbDDZi class='col editor_wrapper col-100'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><section class='blank_block big_blank'> </section></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section></section></section></section></div><div id=BYKJHiXbSgexymQV data-key='' data-window_width=true data-limit_width=truedata-stick-parent='' class=layout_group style='background-color:rgb(0, 0, 0)'><section class=layout_limit_wrapper><section class=layout_container><section class=layout_body><section id=DHYVnqFPGQbhLUww data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=0 data-key='' data-col=100 data-stick-parent=''class=row style=width:100%><section id=xPMYKrZnKoBDgbeI class='col editor_wrapper col-100'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><section class='blank_block big_blank'> </section></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=JngyqPUHwNVMNnOY data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=1 data-key='' data-col=20_20_20_20_20data-stick-parent='' class=row style=width:100%><section id=lbXTuTWVZOXTrfKu class='col editor_wrapper col-20'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><p><span style=color:#e5e5e5;font-family:Arial>详细地址</span></p><p> </p><p><span style=color:#999;font-family:Arial> 花城大道667号</span></p><p><span class=text-12style=font-size:12px;font-family:Arial>March 23,2023 </span></p><p> </p><p><span style=color:#999;font-family:Arial>MeiLin </span></p><p><span class=text-12style=font-size:12px;font-family:Arial>17,2013 </span></p><p> </p><p><span style=color:#999;font-family:Arial>Me Building</span></p><p><span class=text-12style=font-size:12px;font-family:Arial>November 6,2022</span></p><p> </p></section></section><span class=col_space style=width:5%></span><section id=oAAPvqNbbWhwulII class='col editor_wrapper col-20'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><p><spanstyle=color:#e5e5e5;font-family:Arial>联系方式</span></p><p> </p><p><span style=font-family:Arial>公众号</span></p><p><span class=text-26style=font-size:26px;color:#00e04d;font-family:MontDemo-Heavy>mengchatchat91</span></p><p> </p><p><span style=font-family:Arial>星期一 至 星期五</span></p><p><span style=font-family:Arial>早上9:00 – 下午18:00</span></p><p> </p><p> </p></section></section><span class=col_space style=width:5%></span><section id=DiCADYBXqSUdhZjc class='col editor_wrapper col-20'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><p><spanstyle=color:#e5e5e5;font-family:Arial>作品集</span></p><p> </p><p><span style=font-family:Arial>写真旅游摄影作品</span></p><hr class='hr dash'><p><span style=font-family:Arial>专业人像摄影</span></p><hr class='hr dash'><p><span style=font-family:Arial>婚纱摄影作品</span></p><hr class='hr dash'><p><span style=font-family:Arial>自然风光旅游摄影作品</span></p><p> </p></section></section><span class=col_space style=width:5%></span><section id=vVRzfmfELFWUNnLX class='col editor_wrapper col-20'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><p><span style=color:#fff>扫一扫关注</span></p><p> </p><figure class='image image-style-align-left image_resized'style=width:null%><imgsrc=./style/images/img/qrcode_for_gh.jpg></figure><p> </p></section></section><span class=col_space style=width:5%></span><section id=bEfEarBpxmNzfbBt class='col editor_wrapper col-20'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><p><span style=color:#e5e5e5;font-family:Arial>关于 我们</span></p><p> </p><p><span style=font-family:Arial>欢迎来到我们的旅游摄影网站，我深知每一次旅行都承载着独特的记忆和故事。</span></p><p> </p><p><span style=font-family:Arial>作为一个热爱旅行和摄影的行家，曾在世界各地旅行拍摄，我擅长运用光线、构图和色彩来表现旅行故事。</span></p><p> </p></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section><section id=EGDipLYXcXNvHKvm data-type-detail=custom data-justify_center=leftdata-align_center=top class=layout><div class=layout-margin_placeholder_top style=padding-top:0></div><section data-animate=0 data-key='' data-col=100 data-stick-parent=''class=row style=width:100%><section id=wzazMMJjdSjfvEOp class='col editor_wrapper col-100'style='border-radius:0;background-color:rgba(255, 255, 255, 0);padding:0'><section class='editor ck-content'><section class='blank_block big_blank'> </section></section></section></section><div class=layout-margin_placeholder_bottom style=padding-top:0></div></section></section></section></section></div></div></div></div></div></div><!-- 底部 --><script type="text/javascript" src="style/js/jquery.js"></script><script type="text/javascript" src="style/js/vender.js"></script><script type="text/javascript" src="style/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等样式表文件。
文件目录：
相关文章：
web静态网页设计与制作-基于HTML+CSS+JS实现旅游摄影网站
web静态网页设计与制作，基于HTMLCSSJS实现精美的旅游摄影网站，拥有极简的设计风格，丰富的交互动效，让人眼前一亮，享受视觉上的体验。 我使用了基本的HTML结构来构建网页，并使用CSS样式进行美化设计…...
每日一题：LeetCode-1089. 复写零
每日一题系列（day 09） 前言： 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🌈 🔎…...
React Native环境搭建及Hello World
写这篇博客的目的就是想说,react native 挺简单,但是大部分初级前端会被环境搭建给难住,从而放弃. 环境搭建 环境搭建其实说简单也挺简单的,有经验的前端直接翻看react native中文文档就行,直接按上面来肯定没错 以下以安卓开发,windows配置环境为例,来演示一遍 首先 电脑…...
VS2017 C++ Qt工程打包软件
在Debug模式下或者Release模式下编译成功，会在工程的Debug文件夹和Release文件夹生成exe执行文件，以Debug为例，将Debug模式下的exe复制到新的文件夹路径下，然后打开Qt中的MSVC 2017 64-bit 打开后然后在命令窗口cd到exe的路径下&…...
【JWT的原理和使用】
JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案，本文介绍它的原理和用法。 文章目录 一、跨域认证的问题二、JWT 的原理三、JWT 的数据结构3.1 Header3.2 Payload3.3 Signature3.4 Base64URL 四、JWT 的使用方式五、JWT 的几个特点…...
对本地存储的有效期的理解
本地存储是一种在Web开发中常用的客户端存储数据的方式，它可以让网页应用程序在用户的浏览器中存储和检索数据，而无需依赖服务器来保存信息。本地存储的有效期是指数据存储在用户的设备上可以被访问和保留的时间段。在本地存储中，有两种主要的…...
蓝桥杯-02-蓝桥杯Java组考点与14届真题
文章目录 蓝桥杯Java组考点与14届真题参考资源Java组考点1. 组别2. 竞赛赛程3. 竞赛形式4. 参赛选手机器环境5. 试题形式5.1. 结果填空题5.2. 编程大题 6. 试题考查范围7. 答案提交8. 评分9. 样题样题 1：矩形切割（结果填空题）样题 2ÿ…...
门户网站二级等保评测问题，服务器漏洞问题解决办法
二级等保查出来的服务器问题 操作前可在自己服务器测试一下，看看有没有用 1.服务器定时更换密码 永久（需重启） vim /etc/login.defs PASS_MAX_DAYS 90 # 密码最长过期天数 PASS_MIN_DAYS 0 # 密码最小过期天数 PASS_MIN_LEN 10 # 密码…...
NPDP考前注意事项，这些细节你可要注意！
产品经理国际资格产认证（NPDP）2023年考试将于2023年12月2日（本周六）进行，你准备好了吗？ 考试详情 考试时间：2023年12月2日 上午9:00-12:30 考试题型：200题，单选题。 考…...
八个优秀开源内网穿透工具
内网穿透（NAT穿透）是一种将本地网络服务暴露给互联网的一种技术。这种技术可以很好地解决许多局域网内的资源共享。采用路由的方式将一台计算机变成一个“路由器”，将公共的网络地址转为内部网络地址，从而实现通过英特网可以访问局…...
C语言贪吃蛇（有详细注释）
这个贪吃蛇是在比特特训营里学到的，同时我还写了用EasyX图形库实现的图形化贪吃蛇，含有每个函数的实现以及游戏中各种细节的讲解，感兴趣的可以去看一看。 贪吃蛇小游戏 实现效果 以下就是源码，感兴趣的小伙伴可以cv自己玩一玩改…...
MUI框架从新手入门【webapp开发教程】
文章目录 MUI -最接近原生APP体验的高性能前端框架APP开发3.25 开发记录miu框架介绍头部/搜索框：身体>轮播图轮播图设置数据自动跳转：九宫格图片九宫格图文列表底部选项卡按钮选择器手机模拟器 心得与总结：MUI框架在移动应用开发中的应用M…...
HNU-计算机网络-讨论课2
第二次 有关网络智能、安全以及未来网络的讨论 一、必选问题（每组自由选择N个，保证组内每人负责1个） 网络的发展促进信息的传播，极大提高了人类的感知能力，整个世界都被纳入人类的感知范围。但人们对信息系统以及数据…...
西南科技大学信号与系统A实验一（信号的产生与时域运算）
目录 一、实验目的 二、实验原理 三、实验内容 四、思考题 一、实验目的 1、 掌握用matlab软件产生基本信号的方法。 2、 应用matlab软件实现信号的加、减、乘、反褶、移位、尺度变换及卷积运算 二、实验原理 （一） 产生信号波形的方法 利用Matlab软件的信号处…...
代码随想录二刷 ｜字符串 ｜翻转字符串里的单词
代码随想录二刷 ｜字符串 ｜翻转字符串里的单词 题目描述解题思路 & 代码实现移除多个空格将整个字符串翻转将每个单词翻转 题目描述 151.翻转字符串里的单词 给你一个字符串 s ，请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成…...
低调使用。推荐一个 GPT4 Turbo、Vision、GPTs、DELL·E3 等所有最新功能同步可用国内网站
在 11 月 6 日，万众期待的 OpenAI DevDay，ChatGPT 发布了一系列新的产品，其中推出了 GPT4 Turbo，并且将GPT4 Vision，DELLE3 等等能力全部集合到一起，不需要再分开使用，原来的局限的文本聊天也进…...
基于视觉传感器的自主扫雷机器人设计与实现
摘要： 在当今的世界安全形势下，扫雷小车的出现可以减少各国人员在扫雷过程中的人员伤亡，扫雷小车实用性能强更适合在军事化领域或者是民用领域上应用。让它具有光明的发展前景。针对这一情况，本毕业设计就对自主扫雷小车进行研究…...
计算机新建盘符和重新分配盘符的大小
一、新建盘符 有些电脑刚买来时候，只有一个C盘分区，此时最好增加几个分区方便使用。 注意：分区操作要慎重，不要轻易去试。这里只针对购买的电脑厂家未做分区，只有一个C盘的情况。 如果自己电脑的分区本身已经满足你…...
windows 查看mysql的错误日志
查找错误日志文件存储路径 用到的软件：everything 官网 voidtools 下载路径 https://www.voidtools.com/Everything-1.4.1.1024.x64-Setup.exe 直接点击下载即可 运行效果如下 我们知道mysql有个配置文件是my.ini，里面配置了相关信息 我们需要先…...
java多线程CountDownLatch简单测试
学习java多线程，请同时参阅 Java多线程 信号量和屏障实现控制并发线程数量，主线程等待所有线程执行完毕1 CountDownLatch能够使一个线程在等待另外一些线程完成各自工作之后再继续执行。当所有的线程都已经完成任务，然后在CountDownLatch上…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
嵌入式常见 CPU 架构
架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集，单周期执行；低功耗、CIP 独立外设；用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel（原始…...