课程笔记
课程/Html5/前端开发
炫丽的倒计时效果Canvas绘图与动画基础
介绍
章节
问答
笔记
慕姐8207076
2020-01-14
时钟效果,改一下逻辑
截图
1赞 · 0采集
qq__1939
2016-10-10
修改为时钟效果
截图
1赞 · 2采集
203
2016-06-24
改为时间计时器
截图
0赞 · 0采集
Weboey
2016-06-08
.title_step p{ margin-top: 20px; color: red; } .title_step a{ display: block; float: right; font-size: 10px; margin: 30px 10px 0 0; } /*右边手机信息 : 1,选择版本 */ .J_stepList{ } .J_stepItem{ float: left; width: 265px; height: 50px; line-height: 50px; text-align: center; margin: 1px 16px 15px 0px; border: 1px solid #e3e3e3; } .J_stepItem button:focus,.next_step button:focus{ outline: 1px solid red; } .banben_step p,.color_step p{ font-size: 18px; } .banben_step{ } /*右边手机信息 : 2,选择颜色 */ .color_step{ } /*右边手机信息 : 3,结算下一步 */ .next_step span{ color: #9b9b9b; display: block; font-size: 10px; } .next_step button{ margin: 30px 0; background-color: #fff; border: 1px solid #e3e3e3; color: #9b9b9b; width: 178px; height: 48px; }
0赞 · 0采集
Weboey
2016-06-08
/*购买结算页样式文件*/ /* 头部导航 */ .buynow_nav{ padding: 10px 0; } .buynow_nav ul li{ width: 12.5%; float: left; height: 76px; line-height: 76px; margin: 0 0 -1px; text-align: center; font-size: 14px; border-bottom: 1px solid #dfdfdf; cursor: pointer; } .buynow_nav ul li a{ display: block; color: #333; outline: none; } .buynow_nav .active { border-bottom-color: #333; } /*左边手机图片信息*/ .phone_img{ width: 50%; height: 600px; float: left; _display: inline; margin: 50px 0 0 0px; overflow: auto; } /*右边手机信息*/ .phone_info{ width: 45%; margin: 50px 0 0 55px; } /*右边手机信息 : tiile */ .title_step{ height: 60px; margin-bottom: 55px; border-bottom: 1px solid #dfdfdf; } .pro_title{ margin: 0; font-size: 30px; line-height: 56px; font-weight: normal; } .pro_price{ margin-left: 10px; font-size: 28px; color: #ff6700; }
0赞 · 0采集
Weboey
2016-06-08
<div class="color_step"> <p>2. 选择颜色</p> <ul class="step-list clearfix J_stepList"> <li class="J_stepItem">经典金色</li> <li class="J_stepItem">经典银白</li> <li class="J_stepItem">经典深灰</li> </ul> </div> <div class="next_step"> <p>您选择了以下产品</p> <span>红米手机3 全网通 3GB内存+32GB容量 指纹识别</span> <button class="btn btn-group-lg">下一步</button> </div> </div> </div> </div>
0赞 · 0采集
Weboey
2016-06-08
<div class="buynow_bd clearfix"> <div class="phone_img fl"> </div> <div class="phone_info fr"> <div class="title_step"> <span class="pro_title">购买红米手机3 </span> <span class="pro_price">699元起</span> <a href="">深入了解本产品></a> <p>温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</p> </div> <div class="banben_step"> <p>1.选择版本</p> <ul class="step-list clearfix J_stepList"> <li class="J_stepItem">全网通 2GB内存+16GB容量</li> <li class="J_stepItem"> 全网通 3GB内存+32GB容量 指纹识别</li> </ul> </div>
0赞 · 0采集
Weboey
2016-06-08
<!--<div ng-include="'view/common/header.html?buyNow=1'"></div>--> <div xm-include src="view/common/header.html"></div> <div class="container"> <div class="buynow_nav clearfix"> <ul> <li><a href="">红米Note3</a></li> <li><a href="">红米手机3</a></li> <li><a href="">小米手机5</a></li> <li><a href="">小米Max</a></li> <li><a href="">小米Note</a></li> <li><a href="">小米手机4c</a></li> <li><a href="">小米手机4</a></li> <li><a href="">对比手机</a></li> </ul> </div>
0赞 · 0采集
数据加载中...