⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | 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>
<head>
<meta charset="utf-8">
<title>安踏商城</title>
<link href="style/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<div class="w top-nav">
<img class="logo" src="images/logo.gif" width="215" height="50" alt=""/>
<span><a href="#">登录</a>|<a href="#">注册</a></span>
<ul class="quick-menu clearfix">
<li class="first-item"><a href="#">我的安踏</a>|</li>
<li><a href="#">品牌官网</a>|</li>
<li class="mobile-btn"><a href="#">手机商城</a>|</li>
<li><a class="c-red" style="color:#d00;">企业团购</a>|</li>
<li>购物车(0)件</li>
</ul>
</div>
</div>
<div class="nav">
<ul class="w clearfix">
<li class="all-styles">所有商品分类</li>
<li><a href="#">首页</a></li>
<li><a href="#">跑步</a></li>
<li><a href="#">篮球</a></li>
<li><a href="#">足球</a></li>
<li><a href="#">健身</a></li>
<li><a href="#">休闲</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">儿童</a></li>
<li class="uni_logo"><img src="images/uni_logo.png" width="110" height="30" alt=""/></li>
<li class="nav-search">
<input type="text" placeholder="" autocomplete="off" value="" id="search_box" class="nav-search-input" promptvalue="" onkeydown="javascript:if( event.keyCode == 13 ) return search_goods('/search');">
<a class="nav-search-btn" id="search"></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="banner w-full">
<div class="banner-img"><img src="images/pc.jpg" alt=""/></div>
<div class="banner-tit"><a class="active" href="#">要疯篮球</a><a href="#">放肆街头</a><a href="#">新款气垫</a><a href="#">KT4定制</a></div>
</div>
<div class="series-nav">
<ul class="w">
<li class="item-1">
<img src="images/580-400-1.jpg" width="580" height="400" alt=""/>
<h3>篮球明星战靴</h3>
<p>汤普森四代|要疯系列|篮球服装</p>
</li>
<li class="item-1">
<img src="images/580-400-2.jpg" width="580" height="400" alt=""/>
<h3>跑步系列</h3>
<p>闪能科技跑鞋|夏季新款|舒适气垫|跑步服装</p>
</li>
<li class="item-2">
<img src="images/385-311-1.jpg" width="385" height="311" alt=""/>
<h3>2019夏上新</h3>
</li>
<li class="item-2">
<img src="images/385-311-2.jpg" width="385" height="311" alt=""/>
<h3>复古呈新 安踏休闲系列</h3>
</li>
<li class="item-2">
<img src="images/385-311-3.jpg" width="385" height="311" alt=""/>
<h3>时尚潮服系列</h3>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="produ-selection w">
<div class="title">
<h4>A-FLASHFOAM闪能科技</h4>
<h2>轻量化EVA高回弹复合材料，安踏自主研发，为跑者提供充足动力。</h2>
</div>
<ul class="swrap">
<li><img src="images/583-406-1.jpg" width="583" height="406" alt=""/><h3>A-JELLY弹力胶跑鞋</h3><p>良好的抗压缩变形能 力，能提供持久的运动稳定性能</p><a class="btn">立即购买</a></li>
<li><img src="images/583-406-2.jpg" width="583" height="406" alt=""/><h3>遇见未见的自己</h3><p>拥有一颗运动的心永不止步，每一步都是最美的姿态</p><a class="btn">立即购买</a></li>
</ul>
</div>
<ul class="produ-lists w">
<li>
<img src="images/1.jpg" width="288" height="288" alt=""/>
<p class="infor">春夏季潮流复古鞋运动鞋休闲鞋</p><p class="pay">￥389.00</p>
</li>
<li>
<img src="images/2.jpg" width="288" height="288" alt=""/>
<p class="infor">漫威联名款洛基跑鞋彩虹桥洛基跑鞋</p><p class="pay">￥429.00</p>
</li>
<li>
<img src="images/3.jpg" width="288" height="288" alt=""/>
<p class="infor">休闲鞋</p><p class="pay">￥299.00</p>
</li>
<li>
<img src="images/4.jpg" width="288" height="288" alt=""/>
<p class="infor">SEEED全掌气垫领航运动鞋跑步鞋</p><p class="pay">￥399.00</p>
</li>
<li>
<img src="images/5.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款SEEED全掌气垫时光NASA休闲运动鞋</p><p class="pay">￥369.00</p>
</li>
<li>
<img src="images/6.jpg" width="288" height="288" alt=""/>
<p class="infor">安踏男鞋跑步鞋2019春季新款全掌气垫黑洞NASA</p><p class="pay">￥429.00</p>
</li>
<li>
<img src="images/7.jpg" width="288" height="288" alt=""/>
<p class="infor">SEEED系列全掌气垫跑鞋男跑步鞋</p><p class="pay">￥499.00</p>
</li>
<li>
<img src="images/8.jpg" width="288" height="288" alt=""/>
<p class="infor">安踏漫威联名SEEED系列全掌气垫跑鞋女跑步鞋</p><p class="pay">￥379.00</p>
</li>
<li>
<img src="images/9.jpg" width="288" height="288" alt=""/>
<p class="infor">篮球鞋男汤普森KT3轻骑兵3代a-shock低帮运动球鞋</p><p class="pay">￥339.00</p>
</li>
<li>
<img src="images/10.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款零界漫游者气垫运动鞋休闲鞋跑鞋</p><p class="pay">￥379.00</p>
</li>
<li>
<img src="images/11.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款SEEED全掌气垫时光NASA休闲鞋跑鞋</p><p class="pay">￥369.00</p>
</li>
<li>
<img src="images/12.jpg" width="288" height="288" alt=""/>
<p class="infor">跑步鞋</p><p class="pay">￥299.00</p>
</li>
<li>
<img src="images/13.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款女子潮流复古休闲鞋老爹鞋运动鞋女</p><p class="pay">￥259.00</p>
</li>
<li>
<img src="images/14.jpg" width="288" height="288" alt=""/>
<p class="infor">篮球鞋男鞋2019春季新款实战2代高帮球鞋战靴运动鞋</p><p class="pay">￥399.00</p>
</li>
<li>
<img src="images/15.jpg" width="288" height="288" alt=""/>
<p class="infor">篮球鞋高帮UFO2代-天体战靴</p><p class="pay">￥349.00</p>
</li>
<li>
<img src="images/16.jpg" width="288" height="288" alt=""/>
<p class="infor">安踏2019新款夏季女子休闲白搭板鞋小白鞋</p><p class="pay">￥139.00</p>
</li>
<li>
<img src="images/17.jpg" width="288" height="288" alt=""/>
<p class="infor">NASA漫游者男鞋2019春季新款SEEED全掌气垫跑步</p><p class="pay">￥398.00</p>
</li>
<li>
<img src="images/18.jpg" width="288" height="288" alt=""/>
<p class="infor">男鞋跑步鞋2019春季新款SEEED全掌气垫星环跑鞋</p><p class="pay">￥299.00</p>
</li>
<li>
<img src="images/19.jpg" width="288" height="288" alt=""/>
<p class="infor">不羁运动鞋男鞋男士潮流复古老爹鞋</p><p class="pay">￥499.00</p>
</li>
<li>
<img src="images/20.jpg" width="288" height="288" alt=""/>
<p class="infor">汤普森4代战靴KT4鸳鸯新款球鞋运动鞋男</p><p class="pay">￥699.00</p>
</li>
<li>
<img src="images/21.jpg" width="288" height="288" alt=""/>
<p class="infor">男鞋2019春季新款轻便慢跑休闲鞋跑步鞋运动鞋男</p><p class="pay">￥209.00</p>
</li>
<li>
<img src="images/22.jpg" width="288" height="288" alt=""/>
<p class="infor">男鞋运动鞋2019春新款网面透气跑步鞋休闲鞋</p><p class="pay">￥169.00</p>
</li>
<li>
<img src="images/23.jpg" width="288" height="288" alt=""/>
<p class="infor">老爹鞋复古潮流休闲鞋运动鞋</p><p class="pay">￥269.00</p>
</li>
<li>
<img src="images/24.jpg" width="288" height="288" alt=""/>
<p class="infor">女鞋舞蹈鞋新款女子复古时尚休闲鞋学生潮运动鞋女</p><p class="pay">￥219.00</p>
</li>
<li>
<img src="images/25.jpg" width="288" height="288" alt=""/>
<p class="infor">板鞋男鞋春季新款潮流休闲鞋运动鞋时尚潮鞋小白鞋</p><p class="pay">￥229.00</p>
</li>
<li>
<img src="images/26.jpg" width="288" height="288" alt=""/>
<p class="infor">篮球鞋高帮要疯2代球鞋男</p><p class="pay">￥299.00</p>
</li>
<li>
<img src="images/27.jpg" width="288" height="288" alt=""/>
<p class="infor">篮球鞋UFO2代-异形高帮战靴实战球鞋</p><p class="pay">￥449.00</p>
</li>
<li>
<img src="images/28.jpg" width="288" height="288" alt=""/>
<p class="infor">低帮速决2代球鞋男运动鞋</p><p class="pay">￥249.00</p>
</li>
<li>
<img src="images/29.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春新款女子轻便跑鞋网面透气运动鞋休闲旅游鞋</p><p class="pay">￥219.00</p>
</li>
<li>
<img src="images/30.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款休闲鞋正品鞋子黑色运动鞋女</p><p class="pay">￥169.00</p>
</li>
<li>
<img src="images/31.jpg" width="288" height="288" alt=""/>
<p class="infor">新款低帮厚底经典运动休闲鞋板鞋小粉鞋小白鞋女</p><p class="pay">￥219.00</p>
</li>
<li>
<img src="images/32.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春季新款正品网面透气运动跑鞋</p><p class="pay">￥179.00</p>
</li>
<li>
<img src="images/33.jpg" width="288" height="288" alt=""/>
<p class="infor">2019新款粉鞋小白鞋春季跑鞋子女休闲鞋</p><p class="pay">￥259.00</p>
</li>
<li>
<img src="images/34.jpg" width="288" height="288" alt=""/>
<p class="infor">汤普森kt高帮球鞋耐磨减震比赛男子战靴</p><p class="pay">￥339.00</p>
</li>
<li>
<img src="images/35.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/36.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/37.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥89.00</p>
</li>
<li>
<img src="images/38.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥89.00</p>
</li>
<li>
<img src="images/39.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥89.00</p>
</li>
<li>
<img src="images/40.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥89.00</p>
</li>
<li>
<img src="images/41.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖男舒适修身纯色简约跑步运动半袖T恤</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/42.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/43.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/44.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织</p><p class="pay">￥99.00</p>
</li>
<li>
<img src="images/45.jpg" width="288" height="288" alt=""/>
<p class="infor">2019春夏新款舒适修身圆领跑步运动上衣休闲T恤</p><p class="pay">￥69.00</p>
</li>
<li>
<img src="images/46.jpg" width="288" height="288" alt=""/>
<p class="infor">2019新款夏季达人推荐款短T短袖</p><p class="pay">￥89.00</p>
</li>
<li>
<img src="images/47.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织衫</p><p class="pay">￥119.00</p>
</li>
<li>
<img src="images/48.jpg" width="288" height="288" alt=""/>
<p class="infor">短袖针织衫</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/49.jpg" width="288" height="288" alt=""/>
<p class="infor">运动短裤男休闲裤舒适透气黑色跑步运动五分裤</p><p class="pay">￥79.00</p>
</li>
<li>
<img src="images/50.jpg" width="288" height="288" alt=""/>
<p class="infor">针织五分裤</p><p class="pay">￥99.00</p>
</li>
<li>
<img src="images/51.jpg" width="288" height="288" alt=""/>
<p class="infor">针织七分裤</p><p class="pay">￥199.00</p>
</li>
</ul>
<div class="clearfix"></div>
<div class="w more"><a href="#">选购更多商品 »</a></div>
<div class="clearfix footer">
<div class="footer-1 w clearfix">
<ul class="server-list clearfix">
<li class="item-first">
<h4>用户指南</h4>
<p>新用户注册</p>
<p>购物流程</p>
<p>尺码对照表</p>
<p>支付方式</p>
<p>包装形式</p>
<p>配送方式</p>
<p>配送费用</p>
</li>
<li>
<h4>会员政策</h4>
<p>积分政策</p>
<p>会员政策</p>
<p>用户协议</p>
<p>发票制度</p>
</li>
<li>
<h4>售后服务</h4>
<p>订单查询</p>
<p>快递查询</p>
<p>退换货政策</p>
<p>退换货流程</p>
<p>退款方式</p>
</li>
<li>
<h4>联系我们</h4>
<p>企业团购</p>
<p>商务合作</p>
</li>
</ul>
<div class="custom-service">
<h4>在线咨询</h4>
<span class="tel">400-858-2020</span><br/>
<a href="javascript:;" class="server-btn">在线客服</a>
<h4>微信咨询</h4>
<a href="javascript:;" class="weixin-code"></a>
</div>
</div>
<div class="clearfix"></div>
<div class="copy">
<p class="w">
<span class="f-r"><a href="#">营业执照</a> <a href="#">开户许可证 </a><a href="#">网站地图</a><a href="#">标签</a><a href="#">友情链接</a></span>
<span>COPYRIGHT 2012-2019</span>
<span>厦门安踏电子商务有限公司</span>
<span class="fimg"><img src="images/police_black.jpg" width="33" height="34" alt=""/></span>
<span>闽ICP备11020421号</span>
</p>
</div>
</div>
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
