⛵ 源码获取 文末联系 ✈
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="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>驿人家</title>
<!-- <link rel="stylesheet" href="http://www.ylcp.shop/files/files/css/cssReset.css"> -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<div class="header">
<img src="picture/02.png" alt="" class="i1">
<ul type="none">
<li><a href="">首页</a></li>
<li><a href="siteinfo.html">关于我们</a></li>
<li><a href="news.html">新闻资讯</a></li>
<li><a href="ContactUS.html">联系我们</a></li>
</ul>
</div>
</div>
<!-- 大背景图 -->
<div class="main">
<div class="menu">
<div class="d">
<div class="d1">
<span class="p">地址</span>
<span class="s1">
<!-- <p>地址</p> -->
<div class="d1"></div>
</span>
</div>
<div class="d2">
<span class="p">入住时间</span>
<span class="s1">
<div class="d1"></div>
</span>
</div>
<div class="d3">
<!-- <div class="d1"></div> -->
<span class="p">离开时间</span>
<span class="s1">
<div class="d1">
<!-- <span class="d2"></span> -->
</div>
</span>
</div>
<div class="d4">
<span>查询并预定</span>
</div>
</div>
</div>
</div>
<!-- 服务项目 -->
<div class="d5">
<hr>
<div class="d6"><b>服务项目</b></div>
<div class="d7"><b>SERVICE PROJECT</b></div>
<div class="box1">
<div class="v1"></div>
<div class="v2"></div>
<div class="v3"></div>
<div class="v4"></div>
</div>
<div class="s1">
<span class="s2"><b>指定房型<br>经典套餐 | 山景大床房/家庭标准房<br>/山景双床房</b></span>
<span class="s3"><b>营养早餐<br>营养丰富/食材新鲜/味蕾享受</b></span>
<span class="s4"><b>公共体验区<br>露天泳池/咖啡厅/书吧/篝火晚会<br>/封闭式KTV</b></span>
<span class="s5"><b>立即预定<br>订购热线|21345132454124</b></span>
</div>
</div>
<!-- 民宿简介 -->
<div class="box2">
<div class="d8">
<div class="d9">
<hr>
<div class="c1"><b>民宿简介</b></div>
<div class="c2"><b>INTRODUCTION OF A HOME STAY FACILITY</b></div>
<div class="c3">
<p>民宿是指利用自用住宅空闲房间，结合当地人文、自然景观、生态、环境资源及农林渔牧生产活动，为外出郊游或远行的旅客提供个性化住宿场所。除了一般常见的饭店以及旅社之外，其它可以提供旅客住宿的地方，例如民宅、休闲中心、农庄、农舍、牧场等，都可以归纳成民宿类。而民宿的产生是必然的，并不偶发于日本或中国台湾，世界各地都可看到类似性质的服务，民宿这个名字，在世界各国会因环境与文化生活不同而略有差异，欧陆方面多是采农庄式民宿(Accommodation
in the
Farm)经营，让一般民宿能够舒适地享受农庄式田园生活环境，体验农庄生活;加拿大则是采假日农庄(VacationFarm)的模式，提供一般民宿假日可以享受农庄生活;美国都多见居家式民(Homestay)或青年旅舍(Hostcl)，不刻意布置的居家住宿，价格相对饭店便宜的住宿选择;英国则惯称Bed
and Breakfast(BNB)，按字面解释，意谓提供睡觉的地区以及简单早餐，索费大多每人每晚约三、三十英镑，视星级而定，当然价格会比一般旅馆便宜许多。</p>
</div>
</div>
<div class="d10">
<img src="picture/tp1-1.jpg" alt="">
<div class="d1">
<img src="picture/kaishi.png" alt="" class="i1">
<span>00:20:33</span>
<img src="picture/shengyinguan.png" alt="" class="i2">
<img src="picture/fangdazhanshi.png" alt="" class="i3">
<div class="s1">
<div class="s2"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 民宿特色 -->
<div class="box3">
<hr>
<div class="c4"><b>民宿特色</b></div>
<div class="c5"><b>CHARACTERISTICS OF HTE HOME STAY FACILITY</b></div>
<div class="c6">
<div class="yuan1"></div>
<div class="yuan2"></div>
<div class="yuan3"></div>
</div>
<div class="c7">
<div class="k1">
<hr>
<div class="wen1"><b>安全</b></div>
<div class="w1">
<b>1.检查电缆沟、泵房有否积水，排水沟是否畅通及油、气库的储备状况。2检查供电、供水、电话通信、卫星电视设备及酒店主、附楼构筑物安。</b>
</div>
</div>
<div class="k2">
<hr>
<div class="wen2"><b>干净</b></div>
<div class="w2"><b>每名从业人员配有的工作服须定期清洗, 保持清洁六、不准把私人物品、有害物品带入工作间。酒店卫生管理制度3.一目的为提高酒店卫生管理工作质量，向顾...</b></div>
</div>
<div class="k3">
<hr>
<div class="wen3"><b>舒适</b></div>
<div class="w3">
<b>注重运用新的科学与技术,追求室内空间“舒适度”的提高不再片面注重表面的装饰效果。充分利用现代工业的成果采用工业材料和批量生产的工业产品。</b>
</div>
</div>
</div>
</div>
<!-- 新闻资讯 -->
<div class="box4">
<hr>
<div class="d11"><b>新闻资讯</b></div>
<div class="w4"><b>NEWS AND INFORMATION </b></div>
<div class="k1">
<div class="zuo">
<div class="d12">
<hr>
<div class="w5"><b>驿人家 新闻</b></div>
<span><b>大街上飞机扣水电费几哈</b></span>
</div>
</div>
<div class="you">
<div class="shang">
<div class="z1">
<hr class="h1">
<span class="s1">06</span>
<span class="s2">19</span>
<hr class="h2">
<span class="s3">2 0 2 1</span>
</div>
<div class="y1">
<span class="s4">
<p><b>驿人家民宿完成数百万人民币天使轮融资</b></p>
<hr>
<span>
<p>
据了解，城客是一个城市民宿品牌。打造“旅行+居住+消费”民宿空阃体验新模式，勾开开启“虚拟店+服务中心”的运营模式，即100间房为1家虚拟店。1个服务中心会覆盖3公里以内的虚拟店，提供专业的24小时管家服务、专业的保洁团队、统一的布草洗涤以及畜存和接特中心。据不完全统计，城客所属领域旅游本年度共有3笔融资。
</p>
</span>
</span>
</div>
</div>
<div class="zhong">
<div class="z1">
<hr class="h1">
<span class="s1">06</span>
<span class="s2">19</span>
<hr class="h2">
<span class="s3">2 0 2 1</span>
</div>
<div class="y1">
<span class="s4">
<p><b>驿人家民宿完成建设，吸引百万游客前往</b></p>
<hr>
<span>
<p>
据了解，城客是一个城市民宿品牌。打造“旅行+居住+消费”民宿空阃体验新模式，勾开开启“虚拟店+服务中心”的运营模式，即100间房为1家虚拟店。1个服务中心会覆盖3公里以内的虚拟店，提供专业的24小时管家服务、专业的保洁团队、统一的布草洗涤以及畜存和接特中心。据不完全统计，城客所属领域旅游本年度共有3笔融资。
</p>
</span>
</span>
</div>
</div>
<div class="xia">
<div class="z1">
<hr class="h1">
<span class="s1">06</span>
<span class="s2">19</span>
<hr class="h2">
<span class="s3">2 0 2 1</span>
</div>
<div class="y1">
<span class="s4">
<p><b>驿人家民宿打开全新渠道收获了大量粉丝</b></p>
<hr>
<span>
<p>
据了解，城客是一个城市民宿品牌。打造“旅行+居住+消费”民宿空阃体验新模式，勾开开启“虚拟店+服务中心”的运营模式，即100间房为1家虚拟店。1个服务中心会覆盖3公里以内的虚拟店，提供专业的24小时管家服务、专业的保洁团队、统一的布草洗涤以及畜存和接特中心。据不完全统计，城客所属领域旅游本年度共有3笔融资。
</p>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="box5">
<hr>
<div class="s6"><b>驿 人 家</b></div>
<div class="d13">
<span class="s7">联系我们:123456789</span>
<span class="s8">微信:YI REN JIA 123456</span>
<span class="s9">网址:www.yi ren jia-com123456</span>
</div>
<div class="box6">
<p>
传真: 123-456-789-000<br>
QQ: 123456789<br>
地址:昆明五华区护国街道五一路100号
</p>
<div class="b1">
<img src="http://www.ylcp.shop/files/files/img1/02.png" alt="" class="g1">
<img src="http://www.ylcp.shop/files/files/img1/%E4%BA%8C%E7%BB%B4%E7%A0%81.png" alt="" class="g2">
</div>
</div>
</div>
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
