静态网页设计——贵州美食(HTML+CSS+JavaScript)

2024-01-06 21:52

本文主要是介绍静态网页设计——贵州美食(HTML+CSS+JavaScript),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:对贵州的美食进行介绍

主要内容

1、首页

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

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>贵州美食</title><link rel="stylesheet" type="text/css" href="css/index.css"><script type="text/javascript" src="js/index.js"></script>
</head>
<body><div class="t1"><img src="images/1.jpg" width="1024" height="215"></div><div class="daohang1"><ul class="daohang2"><a href="index.html">首页哦</a><a href="html/wh.html">美食文化耶</a><a href="html/qn.html">去哪儿吃啊</a><a href="html/cs.html">去吃什么呀</a></ul></div><div class="banner"><div class="banner_pic" id="banner_pic"> <div class="current"><img src="images/lg2.jpg" width="800" height="400" alt="" /></div><div class="pic"><img src="images/yrf.jpg" width="800" height="400" alt="" /></div><div class="pic"><img src="images/ht.jpg" width="800" height="400" alt="" /></div><div class="pic"><img src="images/sty3.jpg" width="800" height="400" alt="" /></div><div class="pic"><img src="images/sww.jpg" width="800" height="400" alt="" /></div><div class="pic"><img src="images/bbt3.jpg" width="800" height="400" alt="" /></div></div>	<ol id="button"><li class="current"></li><li class="but"></li><li class="but"></li><li class="but"></li><li class="but"></li><li class="but"></li></ol></div><div class="z1"><div class="t3"><img src="images/3.jpg" width="200" height="200"></div><div class="w1"><p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州,除了拥有山水的秀丽外,更让人难忘的是独具特色的美食。这里不仅有19度的夏天——凉都......更有馋人的美食——水城烙锅......</p><p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;由于政治、经济、文化等各种有利条件,我们这里有许多的少数民族,还有更多的风俗习惯,那我们贵州美食呢,便博采各地的精华,兼并有各民族饮食的风味,挖掘、继承历代宫廷小吃的技艺。</p><p class="w2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所以呐,贵州美食品种繁多、风味各异、麻辣鲜香,引来各地同胞品尝,最爱贵州美食了,嘿嘿!</p></div></div>	
</body>
</html>
2、美食文化节

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

代码:

<div class="z1"><h1>美食文化</h1><div><p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国是闻名世界的烹饪王国,菜点美食数以万计。不久前,电视片《舌尖上的中国》轰动了全国,乃至世界。那么,作为贵州人,不禁要问:舌尖上的贵州又会是怎样呢?贵州,山川秀丽,物产丰富,民族众多,饮食文化源远流长,异彩纷呈。贵州的民族民间菜不仅充分利用当地的特产,而且还深深的打上了民族饮食文化的烙印,贵州菜独具风味和民族特色。贵州的风味小吃以"香辣"、"麻辣"著称,不仅辣香醇厚、味美可口,而且色泽艳丽、造型优美。</p></div><img src="../images/7.png" height="215"><div><p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各族人民在长期的生产实践中,创造了丰富多彩的饮食文化,调制出了许多历史悠久、加工独特、闻名遐迩的民族特色菜点。贵州是一个多民族聚居的民族大省,以农业经济为主,兼营畜牧业和养殖业。由于其居住地域的不同,在主、副食方面是有差异的。大体说来,居住在平坝、河谷地带的土家、布依、侗、壮、水等民族,水稻为主要的农作物,他们则终年以大米为主食。而居住在山区的彝、苗、仡佬等民族,水田极少,主要是旱地,以种植薯类和玉米、麦类为主,故在相当长的历史时期内是以小麦、玉米、土豆、荞麦等粗杂粮为主食。</p><p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州少数民族的家常菜几乎都以辣为佐料,当地人可以用一种或多种辣椒烹调出干辣、油辣、糟辣、酸辣、青辣、麻辣、蒜辣、酱辣、复合辣等十多种独具风味的系列辣味,仅用辣椒制作的调味就有几十种。同样是辣,三个吃辣出名的省份又有区别。四川是麻辣,湖南是干辣,而贵州是真辣。</p><img src="../images/8.png" width="1024"><p class="w1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贵州地区历来缺盐,勤劳、智慧的苗、侗等族人民,在长期的生活实践,摸索出了以酸代盐,以酸补盐的烹调艺术。少数民族都喜食酸菜,家家有酸汤缸,户户有腌菜坛,几乎天天用酸汤烹饪菜肴。酸菜的制作也很简单,即将青菜洗净,放入缸内用淘米水浸泡两三天即成。常见的酸菜有泡酸萝卜、酸豇豆、酸鸡、酸鸭、酸肉以及既辣又酸的盐酸菜、酸辣椒等。苗族、侗族的酸味菜特别有名,酸汤鱼就是一道著名的苗族风味菜,其做法是将酸汤加水、食盐煮沸,取鲜活鱼割去苦胆,入酸汤中煮制而成。肉嫩汤鲜,清香可口,佐以辣椒,酸辣香嫩,令人食欲大增。</p></div></div>
3、去吃什么呀

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

代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>贵州美食</title><link rel="stylesheet" type="text/css" href="../css/cs.css">
</head>
<body><div class="t1"><img src="../images/1.jpg" width="1024" height="215"></div><div class="dh1"><ul class="dh2"><a href="../index.html">首页哦</a><a href="wh.html">美食文化耶</a><a href="qn.html">去哪儿吃啊</a><a href="cs.html">去吃什么呀</a></ul></div><div class="t2"><img src="../images/8.png" width="1024" height="220"></div><div class="z1"><div><h1>去吃什么呀</h1><img src="../images/4.jpg"><h1>吃这些</h1></div><div><img src="../images/lg.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/yrf.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/ht.jpg" width="300" height="225"></div><div><ul class="w2"><a href="lg.html">水城烙锅</a><a href="yrf.html">羊肉粉</a><a href="ht.html">威宁火腿</a></ul></div><div><img src="../images/sty.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/sww.jpg" width="300" height="225">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/bbt.jpg" width="300" height="225"></div><div><ul class="w2"><a href="sty.html">酸汤鱼</a><a href="sww.html">丝娃娃</a><a href="bbt.html">波波糖</a></ul></div></div><div class="z2"></div>
</body>
</html>

总结

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

这篇关于静态网页设计——贵州美食(HTML+CSS+JavaScript)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/577732

相关文章

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

《javax.net.ssl.SSLHandshakeException:异常原因及解决方案》javax.net.ssl.SSLHandshakeException是一个SSL握手异常,通常在建立SS... 目录报错原因在程序中绕过服务器的安全验证注意点最后多说一句报错原因一般出现这种问题是因为目标服务器

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项