![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webapp教程
文章平均质量分 54
yinxiaoxin001
这个作者很懒,什么都没留下…
展开
-
黑马商城项目_导航条圆点的定位
1、绝对定位在容器底部 bottom 6px left 50%2、50%表示显示在中间位置,但是ul本身还占用一部分空间,所以需要利用marging-left:-59px 左移59像素3、清楚第二个ul中的第一个li的margin-left的属性值原创 2017-11-01 16:07:00 · 290 阅读 · 0 评论 -
黑马商城项目_商城购物车页面
单击垃圾筐、弹出黑色遮罩(弹出层),然后显示对话框,同时垃圾筐该演示动画!1、每一个垃圾筐绑定click事件/*获取所有的删除按钮*/ var deleteList = document.querySelectorAll('.deleteBox'); /*记录当前点击的是哪个按个按钮*/ var deleteBtn = null; for(var i = 0 ; i原创 2017-11-24 19:58:19 · 4474 阅读 · 0 评论 -
黑马商城项目_布局_主页、分类页、购物车页
0、样式表名称命名规则 (1)一般规则 元素名.类名称 (2)元素嵌套时的类命名规则 Section.product_box Section.product_box_tit Section.product_box_con1、主页(1)头部搜索栏 (2)轮播图 (3)导航栏 (4)商品展示 2、分类页 (1)左侧 (2)右侧原创 2017-11-27 09:02:09 · 2269 阅读 · 0 评论 -
黑马商城项目_商城分类页_右侧滑动1
1、没有采用swiper组件,而是自定义js组件itcast.iScroll 在组件中可以配置滑动的方向、可以配置滑动时最小滑动的有效距离; 2、swiper组件功能强大,可以将此组件集成到项目中。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <!-- meta:vp--> <meta name原创 2017-11-23 10:50:01 · 484 阅读 · 0 评论 -
黑马商城项目_商城分类页_右侧滑动2
自定义itcast.iScrollif(!window.itcast){ window.itcast = {};}itcast.iScroll = function(args){ /*调用的时候没有初始化的话就是初始化一次*/ if(!(this instanceof arguments.callee)) return new arguments.callee(args原创 2017-11-23 10:53:15 · 527 阅读 · 0 评论 -
黑马商城项目_商城分类页_左侧滑动
1、左侧容器绑定了自定义tap事件的工作原理:容器绑定touchStart touchMove touchEnd在满足一定的条件下,执行回调方法,来模拟tap事件 2、容器绑定了事件,容器中的所有子元素都可以触发此事件 3、childBox绑定touchstart 事件,在模拟tap事件时,childBox又绑定了touchstart事件,不冲突,发生touchstart事件时,会先后执行绑定的原创 2017-11-23 10:11:19 · 507 阅读 · 0 评论 -
黑马商城项目_商城主页底部导航
1、html格式2、css样式原创 2017-11-18 16:51:28 · 866 阅读 · 1 评论 -
黑马商城项目_商品展示样式设计
1、公共部分设计 样式选择器,两个类的名称写在一起,相当于并且的关系。比如: .product_box_tit.no_border之间没有空格,有空格表示后代关系。.hm_product{ padding: 0 0.05rem;}.hm_product > .product_box{ width: 100%; background: #原创 2017-11-18 16:41:54 · 1010 阅读 · 0 评论 -
黑马商城项目_商品展示结构设计
1、商品展示包含:秒杀和普通商品展示 2、抽取公共部分:头和内容 (1)秒杀商品展示区 (2)普通商品展示区 (3)整体原创 2017-11-18 16:18:10 · 1865 阅读 · 0 评论 -
黑马商城项目_导航部分
1、html结构<nav> <ul class="clearfix"> <li> <a href="#"> <img src="images/nav0.png" alt=""/>原创 2017-11-18 10:20:25 · 775 阅读 · 1 评论 -
黑马商城项目_banner样式设计
1、banner容器:流式百分百布局.hm_banner{ width: 100%; position: relative; overflow: hidden;}2、ul样式,初始状态下,从前8图片,移动到前1图片位置ul容器的宽度设置为1000%.hm_banner > ul:first-child{ width: 1000%;原创 2017-11-18 11:01:25 · 336 阅读 · 0 评论 -
黑马商城项目_制作导航条的圆点
原理:1、将ul默认的图标清除2、li设置为空3、li样式表的宽高设置为方块 6*64、border-radius样式属性设置为35、设置li的背景为#fff ,表示当前位置原创 2017-11-01 15:53:32 · 365 阅读 · 0 评论 -
黑马商城项目_banner动画效果
1、图片8在最前面的作用:仅仅是充当数量。便于计算 共计8张图片 排列顺序: 8 1 2 3 4 5 6 7 8 1 定时器:初始i值为1,循环开始i为2显示第2张、i为3显示第3张……i为8显示第8张、i为9显示第1张 i为9触发“transitionEnd”事件:清楚动画将banner移动到显示前面第1张图片位置。原创 2017-10-31 08:48:38 · 572 阅读 · 0 评论 -
黑马商城项目_商城主页_zepto应用
这里写链接内容1、 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 2、插件 3、优点 (1)zepto的选择器功能强大 (2)zepto提供animate方法直接设置动画参数 (3)zepto提供css方法直接样式 (4)zepto封装了手指滑动swipe和触碰tap事件原创 2017-11-24 20:35:24 · 1526 阅读 · 1 评论