3.1 Web前端：实战电商页面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

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

web淘宝电商页面搭建
web淘宝电商页面搭建点击此处下载完整代码图片效果展示首屏内容次屏内容整体代码并不包含JavaScript部分,因此页面为静态页面,但代码包含了淘宝网的鼠标触发事件.
实战电商页面1：静态布局
使用前面学习的知识:html,css,javascript,jquery实现电商页面,使用html搭建页面,css调节页面样式,Javascript,jquery实现动态效果,使学生具备一定的企业实战 ...
WEB前端实战——制作登录页面
参考视频:https://ke.qq.com/course/320021 代码 <!DOCTYPE html> <html lang="en"> <h ...
实战电商后端系统（三）—— 以vue-element-admin为基础的前端项目对接后端接口
文章目录前言正文 1. 项目初始化 2. 精简项目 3. 替换mock接口,对接后端接口 3.1 修改/src/api/user.js 3.2 修改项目中请求方式 4. 效果展示参考相关文章 ...
educoder太原理工web程序设计——移动端电商页面制作
第1关:移动端电商页面制作任务描述本关任务:用overflow属性实现移动端电商界面. <!doctype html> <html> <head> <me ...
《Spark SQL大数据实例开发》9.2 综合案例实战——电商网站搜索排名统计
<Spark SQL大数据实例开发>9.2 综合案例实战--电商网站搜索排名统计 9.2.1 案例概述本节演示一个网站搜索综合案例:以京东为例,用户登录京东网站,在搜索栏中输入搜 ...
JS任务机制 - springboot实战电商项目mall4j
springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j) java商城系统源码 1.介绍工作一段时间了,今天在这总结一下浏览器执行JS任务机 ...
电商软件性能测试,实战 | 电商业务的性能测试(一): 必备基础知识
原标题:实战 | 电商业务的性能测试(一): 必备基础知识 1. 测试步骤及模型分析 1.1 测试步骤总览需求分析与测试设计(性能需求目标+业务模型拆解) 测试数据准备和构造(基于模型的数据准备) ...
Vue实战电商系统-五商品管理
Vue实战电商系统-五商品管理商品管理 1.新建goods_cate子分支并上传码云 2.商品管理-商品分类 1.新建文件并配置路由 2.页面布局 3.获取分类列表数据 4.将数据渲染在树形表格控件 ...

3.1 Web前端：实战电商页面1：静态布局

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

最新文章

热门文章