15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:旅游网页设计与实现——旅游风景区网站HTML+CSS

HTML5期末大作业:旅游网页设计与实现——旅游风景区网站HTML+CSS

时间:2023-10-12 13:42:02 | 来源:网站运营

时间:2023-10-12 13:42:02 来源:网站运营

HTML5期末大作业:旅游网页设计与实现——旅游风景区网站HTML+CSS:> ⛵ 源码获取 文末联系

Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页
  1. HTML:结构
  2. CSS:样式 在操作方面上运用了html5和css3, 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
  3. JavaScript:做与用户的交互行为

前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面; (2)css文件:css全部页面样式,文字滚动, 图片放大等; (3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个   (2)二级页面:从首页点击进入之后的页面叫做二级页面 (3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的 首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用. 网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示




在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述



HTML结构代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>旅游</title> <style> *{ margin: 0; padding: 0; } .header{ height: 60px; line-height: 60px; text-align: center; } .ban{ width: 1200px; margin: auto; } a{ padding: 0 20px; color: #000; text-decoration: none; } .search { height: 100px; text-align: center; } .search-ipt input { width: 520px; height: 40px; padding-left: 16px; border: 1px solid #ffb923; } .search-btn { width: 80px; height: 40px; line-height: 40px; text-align: center; color: #FFF; background: #ffb923; display: inline-block; } .enume .active { color: #ffb923; } .tab{ border-bottom:2px solid #ffb923; margin-bottom: 20px; } .content{ height: 400px; margin-bottom: 40px; } </style></head><body> <div class="header"> <b>旅游为你提供本地服务</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class="item" href="">主页</a> <a class="item" href="list.html">热门旅游地</a> <a class="item" href="detail.html">详情</a> <a class="item" href="share.html">旅游分享</a> <a class="item" href="cart.html">我的收藏</a> <a class="item" href="form.html">在线预定</a> </div> <div class="search"> <div class="search-ipt"> <input type="text" placeholder="请输入你想去的地方"> <div class="search-btn">搜索</div> </div> <div class="enume"> <span class="active">梅里雪山</span> <span>洱海</span> <span class="active">首尔</span> <span>纽约</span> <span>阿尔卑斯山</span> </div> </div> <img width="100%" height="420" src="picture/ban2.jpeg" alt=""> <div class="tab ban"> <div style="width: 272px;display: inline-block;"><h2>目的地</h2></div> <div style="width: 60px;padding:16px;background: #ffb923;color:#fff;display: inline-block;">欧洲</div> <div style="width: 60px;padding:16px;display: inline-block;">亚洲</div> <div style="width: 60px;padding:16px;display: inline-block;">北美洲</div> <div style="width: 60px;padding:16px;display: inline-block;">非洲</div> </div> <div class="content ban"> <div style="width:210px;padding:10px;border: 1px solid #ddd;float: left;" class="content-item"> <h3>推荐目的地</h3> <a style="display: inline-block; padding: 12px 20px;" href="#">法国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">英国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">比利时</a> <a style="display: inline-block; padding: 12px 20px;" href="#">德国</a> <a style="display: inline-block; padding: 12px 20px;" href="#">瑞士</a> <a style="display: inline-block; padding: 12px 20px;" href="#">意大利</a> <a style="display: inline-block; padding: 12px 20px;" href="#">爱尔兰</a> <a style="display: inline-block; padding: 12px 20px;" href="#">西班牙</a> <a style="display: inline-block; padding: 12px 20px;" href="#">梵蒂冈</a> <a style="display: inline-block; padding: 12px 20px;" href="#">冰岛</a> <a style="display: inline-block; padding: 12px 20px;" href="#">挪威</a> </div> <table width="940" style="float: right; text-align: center;"> <tr height="190"> <td width="310"> <img width="200" height="120" src="picture/egypt.jpg" alt=""> <p>纯玩 埃及8天神秘之旅</p> <p class="gray"><span class="price">6499</span><p> </p></td> <td width="310"> <img width="200" height="120" src="picture/x1.jpg" alt=""> <p>畅游东西欧 12晚15天</p> <p><span class="price">9999</span></p> </td> <td width="310"> <img width="200" height="120" src="picture/s.jpg" alt=""> <p>舒享德法意瑞、五渔村 <p><span class="price">11999</span></p> </td> <td width="310"> <img width="200" height="120" src="picture/t.jpg" alt=""> <p>土耳其10天蓝色浪漫之旅</p> <p><span class="price">7499</span></p> </td> </tr> <tr height="190"> <td> <img width="200" height="120" src="picture/x1.jpg" alt=""> <p>畅游东西欧 12晚15天</p> <p><span class="price">9999</span></p> </td> <td> <img width="200" height="120" src="picture/s.jpg" alt=""> <p>舒享德法意瑞、五渔村、比萨</p> <p><span class="price">11999</span></p> </td> <td> <img width="200" height="120" src="picture/t.jpg" alt=""> <p>土耳其10天蓝色浪漫之旅</p> <p><span class="price">7499</span></p> </td> <td> <img width="200" height="120" src="picture/img1.jpeg" alt=""> <p>法国南部蓝色海岸线蔚蓝风情</p> <p><span class="price">6519</span></p> </td> </tr> </table> </div> <div class="foot ban"> <table> <tr> <td width="200"> <h3>新手指南</h3> </td> <td width="200">会员注册/登录</td> <td width="200">会员章程</td> <td width="200">隐私政策</td> <td width="200">预订流程</td> <td width="200">在线预订条款</td> </tr> <tr> <td> <h3>签约及发票制度</h3> </td> <td>门市签约</td> <td>线上签约</td> <td>发票制度</td> <td></td> <td></td> </tr> <tr> <td> <h3>支付方式</h3> </td> <td>在线支付</td> <td>门市现付</td> <td>银行汇款</td> <td></td> <td></td> </tr> <tr> <td> <h3>售后服务</h3> </td> <td>退款方式</td> <td>订单查询</td> <td>订单变更及取消</td> <td></td> <td></td> </tr> <tr> <td> <h3>旅资讯</h3> </td> <td>旅游贴士</td> <td>旅官方微博</td> <td>旅会员刊物</td> <td></td> <td></td> </tr> </table> <div style="margin: 20px 0;text-align: center;"> 联系我们:service@cits.com.cn | 咨询热线:400-600-8888 </div> </div></body></html>

学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光 —————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识






关键词:旅游,实现,风景,作业,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭