家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&＃xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&＃xff0c;外部大盒子设定居中&＃xff0c;内部左中右布局&＃xff0c;下方横向浮动排列&＃xff0c;大学学习的前端知识点和布局方式都有运用&＃xff0c;CSS的代码量也很足、很细致&＃xff0c;使用hover来完成过渡效果、鼠标滑过效果等&＃xff0c;使用表格、表单补充模块&＃xff0c;为方便新手学习页面中没有使用js有需要的可以自行添加。
文章目录&＃x1f330;
- 一、网页介绍&＃x1f4d6;
- 一、网页效果&＃x1f30c;
- 二、代码展示&＃x1f608;
- 1.HTML结构代码 &＃x1f9f1;
- 2.CSS样式代码 &＃x1f3e0;
- 三、个人总结&＃x1f60a;
- 四、更多干货&＃x1f680;
一、网页介绍&＃x1f4d6;
1 网页简介&＃xff1a;此作品为学生个人主页网页设计题材&＃xff0c;HTML&＃43;CSS 布局制作,web前端期末大作业,大学生网页设计作业源码&＃xff0c;这是一个不错的网页制作&＃xff0c;画面精明&＃xff0c;代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑&＃xff1a;网页作品代码简单&＃xff0c;可使用任意HTML编辑软件(如&＃xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad&＃43;&＃43; 等任意html编辑软件进行运行及修改编辑等操作)。
3.知识应用&＃xff1a;技术方面主要应用了网页知识中的: Div&＃43;CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等&＃xff0c;视频、 音频元素 、Flash&＃xff0c;同时设计了Logo(源文件)所需的知识点。
一、网页效果&＃x1f30c;
二、代码展示&＃x1f608;
1.HTML结构代码 &＃x1f9f1;
代码如下(示例)&＃xff1a;以下仅展示部分代码供参考~
雄峙嵯峨的十九峰&＃xff0c;由北而南&＃xff0c;连绵不绝&＃xff0c;巍巍耸立在洱海西岸。苍山&＃xff0c;这滇西高原的恒久主人&＃xff0c;这掩映在云霭霞雾中的天之骄子&＃xff0c;在冰雪的浸润下&＃xff0c;显得分外清秀雄奇。“炎天赤日雪不融”。终年积雪的苍山&＃xff0c;每两峰之间都有一条溪水&＃xff0c;由上而下&＃xff0c;顺东流淌&＃xff0c;缓缓汇聚&＃xff0c;孕育了高原明珠——洱海。这十九峰十八溪&＃xff0c;不仅构成了苍山独特多姿的景观...... 云南的彝族、白族、纳西族、哈尼族、傈僳族、拉祜族、普米族等少数民族都有共同的节日--火把节。彝族火把节人数最多、规模最大、知名度最高。同时也是彝族人民最隆重的节日。 火把节的内容程序是&＃xff1a;白天人们饮酒祝贺节日并进行摔跤、斗牛活动。武定县、禄劝告县等地的彝族还开展射箭、赛马、打秋千等活动。到了晚上日落夜黑......
昆明之属——大理
大理地处云南省中部偏西&＃xff0c;市境东巡洱海&＃xff0c;西及点苍山脉。这里气候温和&＃xff0c;土地肥沃&＃xff0c;山水风光秀丽多姿&＃xff0c;是我国&＃xff0c;远在四千多年前&＃xff0c;大理地区就有原始居民的活动。
在漫长的历史岁月中&＃xff0c;大理曾有着显赫的地位和作用。秦、汉之际&＃xff0c;大理是“蜀·身毒国道”(从四川成都&＃xff0c;经云南大理、保山进入缅甸&＃xff0c;再通往印度)的必经之地&＃xff0c;这条通道&＃xff0c;对促进大理地区和内地的联系、对促进中国和东南亚诸国友好往来和经济文化交流起着重要的作用。
大理州&＃xff0c;全名大理白族自治州&＃xff0c;地处云南省中部偏西&＃xff0c;东邻楚雄州&＃xff0c;南靠普洱、临沧地区&＃xff0c;西与保山地区、怒江州相连&＃xff0c;北接丽江地区。
大理州历史悠久&＃xff0c;素有“文献名邦”的美称&＃xff0c;是云南最早的文化发祥地之一。唐宋五百多年间(即从南诏国建立至大理国覆灭)&＃xff0c;大理一直是云南的政治、经济、文化中心。 地处低纬高原&＃xff0c;四季温差不大&＃xff0c;干湿季分明&＃xff0c;以低纬高原季风气候为主&＃xff0c;常年气候温和&＃xff0c;土地肥沃&＃xff0c;以秀丽山水和少数民族风情闻名于世&＃xff0c;境内以蝴蝶泉、洱海、崇圣寺三塔等景点最有代表性。大理山水风光秀丽多姿&＃xff0c;有“风花雪月”的美称&＃xff0c;即下关风、上关花、苍山雪、洱海月。
发现大理
大理是中国西南边疆的文化发祥地之一。早在三千多年前&＃xff0c;洱海周围就居住着白族先民。西汉元封年间&＃xff0c;始建叶榆县。唐宋时期先后建立的“南诏国”、“大理国”等地方政权延续了五百多年&＃xff0c;一度成为云南的政治、经济、文化中心。自古以来&＃xff0c;大理就是滇西之通衢&＃xff0c;博南古道、南方陆上丝绸之路必经之地&＃xff0c;是云南政治、经济、文化中心&＃xff0c;是沟通云南丽江、迪庆、德宏、保山、楚雄、临沧、思茅等8个地州的昆畹公路、滇藏公路的交汇点和物资集散地&＃xff0c;又是我国同东南亚各国文化交流、通商贸易的重要门户。现今已经成为连接滇西八地、州的交通枢纽和商贸、旅游、文化中心
人文大理
“苍山不墨千秋画&＃xff0c;洱海无弦万古琴”
榆城——大理
大理古城简称榆城&＃xff0c;位居风光亮丽的苍山脚下&＃xff0c;距大理市下关13公里。大理古城始建于明洪武十五年(1382年)&＃xff0c;是全国首批历史文化名城之一。
大理地理位置优越&＃xff0c;东巡洱海&＃xff0c;西及点苍山脉&＃xff0c;辖大理市和祥云、弥渡、宾川、永平、云龙、洱源、鹤庆、剑川8个县以及漾濞、巍山、南涧3个少数民族自治县&＃xff0c;是中国西南边疆开发较早的地区之一。
大理有着白族、彝族、回族、傈僳族、苗族、纳西族等多个少数民族&＃xff0c;不但语言、服饰、民族、饮食、婚俗、宗教信仰富有特色&＃xff0c;民间节日也饶有趣味、多姿多彩。白剧、洞经古乐、霸王鞭、大本曲和彝族打歌等是大理极富民族特色的艺术精品。始于唐代的传统盛会三月街、白族本主崇拜、白族三道茶等民俗蕴含着极为深远的历史文化内涵。
“苍山不墨千秋画&＃xff0c;洱海无弦万古琴。”大理的“苍山雪”&＃xff0c;“洱海月”&＃xff0c;“下关风”&＃xff0c;“上关花”是著名的“雪月”四景&＃xff0c;自然风光独甲天下&＃xff0c;不可以不游
“苍山系玉带&＃xff0c;饿狗吃白米”
苍山
寻找 “原味的云南”
彝族 “火把节”
2.CSS样式代码 &＃x1f3e0;
.*{margin: 0;padding: 0;}
body{position: relative;min-width: 500px;background-color: rgba(255,255,197,0.2);}
.lr{float: right;}
.lf{float: left;}
.button_a{display: inline-block;text-decoration: none !important; margin-bottom: 1rem;}
&＃64;font-face {font-family:"hanz";src: url("../fonts/hanz.ttf");}
/*top-nav-start-2017.04.18-2b0x*/
.header_bar{position: absolute;width: 100%;height: 70px;display: block;position: fixed;z-index: 1;}
.header{height: 70px;padding: 10px 0;position: relative;display: block;}
.top_navs{padding: 0 30px;display:block;position: relative;}
.navbar-nav{margin: 10px 2rem; color: white;}
.top_navs .navbar-nav a:hover{padding-bottom: 11px;}
.navbar-header{background-color: rgba(255,255,255,0); margin: 6px 0; padding-left: 4%;}
.header .logo{height: 50px;width: 110px;float: left;background-color: rgba(206, 127, 1,0);}
.navbar-toggle .icon-bar{background-color:black;width: 20px;}
.plr20_pa{position: absolute;padding: 0 30px;}
/*scroll-img-start*/
.lunbotu{width: 100%;height: 80%;display: block;}
.navbar-fixed-top .navbar-collapse{background-color: rgba(1,1,1,0.2);}
.carousel-inner .item img{width: 100%;height: auto;}
/*content-start*/
.mian_content{padding: 60px 0;}
.introduce_title{margin: 20px 0 30px;text-align: center;color: #bb7832;}
.introduce_content{padding: 2rem 5rem;margin: 0 0 50px;}
.introduce_txt{padding: 10px 0 20px;}
.introduce_txt p{text-align: center;margin-bottom: 2.5rem;text-indent: 2em;font-size: 2rem;}
.introduce_btn{text-align: center;margin-top: 2rem;}
.introduce_btn a{text-decoration: none;padding: 1rem 4rem;font-size: 20px;line-height: 20px;font-weight: 300;color: #a79d85;background-color: rgba(0,0,0,0);border: .0625rem solid #a79d85;
transition: color 0.3s, background-color 0.3s; -moz-transition: color 0.3s, background-color 0.3s; -webkit-transition: color 0.3s, background-color 0.3s;}
.introduce_btn a:hover{background-color: rgba(145, 133, 104,1);color: white;font-weight: 10;}
/*video-start*/
.video{/*text-align: center;*/}
.video_header{text-align: center;padding: 5rem 0 3rem;color: #bb7832;}
.video_txt{padding: 0 50px;color: #555857;}
.video_txt_content{padding-top: 1rem;padding-bottom: 1rem;}
.video_txt_btn{display: block;margin-bottom: 1rem;padding: 0.5rem 2rem;color: white;font-size: 15px;background-color: #a79d85;letter-spacing:0.1em;border: none;
transition: background-color 0.3s; -moz-transition: background-color 0.3s; -webkit-transition: background-color 0.3s;}
.video_txt_btn:hover{background-color: rgba(145, 133, 104,1);}
.video_img{background: url("../video/1.jpg") no-repeat center ;}
.video_play{padding: 10px 50px;}
/*main-start*/
三、个人总结&＃x1f60a;
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分&＃xff1b;
- 所有页面相互超链接&＃xff0c;可到三级页面&＃xff0c;有5-10个页面组成&＃xff1b;
- 页面样式风格统一布局显示正常&＃xff0c;不错乱&＃xff0c;使用Div&＃43;Css技术&＃xff1b;
- 菜单美观、醒目&＃xff0c;二级菜单可正常弹出与跳转&＃xff1b;
- 要有JS特效&＃xff0c;如定时切换和手动切换图片新闻&＃xff1b;
- 页面中有多媒体元素&＃xff0c;如gif、视频、音乐&＃xff0c;表单技术的使用&＃xff1b;
- 页面清爽、美观、大方&＃xff0c;不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来&＃xff0c;还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
京公网安备 11010802041100号