实战电商页面1：静态布局

使用前面学习的知识：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="data: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="data:images/slide.jpg"></a></li><li><a href="javascript:;"><img src="data:images/slide02.jpg"></a></li><li><a href="javascript:;"><img src="data:images/slide03.jpg"></a></li><li><a href="javascript:;"><img src="data: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="data:images/adv01.jpg" class="fl"><img src="data: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">查看更多&gt&gt</a></div><div class="goods centerbox"><div class="face fl"><img src="data:images/banner01.jpg"></div><ul class="goodspic fl"><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data: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">查看更多&gt&gt</a></div><div class="goods centerbox"><div class="face fl"><img src="data:images/banner02.jpg"></div><ul class="goodspic fl"><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data: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">查看更多&gt&gt</a></div><div class="goods centerbox"><div class="face fl"><img src="data:images/banner03.jpg"></div><ul class="goodspic fl"><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data:images/goods_pic.jpg"></a><span>￥38.00</span></li><li><h4>草莓</h4><a href="#"><img src="data: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

实战电商页面1：静态布局相关推荐

3.1 Web前端：实战电商页面1：静态布局
使用前面学习的知识:html,css,javascript,jquery实现电商页面,使用html搭建页面,css调节页面样式,Javascript,jquery实现动态效果,使学生具备一定的企业实战 ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理商品管理 1.新建goods_cate子分支并上传码云 2.商品管理-商品分类 1.新建文件并配置路由 2.页面布局 3.获取分类列表数据 4.将数据渲染在树形表格控件 ...
PSD分层模板|解析垂直化内容电商页面设计
从首页第一视觉停留开始首屏是第一视觉第一块信息展示区域,适合设计成时尚和引领当下热点潮流或者产品摄影图等视觉冲击力较强的图片,和符合用户知觉的文案,吸引用户的注意力. 时尚美女夏季护肤产品促销电商页 ...
web淘宝电商页面搭建
web淘宝电商页面搭建点击此处下载完整代码图片效果展示首屏内容次屏内容整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件.
实战电商后端系统（三）—— 以vue-element-admin为基础的前端项目对接后端接口
文章目录前言正文 1. 项目初始化 2. 精简项目 3. 替换mock接口,对接后端接口 3.1 修改/src/api/user.js 3.2 修改项目中请求方式 4. 效果展示参考相关文章 ...
JS任务机制 - springboot实战电商项目mall4j
springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j) java商城系统源码 1.介绍工作一段时间了,今天在这总结一下浏览器执行JS任务机 ...
html+css京东电商页面
京东电商页面开始的准备工作开始写代码 head的内容 body的内容 hedaer头部快速导航栏快速导航底下的一层二维码部分左侧logo部分搜索框的制作购物车以及关键字开始的准备工作 ...
美工设计灵感|常见的电商页面如何设计？
设计师要时刻带着脑子去接收需求,分析需求.直到最后的完成需求.思考先行,是做需求的第一步.就是你要跟你的需求方明确要做的是什么活动?面向用户是哪部分人群?等一些基础性的需求. 常见的电商页面如何设计? ...

实战电商页面1：静态布局

实战电商页面1：静态布局相关推荐

最新文章

热门文章