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

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

时间:2023-10-17 04:06:02 | 来源:网站运营

时间:2023-10-17 04:06:02 来源:网站运营

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

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


前端学习路线

(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><head><title>旅游景点|境内旅游-旅游景点旅行社网站</title><meta name="renderer" content="webkit"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="applicable-device" content="pc,mobile"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"><meta name="description" content="" /><meta name="keywords" content="旅游景点|境内旅游" /><link rel='stylesheet' href='./static/css/style.css'></head><body><!--[if lte IE 8]> <div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100"> <p class="browserupgrade font-size-18">你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>,以提高您的体验。</p> </div><![endif]--><div class="load-box"></div><header> <div class="head-box"> <div class="width-box"> <div class="logo-box"> <a href="javascript:;" title="旅游景点旅行社网站"> <img src="./static/image/1506052119.png" alt="旅游景点旅行社网站"> <h2>旅游</h2> <h4>400 000 0000</h4> </a> </div> <div class="login-box"> <a href="login.html">登录</a> <a href="register.html">注册</a></div> </div> </div></header><nav> <div class="nav-box"> <div class="width-box"> <div class="nav-cut"> <ul class="nav-ul"> <li class="nav-li "><a href="index.html" title="旅游景点旅行社网站">首页</a></li> <li class="nav-li active navs margin-left-"><a href="you.html" title="跟团游" >跟团游</a></li> <li class="nav-li navs margin-left-"><a href="you.html" title="自助游" >自助游</a></li> <li class="nav-li navs margin-left-"><a href="you.html" title="自驾游" >自驾游</a></li> <li class="nav-li navs margin-left-"><a href="you.html" title="酒店" >酒店</a></li> <li class="nav-li margin-left-"><a href="you.html" title="景点" >景点</a></li> <li class="nav-li margin-left-"><a href="gonglue.html" title="攻略" >攻略</a></li> <li class="nav-li margin-left-"><a href="gonglue.html" title="交通" >交通</a></li> </ul> </div> <div class="search-cut"> <div class="search-button"></div> <div class="search-box"> <form method="get" action="gonglue.html"> <input type="hidden" name="lang" value="cn"> <input type="hidden" name="class1" value="10001"> <input type="text" placeholder="请输入搜索关键词!" name="searchword" value=""> <button type="submit"></button> </form> </div> </div> </div> </div></nav><section> <div class="width-box"> <div class="banner-box transform-box"> <div class="met-banner banner-ny-h" data-height='' style=''> <div class="slick-slide"> <img class="cover-image" data-size="1170_100" src="./static/image/1506069563.jpg" srcset='' sizes="(max-width: 767px) 767px" alt=""> </div> <div class="slick-slide"> <img class="cover-image" data-size="1170_100" data-lazy="./static/image/1506073462.jpg" srcset='' sizes="(max-width: 767px) 767px" alt=""> </div> </div> </div> </div></section><section class="main"> <div class="width-box"> <div class="price-box"> <div class="price-nav transform-box"> <ol class="price-ul"> <li class="price-li active"><a title="跟团游">热门推荐</a></li> <li class="price-li"><a title="一日游">一日游</a></li> <li class="price-li"><a title="二日游">二日游</a></li> <li class="price-li"><a title="三日游">三日游</a></li> <li class="price-li"><a title="四日游">四日游</a></li> <li class="price-li"><a title="五日游">五日游</a></li> <li class="price-li"><a title="六日游">六日游</a></li> <li class="price-li"><a title="七日游">七日游</a></li> </ol> </div> <div class="price-cut"> <ul class="active"> <li> <a href="gonglueinfo.html" title="杭州到三亚三天两晚品牌游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="杭州到三亚三天两晚品牌游"> <span>杭州到三亚三天两晚品牌游</span> <font>660.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="三亚-西沙三日游精华线" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亚-西沙三日游精华线"> <span>三亚-西沙三日游精华线</span> <font>1280.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="豪华游轮 西沙七日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪华游轮 西沙七日游"> <span>豪华游轮 西沙七日游</span> <font>4999.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="浙江三亚-西沙六日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="浙江三亚-西沙六日游"> <span>浙江三亚-西沙六日游</span> <font>3880.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游"> <span>三亚一地5天4晚“岛人行岛”豪华游</span> <font>3680.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游"> <span>天堂森林公园-亚龙湾沙滩1日游</span> <font>145.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="【南海之梦号邮轮】西沙群岛4天3晚游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之梦号邮轮】西沙群岛4天3晚游"> <span>【南海之梦号邮轮】西沙群岛4天3晚游</span> <font>1680.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="(2天精品A线)绝美蜈支洲2日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="(2天精品A线)绝美蜈支洲2日游"> <span>(2天精品A线)绝美蜈支洲2日游</span> <font>225.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游"> <span>天堂森林公园-亚龙湾沙滩1日游</span> <font>145.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="(2天精品A线)绝美蜈支洲2日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="(2天精品A线)绝美蜈支洲2日游"> <span>(2天精品A线)绝美蜈支洲2日游</span> <font>225.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="杭州到三亚三天两晚品牌游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="杭州到三亚三天两晚品牌游"> <span>杭州到三亚三天两晚品牌游</span> <font>660.00元</font> </a> </li> <li> <a href="gonglueinfo.html" title="三亚-西沙三日游精华线" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亚-西沙三日游精华线"> <span>三亚-西沙三日游精华线</span> <font>1280.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="【南海之梦号邮轮】西沙群岛4天3晚游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之梦号邮轮】西沙群岛4天3晚游"> <span>【南海之梦号邮轮】西沙群岛4天3晚游</span> <font>1680.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游"> <span>三亚一地5天4晚“岛人行岛”豪华游</span> <font>3680.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="浙江三亚-西沙六日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="浙江三亚-西沙六日游"> <span>浙江三亚-西沙六日游</span> <font>3880.00元</font> </a> </li> </ul> <ul> <li> <a href="gonglueinfo.html" title="豪华游轮 西沙七日游" target='_self'> <img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪华游轮 西沙七日游"> <span>豪华游轮 西沙七日游</span> <font>4999.00元</font> </a> </li> </ul> </div> </div> </div> <div class="width-box"> <div class="advert-box"> <a href="http://www.baidu.com" title="旅游景点旅行社网站" target='_self'> <img class="lazyloads" data-size="1170_120" data-original="./static/image/1506075016.jpg" alt="旅游景点旅行社网站"> </a> </div> </div> <div class="width-box"> <div class="main-left"> <div class="notice-box"><h3>浙江.三亚<em>旅游热线</em>&nbsp;——<em>400-000-0000</em></h3><p>成立9年以来,组织和接待了来自世界各国、各地区的游客100万人次,积累了丰富的旅游接待经验,着<em>“宾客至上,信誉第一”</em>的服务宗旨,严格规范的管理制度,高质量的服务,赢得中外游客的广泛赞誉。</p></div> <div class="card-list"> <div class="card-li"> <div class="card-description"> <a class="card-title" href="gonglueinfo.html" title="2017浙江三亚旅游攻略实用版" target='_self'><h3>2017浙江三亚旅游攻略实用版</h3></a> <img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'> <p> 人的一生中至少要有两次冲动,一次为奋不顾身的爱情,一次为说走就走的旅行。旅行,一直是我的最爱,所以,我愿意“冒险”一次,约上闺蜜一起开始一段旅行。 这个春季,我选择三亚。(什么季节去浙江最好呢,有人担心夏天会不会太热,其实夏天在海边凉风习习,水温正适合体质较弱的人群)。 ..</p> </div> <div class="card-operation"> <div class="card-author"> <img class="lazyloadx" data-original="./static/image/user.jpg"> <font>admin</font> </div> <div class="card-time">发布于 2017-09-26</div> <div class="card-geek"> <font class="eye">376</font> <font class="share">&nbsp; <span> <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=2017浙江三亚旅游攻略实用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a> <a class="weixin" data-href="http://breeze/muban/M1156012/359/strategy/shownews.php?lang=cn&id=54"></a> <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=2017浙江三亚旅游攻略实用版&url=http%3A%2F%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a> </span> </font> </div> </div> </div> <div class="card-li"> <div class="card-description"> <a class="card-title" href="gonglueinfo.html" title="与海浪共舞,享垂钓乐趣!一起去三亚海钓!" target='_self'><h3>与海浪共舞,享垂钓乐趣!一起去三亚海钓!</h3></a> <img class="card-image lazyloadx" data-original='./static/image/1506335872.jpg </div> <div class="foot-right"> <div class="foot-lang"> </div> <div class="powered_by_metinfo">Powered&nbsp;by&nbsp;<a href="javascipt:;" target="_blank" title="企业网站管理系统">breeze</a>&nbsp;</div> </div> </div> </div></footer><div class="weixin-box"> <b><em>X</em>分享到微信朋友圈</b> <i></i> <p>打开微信,使用“扫一扫”,点击右上角“分享到朋友圈”。</p></div><button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"><i class="icon wb-chevron-up" aria-hidden="true"></i></button><script src="./static/js/shop_lang_cn.js"></script><script src="./static/js/style.js"></script><!-- <script src="./static/js/shop_v3.js?20171025163800"></script> --></body></html>

学的反而越迷茫

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

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

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

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


学习更多

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





在这里插入图片描述


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

74
73
25
news

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

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