⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业
HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识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>
<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> ——<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">
<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 by <a href="javascipt:;" target="_blank" title="企业网站管理系统">breeze</a> </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%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
