源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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="data: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="data:images/search_icon.png" alt="#" /></a> </li><li class="mean-last"> <a href="#"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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>关于我们 &nbsp|&nbsp 版权声明&nbsp|&nbsp联系电话:111111&nbsp|&nbsp邮箱:111111@www.com</p><p>Copyright &copy; 大美中国&nbsp|&nbsp实名认证</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%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


HTML非遗文化网页设计题材【京剧文化】HTML+CSS(大美中国 14页 带bootstarp)相关推荐

  1. web课程设计:HTML非遗文化网页设计题材【京剧文化】HTML+CSS(大美中国 14页 带bootstarp)

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | ...

  2. 大一html5期末大作业 :基于html实现非遗文化网页设计题材-(坝漆国漆 2页 响应式)

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 国家级非遗 | 非遗文化 | 非遗网页设计 | 非遗保护 | ...

  3. HTML+CSS个人电影网页设计——电影从你的全世界路过(4页)带音乐特效

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  4. web课程设计:HTML非遗文化网页设计题材【京剧文化】HTML+CSS+JavaScript

  5. HTML学生作业网页:使用HTML+CSS技术实现非遗文化网页设计题材【汉服文化—共12个页面】

  6. HTML学生作业网页:网页设计期末作业 使用HTML CSS技术实现非遗文化网页设计题材【汉服文化—共12个页面】

  7. web前端期末大作业:红色主题中国文化网页设计与实现——基于HTML+CSS实现中国梦(20页)

  8. web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板

    web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...

  9. div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板

    web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...

最新文章

  1. 马云:蚂蚁金服这样做区块链!
  2. java oom dump_Java OOM 内存溢出分析
  3. 人工智能秘史(二):美国第一台计算机背后的女程序员
  4. 聚合,组合,继承的区别
  5. OPPO K3将登陆印度市场 高性价比能否占据一席之地
  6. Android 图片相关整理
  7. 析构函数为虚函数的必要性
  8. android的surfaceflinger原理讲解
  9. java路径两种写法/和\\
  10. Activiti 7 配置及相关流程一站式介绍(包含基础流程及网关应用)
  11. 计算机硬件工程师主要干什么,计算机硬件工程师主要学习什么内容
  12. MIPS处理器 CPU控制信号
  13. 通过谷歌Google轻松拥有自己的站内搜索代码
  14. 基于深度搜索的树路径求解_基于深度学习的自动验证码求解器
  15. 亚马逊美国账号怎么注册?有什么条件?
  16. 前端基础之Html、CSS、JavaScript、JQuery、Ajax
  17. 2021独立站VS跨境电商平台怎么选?
  18. HTML5篮球弹跳运动规律,打篮球怎么练弹跳力 弹跳力怎么训练
  19. 结合 ArcGIS 对 CAD 地图入库处理
  20. 电视剧里最肉麻恶心的俗套对白

热门文章

  1. 家用电器的CCC认证流程
  2. 匹配标签的正则(用于抽取纯文本)
  3. 使用man命令,出现 ”No manual entry for” 的解决办法
  4. 51单片机矩阵键盘的控制原理-扫描及使用方式
  5. python自动控制原理_自动控制原理(山东联盟-中国石油大学(华东))知到答案2020年MOOCPython语言程...
  6. LTE-TDD随机接入过程(4)-RIV的解析和Preamble资源的选择
  7. 阿里云盘内测申请_阿里云网盘公测预约开始了,现在申请还送2个T的空间!
  8. 解决Aero Peek 灰色状态无法点击问题
  9. 基于多项式拟合的结构光系统标定
  10. 西安交大计算机辅助手术系统,我们在西安交大感受到外科技术创新的无穷魅力!...