- 浏览: 17295 次
文章列表
这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作,它代码简单,效果非常的炫酷。
使用一个<div>元素作为该loading动画的容器,里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。
<div class="loader">
<div class="loading-1"></div>
<div class="loading-2& ...
hmtl 中div宽度不定时如何居中
- 博客分类:
- web
传统的div居中方式margin: 0 auto;在div是定宽的时候很好用,但是当div的宽度不定,且需要将div块居中时,传统的margin方法就不好用了。下面就是一种div不定宽时的居中方式。
不定宽居中方式:
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children& ...
幻灯片式的图片点击切换
- 博客分类:
- web
这是一款非常酷的纯css3响应式背景视觉差幻灯片插件。插件中使用radio按钮和兄弟选择器来控制幻灯片的切换。插件中使用了两个backgrounds:背景和前景。通过改变背景的background position来使幻灯片产生背景视觉差效果。
HTML
通过兄弟选择器来连接radio按钮和class为sp-content的div。这需要将radio按钮和sp-content放在dom的同一层上。当点击radio按钮时,背景颜色和背景位置将改变。sp-parallax-bg是背景图片(那张世界地图),sp-slider中放的是幻灯片图片。
<div class="sp-sl ...
已经上班一个月零十一天了,也毕业两个月零十天了,突然想起来自己还有博客没写,在工作中遇到了很多问题,也不是不能解决,但是接触了很多新的功能和想法,我觉得我应该把一些东西记录下来,不止是代码,也许是成长的痕迹吧。加油!
图片轮播的html代码
<div id="banner">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
...
一些关于JS性能的一些优化的小技巧:
1.关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推 荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符。
2.如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。
3.局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成 ...
标签:
MVC是一种设计模式,它将应用划分为3个部分:数据(模型)、展现层(视图)和用户交互(控制器)。其中:
M - MODEL(模型)
V - VIEW(视图)
C - CONTROLLER(控制器)
一个事件的发生是这样的过程:
1. 用户和应用 ...
手机页面自适应问题的解决方法(转)
- 博客分类:
- web
其实主要就是改掉HTML页面声明:
在网页中加入以下代码,就可以正常显示了:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
解释:
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
...
常见浏览器兼容问题(转载)
- 博客分类:
- web
浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:
CSS里加一行
1
*{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点 ...
主流浏览器之间的差异:
谷歌浏览器Chrome支持自定义计划处理功能,但却不支持自定义内容处理功能;火狐浏览器不支持某些推出时间较晚的输入字段类型,例如时间、月、或者周,谷歌Chrome 、Opera以及Safari都能支持媒体扩展内容,火狐与IE不幸。Safari不提供输入字段来收集时间或者颜色的选项,也不支持各类标准菜单元素,Safari能通过JavaScript实现对视频以及音频轨道的控制能力。
页面架构和布局:
网页架构指的是上下型,左右型,布局是指网页内容的板式。
当有多张图片图片需要排在一行时,通常使用float:left来实现,这样,浏览器就存在兼容性问题,导致图片与后面的内容存在 ...
H4和H5 的区别:
h4的内容标签级别相同,无法区分各部分内容,h5中的内容标签互相独立,级别不同,搜索引擎以及统计软件等均可快速识别各部分内容,并且提供了地理信息的应用接口。
CSS 3的新特性:
允许队每个元素进行色彩以及透明度的设置,圆角功能,渐变,防止字符串过长溢出,多重背景以及用图片来作为元素边框。
Node.js:
Node.js就是运行在服务器端的Javascript Node.js 是一个基于Chrome Javascript运行时建立的一个平台。Node.js是一个事件驱动I/O服务器Javascript环境,基于Google的V8引擎,V8引擎执行Javascript的 ...
时光易逝,难倒回,终究还是毕业了,有太多的回忆,太多的感慨,总觉得时间过得很快,四年里我还有好多事没做,我喜欢银川蓝蓝的天空,毕业那天我一直在抬头望着天,想多看它一眼,想记住银川的样子,不想让自己的眼泪流下来。
看着同学们一个个哭成泪人,我却告诉自己不能哭,要笑着离开,我们满怀希望来到银川,要留下自己最完美的一面去离开。坐上出租车,挥挥手,告别的不只是自己的同学,还有这座城市,这段青春的记忆,从毕业的那一刻我们就开启了一段全新的旅程,我们要用自己的能力去勇敢的踏上社会的一角,去征服属于自己的世界。
我想,希望我的朋友们能在开心的时候开怀大笑,在不开心的时候能 ...
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
att ...
Javascript 数组循环遍历 forEach
数组循环变量,首先就是for(var i =0; i< array.length;i++){}这样的方式了,除此之外,也可以使用较为简便的forEach方式。
语法:array.forEach(function (value){
})
其中 array为一个数组对象
value为参数,即为for循环中的array[i]。
例如:
var input=[1,2,3,4,4];
var object = {};
for(var i=0;i<input.length;i++){
...
GitHub是一个分布式版本控制/软件配置管理软件。
GitHub上传文件流程为:
1、找到自己的文件位置。
2、git add .
git add .是将当前目录下的所有修改加入到git索引中。加入到Git的索引中就表示记入了版本历史中,这也是提交之前所需要执行的一步。
3、git commit -m '解释文档'
git commit是提交当前工作空间的修改内容,如果要附加修改内容的标题要使用参数-m
4、git push
git push是将本地的commit的代码更新到远程版本库中,完成远程代码的更新。
5、输入自己Git名字。
6、输入Git 密码 ...
JSON名称/值对
JSON数据的书写格式是:名称/值对。
名称/值对 包括字段名称(在双引号中),后面写一个冒号,然后是值
例如:"firstName" : "John"
JSON对象
JSON对象在花括号中写,对象可以包含多个名称/值对。例如:
{"firstName" : "John","lastName":"Doe"}
JSON数组 在方括号中写,数组可以包含多个对象:
{
"employees":[{"firstName" ...