实用的60个CSS代码片段

1、垂直对齐


如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3Transform,可以很优雅的解决这个困惑:

1
2
3
4
5
6
7
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,
Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性

阅读全文

PS基本切图及应用

之前一直用别人切好的页面,心中很是惭愧,为不在麻烦于他人,还是重新打开很久没用过得PS,学习了一下如何切页面,顺便整理一下近期学到的PS切图的基本方法。

美工一般只提供设计稿,那么问题来了,我们如何把设计稿切成自己想要的图片呢,今天我们来简单学习一下如何切图:

阅读全文

jQuery基础之Ajax(六)

  • ajax : Asynchronous Javascript And XML (异步的JavaScriptXML

  • 创建ajax对象 var xhr = new XMLHttpRequest();

阅读全文

jQuery基础之Event(五)

  • 什么是Event

阅读全文

jQuery基础之插件(六)

  • 什么是插件
    插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合一定规范的应用程序。通过`js文件的方式引用。

阅读全文

jQuery操作DOM(三)

操作DOM

阅读全文

jQuery动画基础(四)

介绍jQuery动画

  • JavaScript语言本身不支持动画设计,必须通过改变`CSS来实现动画效果。

阅读全文

jQuery选择器及优化(二)

层级选择器:

通过DOM的嵌套关系匹配元素

阅读全文

jQuery概述(一)

  • jQuery是什么:
    • 是一个javascript代码仓库,我们称之为javascript框架。
    • 是一个快速的简洁的javascript框架,可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

阅读全文

javascript 下常用的字符串操作

charAt() 返回在指定位置的字符。

阅读全文