⛵ 源码获取 文末联系 ✈
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 class="no-js" lang="en-US">
<head>
<!-- Basic Page Needs
================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS
================================================== -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Bootstrap -->
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Theme -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- Style Css -->
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<!-- Magnific Popup -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<!-- Owl Carousel -->
<link href="css/owl.theme.css" rel="stylesheet" type="text/css">
<!-- Owl Carousel Theme -->
<!-- Color Style -->
<link href="css/color1.css" rel="stylesheet" type="text/css">
<link href="http://www.ylcp.shop/files/files/1649494603089/css/custom.css" rel="stylesheet" type="text/css">
<!-- CUSTOM STYLESHEET FOR STYLING -->
<!-- SCRIPTS
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Modernizr -->
</head>
<body class="home">
<div class="body">
<!-- 头部 -->
<header class="topbar">
<!-- 顶部 -->
<div class="container">
<div class="header-info-col">
<i class="fa fa-phone"></i>
<strong>0512-57995109 </strong>
</div>
<div class="header-info-col">
<i class="fa fa-envelope-o"></i>
<strong><a href="javascript:;">Cindy@kindjob.cn</a></strong>
</div>
<div class="header-info-col">
<i class="fa fa-map-marker"></i>
<strong>昆山市庆丰西路639号智谷创意工业园301</strong>
</div>
</div>
</header>
<!-- 导航栏 -->
<header class="site-header-wrapper">
<div class="site-header">
<div class="container">
<div class="site-logo">
<a href="" title="Obsequy" class="default-logo"><img src="picture/logo.png" alt="Obsequy"></a>
</div>
<a href="#" id="menu-toggle">
<i class="fa fa-bars"></i>
</a>
<nav class="main-navigation pull-right">
<ul class="dd-menu sf-menu">
<li class="active">
<a href="" title="Home"><span>首页</span></a>
</li>
<li>
<a href="kinds.html" title="About"><span>宠物品种</span></a>
</li>
<li>
<a href="shop.html" title="Shop"><span>宠物用品</span></a>
</li>
<li>
<a href="blog.html" title="Services"><span>萌宠资讯</span></a>
</li>
<li>
<a href="about.html" title="Blog"><span>关于我们</span></a>
</li>
<li>
<a href="contact.html" title="Send Flowers"><span>联系我们</span> <img src="picture/flower-e1476975452944.png" alt=""></a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 幻灯片-->
<div class="hero-slider heroflex flexslider" data-autoplay="yes" data-pagination="no" data-arrows="yes" data-style="slide">
<ul class="slides">
<li style="background-image:url(picture/bg_slide2.jpg);">
</li>
<li style="background-image:url(picture/bg_slide3.jpg);">
</li>
</ul>
</div>
<div class="secondary-bg cta">
<div class="container">
<a href="contact.html" class="btn btn-default btn-transparent btn-rounded pull-right">联系我们</a>
<h3 class="white-text margin-0">我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</h3>
</div>
</div>
<!--主体 -->
<div class="main" role="main">
<!-- 服务 -->
<div id="content" class="content full">
<div class="container">
<div class="row">
<div class="spacer-50">
<img src="picture/zhua.png">
<h2><span>——</span>我们的服务<span>——</span></h2>
<p>美好的陪伴来自温暖的生命</p>
</div>
<img src="picture/gou.png" alt="">
<div class="spacer-50"></div>
</div>
</div>
<!-- 萌宠品种 -->
<div class="parallax parallax1 padding-tb75" style="background:url(picture/b1.jpg);">
<div class="container">
<div class="row no-gutters secondary-bg">
<div class="col-md-3">
<div class="padding-all27">
<p class="white-text">
动物是人类的朋友。在这里，每一个热爱宠物的人<br>不但能找到他们想要的，而且能得到比他们想要的更多。</p>
<a href="kinds.html" title="" class="btn-all">所有品种 <i class="vc_btn3-icon fa fa-chevron-right"></i> </a>
</div>
</div>
<div class="col-md-9 bg-white">
<div class="carousel-area">
<div class="carousel-wrapper-outer">
<h2>萌宠展示</h2>
<!-- 萌宠展示 -->
<div class="carousel-wrapper">
<div class="row">
<ul class="owl-carousel carousel-fw" data-columns="3" data-autoplay="" data-pagination="no" data-arrows="yes" data-single-item="no" data-items-desktop="3" data-items-desktop-small="3" data-items-tablet="2" data-items-mobile="1">
<li class="item">
<div class="grid-item obituary-grid-item obituary-carousel-item format-standard">
<a href="kinds.html" class="media-block"><img src="picture/img4-350x500.jpg" alt=""></a>
<div class="grid-item-content">
<h3>法国斗牛犬</h3>
<hr class="sm">
<span class="meta-data">聪明敏捷 开朗不常吠</span>
</div>
</div>
</li>
<li class="item">
<div class="grid-item obituary-grid-item obituary-carousel-item format-standard">
<a href="kinds.html" class="media-block"><img src="picture/img5-350x500.jpg" alt=""></a>
<div class="grid-item-content">
<h3>金毛犬 </h3>
<hr class="sm">
<span class="meta-data">热情友善 自信且不怕生</span>
</div>
</div>
</li>
<li class="item">
<div class="grid-item obituary-grid-item obituary-carousel-item format-standard">
<a href="kinds.html" class="media-block"><img src="picture/depositphotos_125040540_original-350x500.jpg" alt=""></a>
<div class="grid-item-content">
<h3>萨摩耶 </h3>
<hr class="sm">
<span class="meta-data">乖巧可爱 微笑天使</span>
</div>
</div>
</li>
<li class="item">
<div class="grid-item obituary-grid-item obituary-carousel-item format-standard">
<a href="kinds.html" class="media-block"><img src="picture/Depositphotos_6699049_original-350x500.jpg" alt=""></a>
<div class="grid-item-content">
<h3>布偶猫</h3>
<hr class="sm">
<span class="meta-data">温顺好静 对人友善</span>
</div>
</div>
</li>
<li class="item">
<div class="grid-item obituary-grid-item obituary-carousel-item format-standard">
<a href="kinds.html" class="media-block"><img src="picture/Depositphotos_67927599_original-350x500.jpg" alt=""></a>
<div class="grid-item-content">
<h3>短毛猫</h3>
<hr class="sm">
<span class="meta-data">生性聪明 性格温顺</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 我们的保障 -->
<div class="container">
<div class="spacer-70"></div>
<div class="spacer-50">
<img src="picture/zhua.png">
<h2><span>——</span>我们的保障<span>——</span></h2>
</div>
<div class="spacer-35"></div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain">
<div class="ibox-icon">
<i class="fa fa-microphone"></i>
</div>
<h3>设备先进</h3>
<p>设施完备，设备先进，为他们提供了最大化的日常生活便利。</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain">
<div class="ibox-icon">
<i class="fa fa-gavel"></i>
</div>
<h3>专业团队</h3>
<p>拥有多位教学经验丰富的A级宠物美容老师和注册宠物兽医师任教</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain">
<div class="ibox-icon">
<i class="fa fa-anchor"></i>
</div>
<h3>优质宠物用品</h3>
<p>涉及囊括了宠物食品、医疗保健品、洗护用品、用品用具、窝包服饰、宠物玩具、美容工具等 </p>
</div>
</div>
</div>
<div class="spacer-35"></div>
</div>
<!-- 宠物之恋 -->
<div class="banner parallax parallax2" style="background-image:url(picture/b2.jpg);">
<div class="accent-overlay"></div>
<div class="banner-caption text-align-center">
<div class="container">
<h2 style="font-weight: 100;">宠物之恋，在于关爱，让你的爱宠享受家的感觉</h2>
</div>
</div>
</div>
<!-- 我们的团队 -->
<div class="gray-bg">
<div class="container">
<div class="spacer-90">
<div class="spacer-90">
<div class="spacer-50">
<img src="picture/zhua.png">
<h2><span>——</span>我们的团队<span>——</span></h2>
<p>凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程，</p>
</div>
</div>
</div>
<div class="carousel-wrapper" style="margin-top: 70px;">
<div class="row">
<ul class="owl-carousel carousel-fw" data-columns="4" data-autoplay="" data-pagination="no" data-arrows="no" data-single-item="no" data-items-desktop="4" data-items-desktop-small="4" data-items-tablet="2" data-items-mobile="1">
<li class="item">
<div class="grid-item service-grid-item service-carousel-item format-standard">
<a class="media-box"><img src="picture/image4-500x320.jpg" alt=""></a>
<div class="grid-item-content">
<h3 class="post-title">
<a>某某某</a>
</h3>
<hr class="sm">
<p>执业兽医师，国际认证资深宠物美容导师。</p>
</div>
</div>
</li>
<li class="item">
<div class="grid-item service-grid-item service-carousel-item format-standard">
<a class="media-box"><img src="picture/image1-500x320.jpg" alt=""></a>
<div class="grid-item-content">
<h3 class="post-title">
<a>某某某</a>
</h3>
<hr class="sm">
<p>B级美容师，注册兽医师，理论与实践经验丰富。</p>
</div>
</div>
</li>
<li class="item">
<div class="grid-item service-grid-item service-carousel-item format-standard">
<a class="media-box"><img src="picture/image5-500x320.jpg" alt=""></a>
<div class="grid-item-content">
<h3 class="post-title">
<a>某某某</a>
</h3>
<hr class="sm">
<p>A级宠物美容师，擅长泰迪的各种造型。</p>
</div>
</div>
</li>
<li class="item">
<div class="grid-item service-grid-item service-carousel-item format-standard">
<a class="media-box"><img src="picture/image6-500x320.jpg" alt=""></a>
<div class="grid-item-content">
<h3 class="post-title">
<a>某某某</a>
</h3>
<hr class="sm">
<p>宠物医院主诊，宠物美容培训中心讲师。</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 萌宠资讯-->
<div class="spacer-50">
<img src="picture/zhua.png">
<h2><span>——</span>萌宠资讯<span>——</span></h2>
<p>从分享你我的养宠心情到爱宠人之间的经验交流</p>
</div>
<div class="spacer-35"></div>
<div class="our-services">
<div class="carousel-wrapper padding-tb0">
<div class="row">
<ul class="owl-carousel carousel-fw" data-columns="2" data-autoplay="5000" data-pagination="yes" data-arrows="no" data-single-item="no" data-items-desktop="2" data-items-desktop-small="2" data-items-tablet="2" data-items-mobile="1">
<li class="item">
<div class="grid-item post-grid-item post-carousel-item format-standard">
<a href="#" class="media-box">
<img src="picture/img17-600x400.jpg">
</a>
<div class="grid-item-content">
<div class="grid-post-date">
<span class="post-date">08</span>
<span class="post-month">Nov</span>
</div>
<div class="grid-item-content-in">
<h3 class="post-title">
<a href="blog-show.html">幼犬为什么容易得犬瘟和细小</a>
</h3>
<p>刚从狗贩子手里买来的小狗，抵抗力弱、环境恶劣、护理不当，身体基础很差。到家后...</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="grid-item post-grid-item post-carousel-item format-standard">
<a href="blog-show.html" class="media-box">
<img src="picture/new.jpg">
</a>
<div class="grid-item-content">
<div class="grid-post-date">
<span class="post-date">08</span>
<span class="post-month">Nov</span>
</div>
<div class="grid-item-content-in">
<h3 class="post-title">
<a href="#">如何给猫咪驱虫</a>
</h3>
<p>猫咪定期驱虫，是保障猫咪身体健康的一个重要的环节。尤其是刚进家的流浪猫...</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="grid-item post-grid-item post-carousel-item format-standard">
<a href="blog-show.html" class="media-box">
<img src="picture/new1.jpg">
</a>
<div class="grid-item-content">
<div class="grid-post-date">
<span class="post-date">08</span>
<span class="post-month">Nov</span>
</div>
<div class="grid-item-content-in">
<h3 class="post-title">
<a href="#">如何通过牙齿推断猫咪的年龄</a>
</h3>
<p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="grid-item post-grid-item post-carousel-item format-standard">
<a href="blog-show.html" class="media-box">
<img src="picture/img17-600x400.jpg">
</a>
<div class="grid-item-content">
<div class="grid-post-date">
<span class="post-date">08</span>
<span class="post-month">Nov</span>
</div>
<div class="grid-item-content-in">
<h3 class="post-title">
<a href="#">如何通过牙齿推断猫咪的年龄</a>
</h3>
<p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p>
</div>
</div>
</div>
</li>
<li class="item">
<div class="grid-item post-grid-item post-carousel-item format-standard">
<a href="blog-show.html" class="media-box">
<img src="picture/img17-600x400.jpg">
</a>
<div class="grid-item-content">
<div class="grid-post-date">
<span class="post-date">08</span>
<span class="post-month">Nov</span>
</div>
<div class="grid-item-content-in">
<h3 class="post-title">
<a href="#">如何通过牙齿推断猫咪的年龄</a>
</h3>
<p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="spacer-60"></div>
</div>
</div>
</div>
<!-- 朋友 -->
<div class="secondary-bg cta clearfix ">
<div class="container">
<div class="pic">
<img src="picture/dog.png" alt="">
</div>
<div class="cont">
<h3 class="white-text margin-0">动物是人类的朋友</h3>
<p>从分享你我的养宠心情到爱宠人之间的经验交流，从网上购物到在线医疗，宠物生活中涉及的方方面面，都在不断努力将它们做到最好。在这里，每一个热爱宠物的人，不但能找到他们想要的，而且能得到比他们想要的更多。</p>
<a href="about.html" title="Shop Flowers Now" class="btn btn-default btn-transparent btn-rounded pull-right">了解更多</a>
</div>
<div class="friend">
<img alt="" src="picture/dog2.png">
<a href="about.html" title="" class="btn-all">了解更多 <i class="vc_btn3-icon fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- 尾部 -->
<footer class="footer">
<div class="site-footer">
<div class="container">
<div class="row">
<!-- 关于-->
<div class="col-md-3 bot footer_widget">
<h5>关于我们</h5>
<div class="footer-logo margin-20">
<a href="about.html" title="Obsequy"><img src="picture/logo.png" alt="Obsequy"></a>
</div>
<p>让天下宠物得到人间关爱<br>是XX始终不变的企业愿景<br>这就是XX步步领先的秘诀所在</p>
</div>
<!-- 服务 -->
<div class="col-md-3 bot footer_widget">
<h5>我们的服务</h5>
<div class="menu-services">
<ul>
<li><a href="kinds.html" title="Burial Services">宠物品种</a></li>
<li><a href="blog.html" title="Catering Services">萌宠资讯</a></li>
<li><a href="shop.html" title="Celebrating a Life">宠物用品</a></li>
<li><a href="contact.html" title="Funeral Services">联系我们</a></li>
</ul>
</div>
</div>
<!-- 品种 -->
<div class="col-md-3 bot footer_widget">
<h5>萌宠品种</h5>
<div class="recent-post">
<ul>
<li>
<div class="recent-post-imgb">
<a href="kinds.html" title="recent post"><img src="picture/kinds(2).jpg"></a>
</div>
<div class="recent-post-txtb">
<h6><a href="kinds.html" title="Why you should plan ahead">法国斗牛犬</a></h6>
<span>聪明敏捷 开朗不常吠</span>
</div>
</li>
<li>
<div class="recent-post-imgb">
<a href="kinds.html" title="recent post"><img src="picture/kinds(3).jpg"></a>
</div>
<div class="recent-post-txtb">
<h6><a href="kinds.html" title="What to do when a death occurs">金毛系列</a></h6>
<span>热情友善 自信且不怕生</span>
</div>
</li>
<li>
<div class="recent-post-imgb">
<a href="kinds.html" title="recent post"><img src="picture/kinds(4).jpg"></a>
</div>
<div class="recent-post-txtb">
<h6><a href="kinds.html" title="Funeral Etiquettes you should remember">萨摩系列 </a></h6>
<span>乖巧可爱 微笑天使</span>
</div>
</li>
</ul>
</div>
<div class="spacer-30"></div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="site-footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<p>XXX. XXX.</p>
</div>
<div class="col-md-6 col-sm-6">
<div class="social-icons-colored pull-right">
<ul>
<li class="facebook"><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
<li class="youtube"><a href="#" title="youtube"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- 回到顶部 -->
<a id="back-to-top"><i class="fa fa-arrow-up"></i></a>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<!-- Jquery Library Call -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- Maginific Popup Plugin -->
<script src="js/ui-plugins.js"></script>
<!-- UI Plugins -->
<script src="js/helper-plugins.js"></script>
<!-- Helper Plugins -->
<script src="js/owl.carousel.min.js"></script>
<!-- Owl Carousel -->
<script src="js/bootstrap.js"></script>
<!-- UI -->
<script src="js/init.js"></script>
<!-- All Scripts -->
<script src="js/jquery.flexslider.js"></script>
<!-- FlexSlider -->
<!--<script src="js/jquery.mb.YTPlayer.js"></script>-->
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
![[附源码]SSM计算机毕业设计中小学微课学习系统JAVA](https://img-blog.csdnimg.cn/dba03fab8fbf44308c5b8e7df4652f31.png)
