-
web前端期末大作业 HTML+CSS+JavaScript仿安踏
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业，Web大学生网页-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（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.00p> li> <li> <img src="images/2.jpg" width="288" height="288" alt=""/> <p class="infor">漫威联名款洛基跑鞋彩虹桥洛基跑鞋p><p class="pay">￥429.00p> li> <li> <img src="images/3.jpg" width="288" height="288" alt=""/> <p class="infor">休闲鞋p><p class="pay">￥299.00p> li> <li> <img src="images/4.jpg" width="288" height="288" alt=""/> <p class="infor">SEEED全掌气垫领航运动鞋跑步鞋p><p class="pay">￥399.00p> li> <li> <img src="images/5.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款SEEED全掌气垫时光NASA休闲运动鞋p><p class="pay">￥369.00p> li> <li> <img src="images/6.jpg" width="288" height="288" alt=""/> <p class="infor">安踏男鞋跑步鞋2019春季新款全掌气垫黑洞NASAp><p class="pay">￥429.00p> li> <li> <img src="images/7.jpg" width="288" height="288" alt=""/> <p class="infor">SEEED系列全掌气垫跑鞋男跑步鞋p><p class="pay">￥499.00p> li> <li> <img src="images/8.jpg" width="288" height="288" alt=""/> <p class="infor">安踏漫威联名SEEED系列全掌气垫跑鞋女跑步鞋p><p class="pay">￥379.00p> li> <li> <img src="images/9.jpg" width="288" height="288" alt=""/> <p class="infor">篮球鞋男汤普森KT3轻骑兵3代a-shock低帮运动球鞋p><p class="pay">￥339.00p> li> <li> <img src="images/10.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款零界漫游者气垫运动鞋休闲鞋跑鞋p><p class="pay">￥379.00p> li> <li> <img src="images/11.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款SEEED全掌气垫时光NASA休闲鞋跑鞋p><p class="pay">￥369.00p> li> <li> <img src="images/12.jpg" width="288" height="288" alt=""/> <p class="infor">跑步鞋p><p class="pay">￥299.00p> li> <li> <img src="images/13.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款女子潮流复古休闲鞋老爹鞋运动鞋女p><p class="pay">￥259.00p> li> <li> <img src="images/14.jpg" width="288" height="288" alt=""/> <p class="infor">篮球鞋男鞋2019春季新款实战2代高帮球鞋战靴运动鞋p><p class="pay">￥399.00p> li> <li> <img src="images/15.jpg" width="288" height="288" alt=""/> <p class="infor">篮球鞋高帮UFO2代-天体战靴p><p class="pay">￥349.00p> li> <li> <img src="images/16.jpg" width="288" height="288" alt=""/> <p class="infor">安踏2019新款夏季女子休闲白搭板鞋小白鞋p><p class="pay">￥139.00p> li> <li> <img src="images/17.jpg" width="288" height="288" alt=""/> <p class="infor">NASA漫游者男鞋2019春季新款SEEED全掌气垫跑步p><p class="pay">￥398.00p> li> <li> <img src="images/18.jpg" width="288" height="288" alt=""/> <p class="infor">男鞋跑步鞋2019春季新款SEEED全掌气垫星环跑鞋p><p class="pay">￥299.00p> li> <li> <img src="images/19.jpg" width="288" height="288" alt=""/> <p class="infor">不羁运动鞋男鞋男士潮流复古老爹鞋p><p class="pay">￥499.00p> li> <li> <img src="images/20.jpg" width="288" height="288" alt=""/> <p class="infor">汤普森4代战靴KT4鸳鸯新款球鞋运动鞋男p><p class="pay">￥699.00p> li> <li> <img src="images/21.jpg" width="288" height="288" alt=""/> <p class="infor">男鞋2019春季新款轻便慢跑休闲鞋跑步鞋运动鞋男p><p class="pay">￥209.00p> li> <li> <img src="images/22.jpg" width="288" height="288" alt=""/> <p class="infor">男鞋运动鞋2019春新款网面透气跑步鞋休闲鞋p><p class="pay">￥169.00p> li> <li> <img src="images/23.jpg" width="288" height="288" alt=""/> <p class="infor">老爹鞋复古潮流休闲鞋运动鞋p><p class="pay">￥269.00p> li> <li> <img src="images/24.jpg" width="288" height="288" alt=""/> <p class="infor">女鞋舞蹈鞋新款女子复古时尚休闲鞋学生潮运动鞋女p><p class="pay">￥219.00p> li> <li> <img src="images/25.jpg" width="288" height="288" alt=""/> <p class="infor">板鞋男鞋春季新款潮流休闲鞋运动鞋时尚潮鞋小白鞋p><p class="pay">￥229.00p> li> <li> <img src="images/26.jpg" width="288" height="288" alt=""/> <p class="infor">篮球鞋高帮要疯2代球鞋男p><p class="pay">￥299.00p> li> <li> <img src="images/27.jpg" width="288" height="288" alt=""/> <p class="infor">篮球鞋UFO2代-异形高帮战靴实战球鞋p><p class="pay">￥449.00p> li> <li> <img src="images/28.jpg" width="288" height="288" alt=""/> <p class="infor">低帮速决2代球鞋男运动鞋p><p class="pay">￥249.00p> li> <li> <img src="images/29.jpg" width="288" height="288" alt=""/> <p class="infor">2019春新款女子轻便跑鞋网面透气运动鞋休闲旅游鞋p><p class="pay">￥219.00p> li> <li> <img src="images/30.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款休闲鞋正品鞋子黑色运动鞋女p><p class="pay">￥169.00p> li> <li> <img src="images/31.jpg" width="288" height="288" alt=""/> <p class="infor">新款低帮厚底经典运动休闲鞋板鞋小粉鞋小白鞋女p><p class="pay">￥219.00p> li> <li> <img src="images/32.jpg" width="288" height="288" alt=""/> <p class="infor">2019春季新款正品网面透气运动跑鞋p><p class="pay">￥179.00p> li> <li> <img src="images/33.jpg" width="288" height="288" alt=""/> <p class="infor">2019新款粉鞋小白鞋春季跑鞋子女休闲鞋p><p class="pay">￥259.00p> li> <li> <img src="images/34.jpg" width="288" height="288" alt=""/> <p class="infor">汤普森kt高帮球鞋耐磨减震比赛男子战靴p><p class="pay">￥339.00p> li> <li> <img src="images/35.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥79.00p> li> <li> <img src="images/36.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥79.00p> li> <li> <img src="images/37.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥89.00p> li> <li> <img src="images/38.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥89.00p> li> <li> <img src="images/39.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥89.00p> li> <li> <img src="images/40.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥89.00p> li> <li> <img src="images/41.jpg" width="288" height="288" alt=""/> <p class="infor">短袖男舒适修身纯色简约跑步运动半袖T恤p><p class="pay">￥79.00p> li> <li> <img src="images/42.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥79.00p> li> <li> <img src="images/43.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥79.00p> li> <li> <img src="images/44.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织p><p class="pay">￥99.00p> li> <li> <img src="images/45.jpg" width="288" height="288" alt=""/> <p class="infor">2019春夏新款舒适修身圆领跑步运动上衣休闲T恤p><p class="pay">￥69.00p> li> <li> <img src="images/46.jpg" width="288" height="288" alt=""/> <p class="infor">2019新款夏季达人推荐款短T短袖p><p class="pay">￥89.00p> li> <li> <img src="images/47.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织衫p><p class="pay">￥119.00p> li> <li> <img src="images/48.jpg" width="288" height="288" alt=""/> <p class="infor">短袖针织衫p><p class="pay">￥79.00p> li> <li> <img src="images/49.jpg" width="288" height="288" alt=""/> <p class="infor">运动短裤男休闲裤舒适透气黑色跑步运动五分裤p><p class="pay">￥79.00p> li> <li> <img src="images/50.jpg" width="288" height="288" alt=""/> <p class="infor">针织五分裤p><p class="pay">￥99.00p> li> <li> <img src="images/51.jpg" width="288" height="288" alt=""/> <p class="infor">针织七分裤p><p class="pay">￥199.00p> 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> -