0

HTML5 Canvas组合图形

Posted by Alan on October 10, 2016 in HTML5&CSS3 |

在学习Canvas组合图形时看描述有些云里雾里,于是记录下实际效果来方便查看:

Tags: ,

0

响应式布局和Bootstrap

Posted by Alan on September 20, 2015 in Coding, HTML5&CSS3 |

如何实现响应式布局? CSS 3 Media Query(最简单) 原生Javascript(成本高,不推荐使用) 第三方开源框架(可以很好的支持浏览器响应式布局的设计) Media常见属性: device-width, device-height 屏幕宽高 width, height                           渲染窗口宽高 orientation                               设备方向 resolution                     […]

Tags: , ,

0

如何使用Sublime快速添加DOCTYPE等信息

Posted by Alan on August 8, 2015 in Coding, HTML5&CSS3 |

Sublime Text 常用快捷键 快捷键组合 功能 shift + cmd + p 打开命令面板 control + ` 控制台 cmd + n 新建标签 cmd + 数字 标签切换 cmd + option + 2 分成两屏 control + 数字 分屏时移动到不同的屏幕 cmd + delelte 删除光标前所有字符, 貌似是Mac快捷键 cmd + f 查找 option + cmd + f 查找替换 cmd + t 文件跳转 control + g […]

Tags: , ,

0

纯CSS打造自适应表格

Posted by Alan on July 15, 2015 in Coding, HTML5&CSS3 |

原始尺寸表格效果 代码主要运用到了@media来判断调用的样式,伪元素:before,:after来匹配相关内容,以及用content: attr(data-label)来获取自定属性中的值,缩放及手机效果,

Tags: ,

0

17 crucial web design trends for 2015

Posted by Alan on December 18, 2014 in HTML5&CSS3, 电商经验 |

全文转载一下这篇Econsultancy上的有关2015年网页设计趋势的文章,留待周末拜读 Please do not mistake me for some kind digital prognosticator, soothsayer guru, evangelist, swami, samurai or whatever risible term is currently popular in digital marketing circles. I am but one writer who has spent the last year immersed (and only occasionally floundering) in previously unchartered waters in my first 12 months of writing for […]

Tags: , ,

0

CSS3实现照片墙效果

Posted by Alan on November 16, 2014 in HTML5&CSS3 |

HTML5和CSS3已经被谈论很久了,关于W3C等既得利益体的争论这里按下不表,下面通过简单的CSS3代码来实现一个酷炫的照片墙效果,可以用于制作家庭的生活照相册,也可以在追女孩子时适时小秀一把:) 整个代码中用到的主要有CSS3中的transform中的旋转(rotate),过渡(transition),阴影(box-shadow),同时通过position来进行位置的定位,z-index来控制显示的层次。 相关示例代码如下:

Tags: ,

0

JS实现放大镜效果

Posted by Alan on September 14, 2014 in HTML5&CSS3, 无门无派 |

电商网站中会经常出现图片的放大效果,在产品页面尤为常见,如淘宝、京东、一号店等网站都会采用悬浮鼠标在右侧出现图片放大效果。 要实现这种效果可能过JS或jQuery等代码来实现,示例效果如下(通过将鼠标悬浮在下面的图片上进行查看): 首先通过getElementById或其它方法来获取各个对象,然后通过onmouseover和onmouseout事件来显示和隐藏放大镜和右侧图片,示例代码如下: objMark.onmouseover = function(){ objFloatBox.style.display = “block”; objBigBox.style.display = “block”; } objMark.onmouseout = function(){ objFloatBox.style.display = “none”; objBigBox.style.display = “none”; } 核心代码为onmousemove事件 objMark.onmouseover = function(){ objFloatBox.style.display = “block”; objBigBox.style.display = “block”; } objMark.onmouseout = function(){ objFloatBox.style.display = “none”; objBigBox.style.display = “none”; } objMark.onmousemove =function(ev){ var _event = ev || window.event;//使用window.event解决IE兼容问题 var left = […]

Tags: , ,

0

Firebug使用相关

Posted by Alan on August 17, 2014 in HTML5&CSS3, 电商经验 |

Firebug是网页浏览器Firefox下的一款开发类插件,集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器,还开发有Firebug Lite,功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的图标,也可按下F12开启,关闭方法与开启方法相同,另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签,可通过点击调试窗口左上角的,然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签,调试窗口右上侧还有搜索窗口,能过搜索方便找到所需查看的内容。 控制台标签为JS命令行操作,显示JS错误信息、提示信息和日志信息,可在右侧窗口键入代码; HTML标签显示页面的所有HTML源代码,可能过直接修改代码的方式查看修改后的结果, 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑,而要定位到页面上相应元素的代码,可通过在相应页面元素上右击选择“使用Firebug查看元素”,也可点击小甲虫右侧的图标即“点击查看页面中的元素”图标(快捷键Ctrl+Shift+C)然后直接点击需查看的元素来定位到相对应的代码; CSS标签下可编辑页面的CSS源代码,如同对HTML的修改一样,可通过双击来对样式来进行修改,对于字体大小等数值还可以通过方向键↑和↓来进行更改,这种修改每次会调整1个单位,而按下Ctrl键加方向键每次调整0.1个单位,按下Shift键加方向键每次调整10个单位; 脚本标签中显示页面的脚本,也可在该标签对脚本进行调试; DOM标签显示所有的页面对象和DOM属性; 网络标签显示页面各元素的下载情况和所花费的时间,以及HTTP请求和头信息; Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。 JavaScript控制台 Firebug的控制台可以很方便地对JavaScript代码进行调试,控制台内置了很多命令方便对JS进行调试,如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日 console.log(“%d年%d月%d日”,2014,8,31); 其中的%d称为占位符,代表数字,此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量,如console.log(i),除日志输出外还有信息输出console.info(),debug输出console.debug(),警告输出console.warn(),错误输出console.error()。对输出的内容可进行分组,使用console.group()命令: console.group(“group1”); console.log(“101”); console.log(“102”); console.log(“103”); console.groupEnd(); console.group(“group2”); console.log(“201”); console.log(“202”); console.log(“203”); console.groupEnd(); 控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下: console.time(“test”); for(var i=1; i<10000; i++){ } console.timeEnd(“test”); 控制台还包含其它命令,可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中,也可以在控制台右侧的多行调试框中输入并点击运行来进行查看

Tags: , , ,

0

CSS3+HTML5实现活塞运动

Posted by Alan on July 31, 2014 in HTML5&CSS3 |

Html5配合CSS3已经越来越强大,以下通过CSS3+HTML5来模拟活塞运动。 首先设置背景颜色,这里仅测试了IE,Firefox和Chrome较新的版本,使用webkit也是为了兼容Chrome考虑: background: -webkit-linear-gradient(top, coral, tomato); background: linear-gradient(to bottom, coral, tomato); 通过代码定义活塞上下移动以及臂手(连动杆)左右摆动的动画: @-webkit-keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @-webkit-keyframes arm { 0% { […]

Tags: , ,

0

HTML5绘制桌球

Posted by Alan on May 25, 2014 in HTML5&CSS3 |

桌球(又称台球 ,撞球)源自英国,是一项在国际上广泛流行的高雅的室内体育运动,是一种用球杆在台上击球,依靠计算得分确定比赛胜负的室内娱乐体育项目。 下图为通过HTML5的Canvas配合JS生成的仿桌球图片,右侧的小球采用随机函数显示不同颜色,每次刷新后将显示不同的组合颜色。 Your browser does not support the canvas element.

Tags: , , ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.