⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业，Web大学生网页
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
文章目录
- 前端学习路线
- 网页基本结构
- 网页演示
- HTML结构代码
- 学的反而越迷茫
- 学习更多
前端学习路线
（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 http-equiv="Content-Type" content="text/html">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="order by dede58.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/swiper-3.3.1.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/jquery.superslide.2.1.1.js" type="text/javascript"></script>
<script src="js/swiper-3.3.1.jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/wow.min.js" type="text/javascript"></script>
<script src="js/funtion.js" type="text/javascript"></script>
</head>
<body data-spy="scroll">
<div id="wrap_index"> <!-- 侧边导航 -->
<div class="class page-prev visible-xs visible-sm">
<div class="close"></div>
<div class="class-top">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input type="text" class="txt1" name="q" value="请输入关键字">
<input type="submit" class="btn1" value="">
</form>
</div>
<div class="class-m">
<ul class="nnav">
<li><a href="" class="ce">网站首页</a></li>
<li class="menu_head"> <a href="index1.html" class="ce">关于我们</a>
<ul class="menu_body">
</ul>
</li><li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="index2.html" class="ce">主题旅游</a>
<ul class="menu_body">
<li><a href="index3.html" class="er">国内游</a></li>
<li><a href="index4.html" class="er">出境游</a></li>
</ul>
</li><li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="index5.html" class="ce">热门目的地</a>
<ul class="menu_body">
<li><a href="index6.html" class="er">云南</a></li>
<li><a href="index7.html" class="er">四川</a></li>
<li><a href="index8.html" class="er">福建</a></li>
</ul>
</li><li class="menu_head"> <a href="index9.html" class="ce">新闻资讯</a>
<ul class="menu_body">
</ul>
</li><li class="menu_head">
<dl class="ericon">
<span class="icon1"></span><span class="icon2"></span>
</dl>
<a href="index10.html" class="ce">舒适酒店</a>
<ul class="menu_body">
<li><a href="index11.html" class="er">双人间</a></li>
<li><a href="index12.html" class="er">单人间</a></li>
<li><a href="index13.html" class="er">总统套房</a></li>
</ul>
</li><li class="menu_head"> <a href="index14.html" class="ce">联系我们</a>
<ul class="menu_body">
</ul>
</li>
</ul>
</div>
</div>
<div class="opacity2"></div>
<div id="header" class="head visible-lg visible-md">
<div class="container-fluid">
<div class="logo wow fadeInLeft col-md-3"><a href=""><img src="picture/logo.png"></a></div>
<div class="col-md-9" style="height: 56px;">
<div class="search col-md-3 wow fadeInRight" style="float: right;">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0">
<input class="txt1" type="text" name="q" placeholder="请输入关键字">
<input class="btn1" type="submit" value="">
</form>
</div>
<div class="col-md-9 nav wow fadeInDown navbar-nav nav_box" style="float: right; text-align: right;">
<div class="yiji current"><a href="">首页</a></div>
<div class="yiji"><a href="index1.html"><em>关于我们</em></a>
<div style="display:none">
</div>
</div><div class="yiji"><a href="index2.html"><em>主题旅游</em></a>
<div class="libox">
<a href="index3.html"><em>国内游</em></a> <a href="index4.html"><em>出境游</em></a> </div>
</div><div class="yiji"><a href="index5.html"><em>热门目的地</em></a>
<div class="libox">
<a href="index6.html"><em>云南</em></a> <a href="index7.html"><em>四川</em></a> <a href="index8.html"><em>福建</em></a> </div>
</div><div class="yiji"><a href="index9.html"><em>新闻资讯</em></a>
<div style="display:none">
</div>
</div><div class="yiji"><a href="index10.html"><em>舒适酒店</em></a>
<div class="libox">
<a href="index11.html"><em>双人间</em></a> <a href="index12.html"><em>单人间</em></a> <a href="index13.html"><em>总统套房</em></a> </div>
</div><div class="yiji"><a href="index14.html"><em>联系我们</em></a>
<div style="display:none">
</div>
</div> </div>
</div>
</div>
</div>
<div id="molheader" class="visible-sm visible-xs">
<div class="logomol"><a href=""><img src="picture/logo.png"></a></div>
<div class="mol_navbutton"><img src="picture/menu.png"></div>
</div>
<!-- pcbanner -->
<div id="myCarousel" class="carousel slide visible-md visible-lg">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<a class="carousel-control left" href="" data-slide="prev"> </a> <a class="carousel-control right" href="" data-slide="next"> </a>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner"> <div class='item active'> <a><img src="picture/1-1Z10G016130-L.jpg"><em></em></a> </div>
<div class='item'> <a><img src="picture/1-1Z10G016130-L.jpg"><em></em></a> </div>
<div class='item'> <a><img src="picture/1-1Z10G016130-L.jpg"><em></em></a> </div>
</div>
</div>
<!-- 手机banner -->
<div id="molbanner" class="visible-xs visible-sm">
<div class="swiper-container swiper-banner">
<ul class="swiper-wrapper banner-img">
<li class="swiper-slide"><a class="pic"><img src="picture/1-1Z10G016130-L.jpg"></a></li>
<li class="swiper-slide"><a class="pic"><img src="picture/1-1Z10G016130-L.jpg"></a></li>
<li class="swiper-slide"><a class="pic"><img src="picture/1-1Z10G016130-L.jpg"></a></li>
</ul>
<div class="pagination"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
</div>
<div class="section1">
<ul class="clearfix">
<li class="li0 col-md-3 col-xs-6 block" data-move-x="-50px" style="opacity: 0; transform: translateX(-50px);"> 热门目的地<br>
<em><strong></strong> DESTINATIONS</em> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="7.html"><img src="picture/1-1Z10G059480-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>乐山大佛</i> <em>Gulangyu</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="8.html"><img src="picture/1-1Z10G100110-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>九寨沟</i> <em>Jiuzhaigou</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="9.html"><img src="picture/1-1Z10G100350-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>海螺沟</i> <em>Hailuogou</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="4.html"><img src="picture/1-1Z10G05G90-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>玉龙雪山</i> <em>Snow Mountain</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="6.html"><img src="picture/1-1Z10G05Z60-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>大理古城</i> <em>Dali ancient city</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li1 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" style="opacity: 0; transform: translateX(-300px) translateZ(-200px) rotateY(180deg);"> <a href="5.html"><img src="picture/1-1Z10G05S70-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1">
<h2><i>洱海</i> <em>Erhai</em></h2>
<p class="visible-lg visible-md"></p>
</div>
</div>
</div>
</a> </li>
<li class="li2 col-md-3 col-xs-6 block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="300px" style="opacity: 0; transform: translateX(300px) translateZ(-200px) rotateY(180deg);"> <a href="index5.html">
<div class="more">
<h2>View more</h2>
<em></em></div>
</a> </li>
</ul>
</div>
<div class="section2">
<div class="wrap_section2">
<h2 class="tt1 block" data-move-y="-50px" style="opacity: 0; transform: translateY(-100px);">关于我们</h2>
<p class="tt2 block" data-move-y="-50px" style="opacity: 0; transform: translateY(-50px);">About Us <em></em></p>
<p class="info block" data-move-x="-50px" style="opacity: 0; transform: translateX(-50px);">途牛旅游网创立于2006年10月，以让旅游更简单为使命，为消费者提供由北京、xx、广州、深圳等180个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。 目前，途牛旅游网提供100万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过1500万人次出游...</p>
<a href="index1.html" class="more"></a>
<div class="div_img"><img class="img" src="picture/about.jpg"><em></em></div>
</div>
</div>
<div class="section3">
<div class="wrap_section3">
<h2 class="tt1 textaligntt1 block" data-move-y="-100px" style="opacity: 0; transform: translateY(-100px);">主题旅游</h2>
<p class="tt2 textaligntt2 block" data-move-y="-50px" style="opacity: 0; transform: translateY(-50px);">Theme tourism <em></em></p>
</div>
<ul>
<li> <a href="10.html"> <img class="img1 visible-lg visible-md" src="picture/1-1Z10G201100-L.jpg"> <img class="img1 visible-xs visible-sm" src="picture/1-1Z10G201100-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1"> <img src="picture/ic1.png">
<p>Hong Kong</p>
<em>香港2日半自助游</em> </div>
</div>
</div>
<div class="mark1">
<div class="wrap_mark">
<div class="wrap_mark1"> <em>香港2日半自助游</em>
<p>Hong Kong</p>
<span class="more">查看更多</span> </div>
</div>
</div>
</a> </li>
<li> <a href="11.html"> <img class="img1 visible-lg visible-md" src="picture/1-1Z10G203290-L.jpg"> <img class="img1 visible-xs visible-sm" src="picture/1-1Z10G203290-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1"> <img src="picture/ic1.png">
<p>Gulangyu</p>
<em>鼓浪屿</em> </div>
</div>
</div>
<div class="mark1">
<div class="wrap_mark">
<div class="wrap_mark1"> <em>鼓浪屿</em>
<p>Gulangyu</p>
<span class="more">查看更多</span> </div>
</div>
</div>
</a> </li>
<li> <a href="12.html"> <img class="img1 visible-lg visible-md" src="picture/1-1Z10G204390-L.jpg"> <img class="img1 visible-xs visible-sm" src="picture/1-1Z10G204390-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1"> <img src="picture/ic1.png">
<p>Huli mountain fort</p>
<em>胡里山炮台</em> </div>
</div>
</div>
<div class="mark1">
<div class="wrap_mark">
<div class="wrap_mark1"> <em>胡里山炮台</em>
<p>Huli mountain fort</p>
<span class="more">查看更多</span> </div>
</div>
</div>
</a> </li>
<li> <a href="13.html"> <img class="img1 visible-lg visible-md" src="picture/1-1Z10G205390-L.jpg"> <img class="img1 visible-xs visible-sm" src="picture/1-1Z10G205390-L.jpg">
<div class="mark">
<div class="wrap_mark">
<div class="wrap_mark1"> <img src="picture/ic1.png">
<p>Dream Kingdom</p>
<em>方特梦幻王国</em> </div>
</div>
</div>
<div class="mark1">
<div class="wrap_mark">
<div class="wrap_mark1"> <em>方特梦幻王国</em>
<p>Dream Kingdom</p>
<span class="more">查看更多</span> </div>
</div>
</div>
</a> </li>
</ul>
</div>
<div class="section4">
<div class="wrap_section4">
<h2 class="tt1 textaligntt1 block" data-move-y="-100px" style="opacity: 0; transform: translateY(-100px);">新闻资讯</h2>
<p class="tt2 textaligntt2 block" data-move-y="-50px" style="opacity: 0; transform: translateY(-50px);">News information <em></em></p>
<div class="swiper-container news_swiper">
<div class="swiper-wrapper"> <div class="swiper-slide"><a href="19.html"><i><img style="width: 100%;" src="picture/1-1Z10G440520-L.jpg"></i>
<div class="info">
<h2>在旅游过程中需要注意些什么</h2>
<p>旅游出行前准备工作： 1、请在导游通知您后用手机存上导游的电话号码，以防在旅游过程当中有不方便的地方。 2、在您欣赏美景享受美食的同时，请保管...</p>
<span>2019-01-07</span></div>
</a></div>
<div class="swiper-slide"><a href="18.html"><i><img style="width: 100%;" src="picture/1-1Z10G440240-L.jpg"></i>
<div class="info">
<h2>又到圣诞，今年的圣诞都想好怎么过了吗</h2>
<p>香港地区 第一站：尖沙咀 The One：轻松小熊陪你过圣诞 第二站：铜锣湾 皇室堡：轻松小熊波波池 时代广场：Snoopy Christmas 第三站：旺角 朗豪坊：Line你埋嚟...</p>
<span>2019-01-07</span></div>
</a></div>
<div class="swiper-slide"><a href="17.html"><i><img style="width: 100%;" src="picture/1-1Z10G439570-L.jpg"></i>
<div class="info">
<h2>泰国还有那么一座岛叫大长岛，那么的美</h2>
<p>一直隐藏着的大长岛，很多人都没听过这个名字。但看过《机械师2》的朋友不知道会不会有印象，杰森斯坦森去找杨紫琼时，虽然官宣说是丽贝岛，但实际...</p>
<span>2019-01-07</span></div>
</a></div>
<div class="swiper-slide"><a href="16.html"><i><img style="width: 100%;" src="picture/1-1Z10G439190-L.jpg"></i>
<div class="info">
<h2>如果你只给纽约一天</h2>
<p>纽约 这着实是一个让人无法轻易下定义的城市。 她有着物欲横流的大道，也有着宁静安逸的中央公园；她有着街头贩卖的艺术品，也有着绝世仅有的孤品...</p>
<span>2019-01-07</span></div>
</a></div>
<div class="swiper-slide"><a href="15.html"><i><img style="width: 100%;" src="picture/1-1Z10G43S40-L.jpg"></i>
<div class="info">
<h2>xx十大必游景点</h2>
<p>作为中国最早接触外界的城市，xxxx一直是中国繁华都市的代表，素有魔都之称。根据蚂蜂窝用户出行数据，文中为大家呈现了xx最受欢迎的十大景点。...</p>
<span>2019-01-07</span></div>
</a></div>
<div class="swiper-slide"><a href="14.html"><i><img style="width: 100%;" src="picture/1-1Z10G43Q10-L.jpg"></i>
<div class="info">
<h2>普吉岛旅行不可不做的几件事！</h2>
<p>如果你喜欢光着脚丫走在那软软的沙滩上，看那潮起潮落的海水，那普吉岛绝对是个绝佳的选择。喜欢热闹可以去芭东海滩，它是普吉岛人气最旺的海滩，...</p>
<span>2019-01-07</span></div>
</a></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="footbg clearfix">
<div class="footwrap col-md-11">
<div class="logofriendly clearfix">
<div class="footlogo col-sm-12 col-xs-12 col-md-2 block" data-move-x="-100px" style="opacity: 0; transform: translateX(-100px);"><img src="picture/logo.png"></div>
<div class="footnav col-sm-12 col-xs-12 col-md-8 block" data-move-x="-100px" style="opacity: 0; transform: translateX(-100px);">友情链接： </div>
</div>
<div class="copyright clearfix">
<p class="p1">Copyright © 2020 某某旅游有限公司 版权所有
</p>
<!--<p class="p2">技术支持：<a href="http://www.dede58.cn/"> 58</a></p>-->
</div>
</div>
<div class="winxin col-md-1 visible-lg visible-md"> <i><img src="picture/weixin.png"></i>
<h2></h2>
</div>
</div>
</div>
</body>
<script src="js/online.js" type="text/javascript"></script>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
