web前端网页设计大作业地方门户景点

1、姓名欧亚学院HTML+CSS大作业HTML5网页设计期末大作业 题 目： 平遥古城 专 业： 班 级： 学 号： 姓 名： 时 间： web前端网页设计大作业 网站名称制作说明1.网站规划1.网站主题（旅游网站设计与制作）1.1网站定位平遥古城，位于山西省平遥县境内，占地面积225平方公里，是国家历史文化名城，也是我国第一个被列为“世界文化遗产”的城市。现存古城始建于明洪武三年，距今已有600多年的历史，是明清时期汉民族历史文化的重要载体，具有重要的科研价值和旅游开发价值。1.2网站色调平遥旅游网站的主要色调是蓝，白为主题的网站。由于网站采用现代化的设计风格，所以在设计中，为了让人们体验到舒适

2、的环境画面，所以采用蓝白为主色调，让人耳目一新。1.3网站风格蓝色是冷色调最典型的代表色，是网站设计中运用得最多的颜色，也是许多人钟爱的颜色。蓝色表达着深远、永恒、沉静、无限、理智、老实、严寒的多种感觉。蓝色会给人很强烈的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等。网站体现了最简洁的现代化风格。2规划网站结构3准备素材 文本素材、图片素材4建立站点首页代码平遥古城2.页面设计 网站首页 旅游指南 联系我们 建筑布局 联系我们 您所在的位置： 主页 联系我们 联系我们在这里你可以查到我们的联系方式，你可以通过电话，邮件，或者在线提交的方式 你的名字 你的电话 你的邮箱 你的意见 欢迎来

3、到平遥古城旅游！版权所有：平遥古城 首页效果图首页css代码/*公用定义*/charset utf-8;*:focus outline: none;input line-height: normal;body a,.tm -webkit-transition: all .2s linear; transition: all .2s linear; cursor: pointer;input,select,textarea,div 、 FONT-FAMILY: Microsoft YaHei;body margin: 0px; font-size: 12px; background: #b2d9

4、dc; color: #2b2b2b;a text-decoration: none; color: #2b2b2b;a:hover text-decoration: none; color: #666666;ul,li,tr,td,dl,dt,dd list-style-type: none; margin: 0px; padding: 0px;li overflow: hidden;a img text-decoration: none; margin: 0px; padding: 0px; border: none;.f float: left; overflow: hidden;.r

5、float: right; overflow: hidden;.bai,.bai a color: #FFFFFF;.hong,.hong a color: #ff0000;.huang,.huang a color: #faaf19;.lan,.lan a color: #399abf;.lv,.lv a color: #2293d1;.hui,.hui a color: #909090;.hui a:hover color: #fff;.xi12 font-size: 12px;.xi13 font-size: 13px;.xi14 font-size: 14px;.xi15 font-s

6、ize: 15px;.xi16 font-size: 16px;.xi17 font-size: 17px;.xi18 font-size: 18px;.xi19 font-size: 19px;.xi20 font-size: 20px;.xi21 font-size: 21px;.xi22 font-size: 22px;.xi23 font-size: 23px;.xi24 font-size: 24px;.xi25 font-size: 25px;.xi26 font-size: 26px;.xi27 font-size: 27px;.xi28 font-size: 28px;.xi2

7、9 font-size: 29px;.xi30 font-size: 30px;.xi31 font-size: 31px;.xi32 font-size: 32px;.xi33 font-size: 33px;.xi34 font-size: 34px;.xi35 font-size: 35px;.xi36 font-size: 36px;.xi37 font-size: 37px;.xi38 font-size: 38px;.xi39 font-size: 39px;.xi40 font-size: 40px;.cu font-weight: bold;.xi font-weight: l

8、ighter;.mg margin-left: auto; margin-right: auto; overflow: hidden; width: 1170px;.mg2 margin-left: auto; margin-right: auto; overflow: hidden; 景点门票 开放时间 交通指南 优惠政策 景点门票 1、平遥古城通票：全价130元/人 半价票65元/人（平遥古城门票均无需在线预订，景区窗口购买即可） 2、双林寺：35元/人 半价票15元/人 3、镇国寺：25元/人 半价票10元/人 4、优惠政策：1.2米以下儿童、现役军人、残疾人、60岁以上老年人凭有效证件

9、予以免票优惠，18周岁以下（含18周岁）的青少年、学生凭有效证件可购买半价优惠门票。 42 开放时间 旺季（4月-10月）：08：0018：30 淡季（11月-3月）：08：3018：00 43 交通指南 飞机：如果想乘坐飞机前往平遥，一般先飞至太原市武宿国际机场，从太原市再转乘长途客车或火车前往平遥，不管是乘坐长途客车或者是火车，都大约需要一个半小时到两个小时就能到达。从机场出来的机场集团公司站乘坐201路可以到达太原建南汽车站、太原汽车站以及太原火车站，从此三处出发均可直达平遥。 44 火车：平遥火车站位于古城的西侧，离古城西北城角仅300米。到达平遥的火车都是过路车，除山西省内城市外，从

10、这里乘坐火车出发还能够直接到达北京、重庆、广州、成都、西安、呼和浩特、兰州、唐山等地。2014年7月平遥古城站（动车站）正式通车。 43 45 客车：平遥古城公路比较发达，不过由于平遥汽车站主要运营省内线路，所以从太原中转客车去平遥最为合适。 44 优惠政策 2020年2月15日，从平遥古城景区了解到，为致敬广大医务工作者在新冠肺炎疫情中守护百姓健康、捍卫人民生命，平遥古城景区自疫情结束恢复运营之日起一年内，全国医护工作者凭本人有效证件（医生、护士执业证及身份证等）免费参观平遥县纳入平遥古城门票内的开放景点。 二级页面效果图 平遥古城 网站首页 旅游指南 联系我们 建筑布局 联系我们 您所在的

11、位置： 主页 联系我们 联系我们在这里你可以查到我们的联系方式，你可以通过电话，邮件，或者在线提交的方式 你的名字 你的电话 你的邮箱 你的意见 欢迎来到平遥古城旅游！版权所有：平遥古城 三级页面效果图四级页面代码 平遥古城 网站首页 旅游指南 联系我们 建筑布局 四级页面代码 平遥古城 网站首页 旅游指南 联系我们 建筑布局 建筑布局 您所在的位置： 主页 建筑布局 平遥古城自明洪武三年（公元1370年）重建以后，基本保持了原有格局。平遥城内的重点民居，系建于公元18401911年之间。民居建筑布局严谨，轴线明确，左右对称、主次分明、轮廓起伏，外观封闭，大院深深。精巧的木雕、砖雕和石雕配以浓

12、重乡土气息的剪纸窗花、惟妙惟肖，栩栩如生，集中体现了公元14至19世纪前后汉民族的历史文化特色，对研究这一时期的社会形态、经济结构、军事防御、宗教信仰、传统思想、伦理道德的人类居住形式有重要的参考价值，是迄今汉民族地区保存最完整的古代居民群落。 康熙年间，范村人宋忠原背着一把大雨伞进平遥城看病，走到落邑村村南，从后面慌慌张张地跑来一人，宋忠原认得此人，是邻村人毋连迟。当时乌云密布，电闪雷鸣，眼看就要下雨了。不一会儿，果然下起了大雨。宋忠原撑起背着的大雨伞，邀毋连迟同行，毋连迟赶紧靠过来借伞避雨。 两人风雨同舟，互济互助，边谈笑边行路到了高林村。宋忠原因风力大累得满头大汗，毋连迟于是接过宋忠原的

13、伞打着到了南门外孔家饭店。这时已是风停云散，雨过天晴。宋忠原向毋连迟要伞。毋连迟不但不还宋忠原，反而诬赖伞是他的，两人争吵起来，围拢来不少的观众。毋连迟说：“伞是我的！”宋忠原说：“伞是我的！”宋、毋扯夺雨伞，观众谁也断不清这伞是谁的，看他们吵吵嚷嚷，一直闹到平遥县署。宋忠原击鼓喊冤，知县王杰急忙升堂，原告宋忠原陈述了事情的经过。被告毋连迟仍一口咬定伞是他的。两人各抒己见，知县王杰一时作难，不好判断。沉默了一会，王杰猛然间把惊堂木一拍说：“刁民！屁大的事到县衙击鼓告状！想试探本官的软硬智愚”随即把伞撕的粉碎，掷下堂来，喝令退堂。 原告宋忠原从堂上下来，泪涕满面，被告毋连迟则幸灾乐祸，洋洋得意。

14、两人走出县衙走到照壁南街上，四个衙役赶了出来，传唤二人重回县衙。二人再次跪在大堂上，知县王杰和颜悦色地判断，伞是原告宋忠原的，被告毋连迟属诬赖，重责四十大板，罚钱十贯，赔原告一把新雨伞。事后宋忠原给王知县送了一块匾额，上刻”明镜高悬”四个大字。 欢迎来到平遥古城旅游！版权所有：平遥古城 四级页面效果图3网站测试功能实现、链接有效性4.总结与提高通过本次网站设计与制作我学会了怎么使用代码来编程图片、充分认识到了选择器的重要性和各种标签和属性的记忆，在学习的过程中也遇到了很多困难，记得刚开始上网页课的时候，没有好好听老师上课，在老师让我们做作业的时候，根本无从下手，还被老师批评，但是老师还行不厌其烦的教我们，让我们一点一点的学习，老师真的很认真负责，慢慢的我也喜欢上了上网页课，由刚开始只愿意做后排，变为坐在老师跟前，这一切都得感谢老师