⛵ 源码获取 文末联系 ✈
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>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>memorial books</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive-->
<link rel="stylesheet" href="css/responsive.css">
<!-- fevicon -->
<link rel="icon" href="images/fevicon.png" type="image/gif" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<!-- Tweaks for older IEs-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout home_page" style="border: 1px solid #000000; width: 1400px;height: 500px;;margin: 0 auto;">
<!-- loader -->
<!-- end loader -->
<!-- header -->
<!-- header -->
<header>
<!-- header inner -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo"> <a href="#"><img src="images/logo-1.png" alt="#"></a> </div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
<div class="menu-area">
<div class="limit-box">
<nav class="main-menu">
<ul class="menu-area-main">
<li> <a href="index_1.html">首页</a> </li>
<li> <a href="culture_h.html">文化</a> </li>
<li><a href="view_h.html">风景</a></li>
<li><a href="technology_h.html">科技</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="echarts.html">可视化界面</a></li>
<li><a href="anniversary.html">建党一百周年</a></li>
<li class="mean-last"> <a href="#"><img src="images/search_icon.png" alt="#" /></a> </li>
<li class="mean-last"> <a href="#"><img src="images/top-icon.png" alt="#" /></a> </li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end header inner -->
</header>
<!-- end header -->
<section class="slider_section">
<div id="myCarousel" class="carousel slide banner-main" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="images/3.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption relative">
<h1 style=" color:#483D8B">“中国国粹”-京剧</h1>
<p style="font-size:20px;color:#000000">京剧，又称平剧、京戏，是中国影响最大的戏曲剧种<br> ，分布地以北京为中心，遍及全国各地京剧<br> 流播全国，影响甚广，有“国剧”之称 </p>
<div class="button_section"> <a class="main_bt" href="index_2.html">了解更多</a> </div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="images/8.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption relative">
<h1 style="color:#4B0082">北斗导航卫星</h1>
<p >第55颗北斗导航卫星，也是北斗导航系统的最后一颗组<br> 网卫星，标志着北斗全球卫星导航系统全面完成星<br> 座部署，面向全球开启高精度的定位、导航、<br>授时、短报文通信和国际搜救等服务。 </p>
<div class="button_section"> <a class="main_bt" href="satellite.html">了解更多</a> </div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="images/4.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption relative">
<h1 style="color:#800000">万里长城</h1>
<p>长城，又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连<br> 绵不断的长垣，用以限隔敌骑的行动。长城不仅是中国也是世界<br> 上修建时间最长、工程量最大的一项古代防御工程 </p>
<div class="button_section"> <a class="main_bt" href="greatWall.html" >了解更多</a> </div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- about -->
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="aboutheading">
<h2>传统 <strong class="black">文化</strong></h2>
<span style="font-size:30px;color:#A0522D">民族特色 世代相传 历史悠久 博大精深</span>
</div>
</div>
</div>
<div class="row border">
<div class="col-xl-7 col-lg-7 col-md-12 col-sm-12">
<div class="about-box">
<p> 古文、古诗、词语、乐曲、赋、民族音乐、民族戏剧、曲艺、国画、书法等。中华传统文化，是中华文明成果根本的创造力，是民族历史上道德传承、各种文化思想、精神观念形态的总体。主要由儒、佛、道三家文化为主流组成。传统文化不仅思想深邃圆融，内容广博；更重要的是，儒家、佛家、道家三家文化，高扬道德，为国人提供了立身处世的行为规范，以及最终的精神归宿。儒家以仁义教化为核心；道学以顺应自然为核心；佛学以慈悲、大爱、解脱为核心，强调诸恶莫作，众善奉行。</p>
<a href="culture.html">点我试试</a>
</div>
</div>
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12">
<div class="about-box">
<figure><img src="images/about.png" alt="img" /></figure>
</div>
</div>
</div>
</div>
</div>
<!-- end about -->
<!-- Library -->
<div class="Library">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="titlepage">
<h2>祖国 <strong class="black">河山 </strong></h2>
<span style="font-size:30px;color:#A0522D">锦绣山河 地大物博 碧水青山 富源辽阔</span>
</div>
</div>
</div>
</div>
<div class="bg">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="Library-box">
<figure><img src="images/Library-.jpg" alt="#"/></figure>
</div>
</div>
</div>
</div>
</div>
<div class="row border">
<div class="about-box">
<p> 领略过武夷山史诗般的雄浑气魄，却不知山涧响水的明澈玎琮；领略过桂林山水的清秀甜美，却不晓龙脊梯田的妖娆广阔；领略过苏州园林“小桥流水人家”般的幽情，却不闻虎丘塔上“夕阳西下，断肠人在天涯”样的忧郁。中国是世界四大文明古国之一，幅圆辽阔，山河壮丽，气象万千，物产丰富，历史文化悠久。五千年的人文创造和天开万物造就的自然景观为我们留下了景象骄人、数量繁多的名胜古迹，创造了辉煌的文化艺术。“上有天堂下有苏杭”，“五岳归来不看山，黄山归来不看岳”，“名泉七十二，趵突天下无”...这些家喻户晓的谚语无不在描述着祖国的瑰丽山河。</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="read-more">
<a href="view.html">点我试试</a>
</div>
</div>
</div>
</div>
</div>
<!-- end Library -->
<!--Books -->
<div class="Books">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="titlepage">
<h2>基建 <strong class="black">科技 </strong></h2>
<span style="font-size:30px;color:#A0522D">国富民强 日新月异 蒸蒸日上 欣欣向荣</span>
</div>
</div>
</div>
<div class="row box">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="book-box">
<figure><img src="images/12.png" alt="img"/></figure>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="book-box">
<figure><img src="images/11.png" alt="img"/></figure>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="book-box">
<figure><img src="images/13.png" alt="img"/></figure>
</div>
</div>
</div>
<div class="row border">
<div class="about-box">
<p>在世界基础设施建设上，中国敢称第二，就没有国家敢称第一。在外国人眼里，那些几乎不可能完成的工程， 只要交到中国人手里，保证又好又快地完成。不知道从什么时候起，中国逐渐被称为基建狂魔。其实这是一个非常准确的说法，尤其是近几年，从我国的各种世界性工程的完工，比如第一跨海大桥，世界第一高桥等等，可以看出中国在基建方面的实力。中国在基建方面投入了大量的年的基础设施投入资金和固定资金都占有较大的比例。这些资金被用来建设城市商业建筑、油气运输、水利工程、交通设施等等。正是因为如此，我们才能够享受到便利的生活环境。同时，我国科技飞速发展，如今我们已经做到了在世界的高科技领域占有一席之地，达到了世界的平均水平。</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="read-more">
<a href="technology.html">点我试试</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end Books -->
<!-- Contact -->
<div class="Contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="titlepage3">
<h2>联系我们</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<form>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<input class="form-control" placeholder="姓名" type="Name">
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<input class="form-control" placeholder="电话" type="Phone Number">
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<input class="form-control" placeholder="邮箱" type="Email">
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<textarea class="textarea" placeholder="Message">留言</textarea>
</div>
</div>
</form>
</div>
<button class="send-btn">发送</button>
</div>
</div>
</div>
<!-- end Contact -->
<!-- footer -->
<footer>
<div class="copyright">
<div class="container">
<p>关于我们  |  版权声明 | 联系电话：111111 | 邮箱：111111@www.com</p>
<p>Copyright © 大美中国 | 实名认证</p>
</div>
</div>
</footer>
<!-- end footer -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
![[附源码]java毕业设计家政管理系统](https://img-blog.csdnimg.cn/7974e7b386484953a749d1f17e36afcb.png)
