网络科技公司网站首页,筑业网,广州涉疫重点场所有更新,淮北建网站前言
声明#xff1a;该文章只是做技术分享#xff0c;若侵权请联系我删除。#xff01;#xff01; 感谢大佬的视频#xff1a; https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source5f425e0074a7f92921f53ab87712357b
使用技术#xff1a;HTMLCSSJS#xff08;…前言
声明该文章只是做技术分享若侵权请联系我删除。 感谢大佬的视频 https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source5f425e0074a7f92921f53ab87712357b
使用技术HTMLCSSJS静态网页设计 主要内容对贵州的美食进行介绍
主要内容
1、首页
首页用html标签分割成多个区域每个区域都是用子div标签继续进行更加细致的分割并且使用css设置样式将每个区域想显示的效果用css设计出来最后根据px单位进行划分精准的分割页面格式化。
最上方使用li标签css设计制作的菜单导航还有使用js实现的轮播图可以自动切换图片 或者点击下方的按钮可以手动切换图片。 代码
!DOCTYPE html
html
headmeta charsetutf-8title贵州美食/titlelink relstylesheet typetext/css hrefcss/index.cssscript typetext/javascript srcjs/index.js/script
/head
bodydiv classt1img srcimages/1.jpg width1024 height215/divdiv classdaohang1ul classdaohang2a hrefindex.html首页哦/aa hrefhtml/wh.html美食文化耶/aa hrefhtml/qn.html去哪儿吃啊/aa hrefhtml/cs.html去吃什么呀/a/ul/divdiv classbannerdiv classbanner_pic idbanner_pic div classcurrentimg srcimages/lg2.jpg width800 height400 alt //divdiv classpicimg srcimages/yrf.jpg width800 height400 alt //divdiv classpicimg srcimages/ht.jpg width800 height400 alt //divdiv classpicimg srcimages/sty3.jpg width800 height400 alt //divdiv classpicimg srcimages/sww.jpg width800 height400 alt //divdiv classpicimg srcimages/bbt3.jpg width800 height400 alt //div/div ol idbuttonli classcurrent/lili classbut/lili classbut/lili classbut/lili classbut/lili classbut/li/ol/divdiv classz1div classt3img srcimages/3.jpg width200 height200/divdiv classw1p classw2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;贵州除了拥有山水的秀丽外更让人难忘的是独具特色的美食。这里不仅有19度的夏天——凉都......更有馋人的美食——水城烙锅....../pp classw2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;由于政治、经济、文化等各种有利条件我们这里有许多的少数民族还有更多的风俗习惯那我们贵州美食呢便博采各地的精华兼并有各民族饮食的风味挖掘、继承历代宫廷小吃的技艺。/pp classw2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;所以呐贵州美食品种繁多、风味各异、麻辣鲜香引来各地同胞品尝最爱贵州美食了嘿嘿/p/div/div
/body
/html2、美食文化节
该页面使用p标签和人span标签嵌入许多文本将关于网站主题的介绍全部写到网页中文字排版根据字数来进行使用不会出现不协调的情况。在文字旁边使用img标签嵌入一些图片使得网页整体更加的美观。
代码
div classz1h1美食文化/h1divp classw1nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;中国是闻名世界的烹饪王国菜点美食数以万计。不久前电视片《舌尖上的中国》轰动了全国乃至世界。那么作为贵州人不禁要问舌尖上的贵州又会是怎样呢贵州山川秀丽物产丰富民族众多饮食文化源远流长异彩纷呈。贵州的民族民间菜不仅充分利用当地的特产而且还深深的打上了民族饮食文化的烙印贵州菜独具风味和民族特色。贵州的风味小吃以香辣、麻辣著称不仅辣香醇厚、味美可口而且色泽艳丽、造型优美。/p/divimg src../images/7.png height215divp classw1nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;各族人民在长期的生产实践中创造了丰富多彩的饮食文化调制出了许多历史悠久、加工独特、闻名遐迩的民族特色菜点。贵州是一个多民族聚居的民族大省以农业经济为主兼营畜牧业和养殖业。由于其居住地域的不同在主、副食方面是有差异的。大体说来居住在平坝、河谷地带的土家、布依、侗、壮、水等民族水稻为主要的农作物他们则终年以大米为主食。而居住在山区的彝、苗、仡佬等民族水田极少主要是旱地以种植薯类和玉米、麦类为主故在相当长的历史时期内是以小麦、玉米、土豆、荞麦等粗杂粮为主食。/pp classw1nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;贵州少数民族的家常菜几乎都以辣为佐料当地人可以用一种或多种辣椒烹调出干辣、油辣、糟辣、酸辣、青辣、麻辣、蒜辣、酱辣、复合辣等十多种独具风味的系列辣味仅用辣椒制作的调味就有几十种。同样是辣三个吃辣出名的省份又有区别。四川是麻辣湖南是干辣而贵州是真辣。/pimg src../images/8.png width1024p classw1nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;贵州地区历来缺盐勤劳、智慧的苗、侗等族人民在长期的生活实践摸索出了以酸代盐以酸补盐的烹调艺术。少数民族都喜食酸菜家家有酸汤缸户户有腌菜坛几乎天天用酸汤烹饪菜肴。酸菜的制作也很简单即将青菜洗净放入缸内用淘米水浸泡两三天即成。常见的酸菜有泡酸萝卜、酸豇豆、酸鸡、酸鸭、酸肉以及既辣又酸的盐酸菜、酸辣椒等。苗族、侗族的酸味菜特别有名酸汤鱼就是一道著名的苗族风味菜其做法是将酸汤加水、食盐煮沸取鲜活鱼割去苦胆入酸汤中煮制而成。肉嫩汤鲜清香可口佐以辣椒酸辣香嫩令人食欲大增。/p/div/div3、去吃什么呀
该页面使用htmlcss设计结构和样式将图片img标签设计成排列整齐的卡片有些还是卡片超链接鼠标放上去卡片或者卡片上的文字会变色。
代码
!DOCTYPE html
html
headmeta charsetutf-8title贵州美食/titlelink relstylesheet typetext/css href../css/cs.css
/head
bodydiv classt1img src../images/1.jpg width1024 height215/divdiv classdh1ul classdh2a href../index.html首页哦/aa hrefwh.html美食文化耶/aa hrefqn.html去哪儿吃啊/aa hrefcs.html去吃什么呀/a/ul/divdiv classt2img src../images/8.png width1024 height220/divdiv classz1divh1去吃什么呀/h1img src../images/4.jpgh1吃这些/h1/divdivimg src../images/lg.jpg width300 height225nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;img src../images/yrf.jpg width300 height225nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;img src../images/ht.jpg width300 height225/divdivul classw2a hreflg.html水城烙锅/aa hrefyrf.html羊肉粉/aa hrefht.html威宁火腿/a/ul/divdivimg src../images/sty.jpg width300 height225nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;img src../images/sww.jpg width300 height225nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;img src../images/bbt.jpg width300 height225/divdivul classw2a hrefsty.html酸汤鱼/aa hrefsww.html丝娃娃/aa hrefbbt.html波波糖/a/ul/div/divdiv classz2/div
/body
/html总结
想要看具体效果的同学可以访问这个链接 https://www.bilibili.com/video/BV1vC4y1K7de/?vd_source5f425e0074a7f92921f53ab87712357b 具体的代码也在该链接下。
