静态网页设计——千姿百色旅游网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!

感谢大佬的视频:
https://www.bilibili.com/video/BV1oe411m7kH/?vd_source=5f425e0074a7f92921f53ab87712357b

源码:https://space.bilibili.com/565112134

使用技术:HTML+CSS+JS(静态网页设计)

主要内容:对百色的旅游景点进行介绍。

主要内容

1、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。

最上方使用li标签+css设计制作的菜单导航,还有使用js实现的轮播图,可以自动切换图片,或者点击下方的按钮可以手动切换图片。

代码:

html 复制代码
<div class="nav-bg">
   		   <div class="nav">
       		<a href="index.html">首页</a>
        	<a href="travel.html">旅游景点</a>
        	<a href="delicious food.html">特色美食</a>
        	<a href="local festivals.html">地方性节日</a>
        	<a href="red culture.html">红色文化</a>
        	<a href="advice.html">留言</a>
  		   </div>
</div> 
<!--nav end-->                  
<!--banner begin-->
<div class="banner">
    <div align="center">
      <ul class="banner_pic" id="banner_pic">
        <li class="current"><img class="one" src="images/1.jpeg"></li>
        <li class="pic"><img class="one" src="images/2.jpeg"></li>
        <li class="pic"><img class="one" src="images/3.jpg"></li>
        <li class="pic"><img class="one" src="images/4.jpeg"></li>
      </ul>
      <ol id="button">
        <li class="current"></li>
        <li class="but"></li>
        <li class="but"></li>
        <li class="but"></li>
      </ol>
    </div>
</div>
2、旅游景点

该页面使用html+css设计结构和样式,将图片img标签设计成排列整齐的卡片,有些还是卡片超链接,鼠标放上去卡片或者卡片上的文字会变色。

代码:

html 复制代码
<h1>百色市境内著名旅游景点</h1>
<!-- part begin-->
<div id="part">
    <div class="part1_con">
        <img class="images" src="images/p1.jpeg">
<h2 class="one">百色起义纪念馆</h2>
        <p class="two">位于东北郊迎龙山。成立于1961年,原名"右江革命文物馆"。1996年11月1日,经江泽民同志题写,正式改名为"百色起义纪念馆"。</p>
        <p class="shadow"></p>
    </div>
    <div class="part1_con">
        <img class="images" src="images/p2.jpeg">
<h2 class="one">澄碧湖</h2>
        <p class="two">风景婉约秀丽,有神奇的天然雅芒崖像、孔雀迎宾林、松林岛、枫树岛、情人岛、鲸鱼岛、水果绿洲等。游客可在湖区一侧步行观光,也可乘船环湖游览。</p>
        <p class="shadow"></p>
    </div>
    <div class="part1_con">
   	  <img class="images" src="images/p3.jpeg">
3、特殊水果

该页面使用p标签和人span标签嵌入许多文本,将关于网站主题的介绍全部写到网页中,文字排版根据字数来进行,使用不会出现不协调的情况。在文字旁边,使用img标签嵌入一些图片,使得网页整体更加的美观。

代码:

html 复制代码
<h1>特色水果</h1>
<div class="main">
<img src="images/f1.gif">
<h2 class="one">田东桂七芒果</h2>
<p>田东的青皮桂七香芒果是广西特有的芒果名品,在本地拥有极高的知名度及美誉度,对芒果口味及品质要求较高的人,大多只钟情于桂七芒果而无视其他品种;个重约200-500克,形态玲珑高雅,口味香甜浓郁;桂七香芒每年仅7、8月2个月的供应期,果期异常短暂,愈见其弥足珍贵。直至今日,桂七香芒形成规模生产的时间不过短短10几年,而在此前,桂七香芒作为极其贵重的水果礼物,基本都是由政府等部门作为礼品或是单位福利采购,很少直接在市场上流通,因此桂七香芒亦被很多人称为芒果贡品。<p>
</div>
4、其他

该网站页面过多,我这里就不进行一一列举说明了,我放出一些页面的图片即可。

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1oe411m7kH/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

相关推荐
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室6 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室6 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀9 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭9 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试