⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业
-
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">
<title>Computer Mall</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="head clearfix"> <b class="fl"><img src="../电脑商城/images/logo.jpg"></b>
<nav class="fr" style="width: 700px;">
<a href="index.html">商城主页</a>
<a href="about.html">新品先知</a>
<a href="pic.html">优质产品</a>
<a href="news.html">业内新消息</a>
<a href="sp.html">宣传视频</a>
</nav>
</div>
<div class="main clearfix">
<div class="banner"> <img src="../电脑商城/images/time.jpg" width="100%"> </div>
<div class="div7 bg000 clearfix">
<div class="">
<ul id="jSearchHeroDiv" class="imgtextlist">
<li><img src="../电脑商城/images/a1.jpg">
</li>
<li><img src="../电脑商城/images/a2.jpg">
</li>
<li><img src="../电脑商城/images/a3.jpg">
</li>
<li><img src="../电脑商城/images/a4.jpg">
</li>
</ul>
</div>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>企业介绍</h3>
</div>
<div class="fr">
<div label-module="para" style="padding: 10px;box-sizing: border-box;">
<div label-module="para" style="font-size:14px">
联想笔记本发展简介:<br><br>
联想笔记本是指联想集团生产的便携手提电脑。 联想集团成立于1984年,由中科院计算所投资20万元人民币、11名科技人员创办,到今天已经发展成为一家在信息产业内多元化发展的大型企业集团。联想的总部设在美国罗利,并建立了以中国北京、日本东京和美国罗利三大研发基地为支点的全球研发架构。通过联想自己的销售机构、联想业务合作伙伴以及与IBM的联盟,新联想的销售网络遍及全世界。
<br>
<br>
联想的创新精神和IBM个人电脑事业部不断寻求突破的传统在今天的联想得到了延续,新联想是一个具有全球竞争力的IT巨人。
<br>
<br>
2004年12月联想现场宣布以12.5亿美金收购IBM个人电脑业务,包括台式机、笔记本及个人产品研发和采购。其中6.5亿美元联想以现金形式支付。联想控股在集团占有45%股份,IBM占18.5%。联想未来5年使用IBM品牌。
</div>
</div>
</div>
</div>
<div class="div2 bg000 ">
<div class="bar">
<h3>关于我们</h3>
</div>
<div style="padding: 5px;height: 460px;">
<p style="text-indent: 2em;">联想集团,成立于1984年,是由中科院计算所投130万元人民币,11名管理人员共同创办的一家在信息产业内多元化发展的大型企业集团,富有创新性的国际化的科技公司。作为全球电脑市场的领导企业,联想从事开发、制造并销售可靠的、安全易用的技术产品及优质专业的服务,帮助全球客户和合作伙伴取得成功。联想公司主要生产台式电脑、服务器、笔记本电脑、打印机、掌上电脑、主板、手机 、一体机电脑等商品。</p>
<p style="text-indent: 2em;">2004年,联想集团收购IBM PC(Personal computer,个人电脑)事业部。</p>
<p style="text-indent: 2em;">2016年8月,全国工商联发布“2016中国民营企业500强”榜单,联想名列第四。</p>
<p style="text-indent: 2em;">2019年12月18日,联想控股发公告宣布董事长柳传志退休,由宁旻接任联想控股董事长。</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="zhaopian">
<img src="images/dibu1.jpg" width="100%">
</div>
<div class="wenzi1">
<p1>显示屏:采用15.6英寸微边全面屏,100%sRGB高色域,1920*1080高清分辨率,支持更高的165Hz刷新率和G-Sync FreeSync Premium双料防撕裂<br><br>
处理器和显卡:搭载AMD Ryzen 7 5800H处理器。7nm的制程工艺,主频为3.2GHz,睿频4.4GHz,功耗70W。RTX 3050Ti 4GB芯片,4GB GDDR6 显存,支持Dynamic Boost 2.0,全功率性能释放可达95W<br><br>
散热:采用霜刃散热系统3.0,3 x 8mm高性能复合式热管,配合一体式散热模组,高效导热297片0.1mm超薄铜合金散热鳍片,可以迅速导出热量。<br><br>
电源电池:支持100W PD快充,80Wh大容量电池,大功率适配器,支持LEGION超能快充,30分钟充满50%电量,一小时可充至80%以上。<br>
</p>
</div>
<div class="footer">版权所有 xxx</div>
</html>
学的反而越迷茫
有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?
所以,放松心态吧,好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识