使用前面学习的知识：html,css,javascript,jquery实现电商页面，使用html搭建页面，css调节页面样式，Javascript，jquery实现动态效果，使学生具备一定的企业实战能力。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="header_box">
<p class="fl">欢迎来到天天生鲜</p>
<ul class="login_box fr">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">我的购物车</a></li>
<li><a href="#">我的订单</a></li>
</ul>
</div>
<div class="content_box">
<div class="banner centerbox">
<div class="logo fl">
<img src="images/logo.png">
</div>
<div class="search fl">
<input class="usrinput fl" type="text" placeholder="搜索">
<input id="btnsearch" class="fl" type="button" value="搜索">
</div>
<div class="cart fr">
<a href="#" class="fl">我的购物车</a>
<span class="fl">0</span>
</div>
</div>
<div class="navigationbar_box">
<div class="navigationbar centerbox">
<h1 class="allgoods fl">全部商品分类</h1>
<ul class="hmenu fl">
<li><a href="#">首页</a></li>
<li><a href="#">手机生鲜</a></li>
<li><a href="#">抽奖</a></li>
</ul>
</div>
</div>
<div class="hot centerbox">
<ul class="vmenu fl">
<li><a href="#" class="fruit">新鲜水果</a></li>
<li><a href="#" class="seafood">海鲜水产</a></li>
<li><a href="#" class="meat">牛羊猪肉</a></li>
<li><a href="#" class="egg">禽类蛋品</a></li>
<li><a href="#" class="vegetable">新鲜蔬菜</a></li>
<li><a href="#" class="frozen">速冻食品</a></li>
</ul>
<div class="gallery fl">
<ul class="sliders">
<li><a href="javascript:;"><img src="images/slide.jpg"></a></li>
<li><a href="javascript:;"><img src="images/slide02.jpg"></a></li>
<li><a href="javascript:;"><img src="images/slide03.jpg"></a></li>
<li><a href="javascript:;"><img src="images/slide04.jpg"></a></li>
</ul>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ul class="dots"></ul>
</div>
<div class="ads fl">
<img src="images/adv01.jpg" class="fl">
<img src="images/adv02.jpg" class="fl">
</div>
</div>
<div>
<div class="goodsmenu centerbox">
<h2 class="fl">新鲜水果</h2>
<ul class="submenu fl">
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="#" class="more fr">查看更多>></a>
</div>
<div class="goods centerbox">
<div class="face fl">
<img src="images/banner01.jpg">
</div>
<ul class="goodspic fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
</ul>
</div>
</div>
<div>
<div class="goodsmenu centerbox">
<h2 class="fl">新鲜水果</h2>
<ul class="submenu fl">
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="#" class="more fr">查看更多>></a>
</div>
<div class="goods centerbox">
<div class="face fl">
<img src="images/banner02.jpg">
</div>
<ul class="goodspic fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
</ul>
</div>
</div>
<div>
<div class="goodsmenu centerbox">
<h2 class="fl">新鲜水果</h2>
<ul class="submenu fl">
<li><a href="#">鲜芒</a></li>
<li><a href="#">加州提子</a></li>
<li><a href="#">亚马逊牛油果</a></li>
</ul>
<a href="#" class="more fr">查看更多>></a>
</div>
<div class="goods centerbox">
<div class="face fl">
<img src="images/banner03.jpg">
</div>
<ul class="goodspic fl">
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
<li>
<h4>草莓</h4>
<a href="#"><img src="images/goods_pic.jpg"></a>
<span>￥38.00</span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer_box centerbox">
<div class="links">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p class="copyright">CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
</body>
</html>
学院Go语言视频主页
https://edu.csdn.net/lecturer/1928
清华团队带你实战区块链开发
扫码获取海量视频及源码 QQ群：721929980