• CSS 选择器参考手册

    CSS 选择器参考手册

    CSS3 选择器 <script> $(document).ready(function(){ $("botton").click(function(){ //jQuery 元素选择器 $(this).hide(); $("p").hide(); $("#test").hide();...

    CSS学习 8个月前 417 0
  • jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式

    class属性修改  类属性即class属性,规定类名.  用类选择器规定样式的时候,需要为元素指定类名,即class属性的值.  注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔.  具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp   用jQuery进行类名修改既可以用attr(...

  • css常用效果总结

    css常用效果总结

    css有不少常用的效果,你在平时浏览网站的时候可能会看到,但是真的要自己写的时候,有时候会突然忘记,今天稍微对那些常见的效果做一下小结。1、每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能。代码如下:html {    filter: grayscale(100%);//IE浏览器   -webkit...

    CSS学习 3天前 7 0
  • 给网页图标字体 Font Awesome 添加动画效果

    给网页图标字体 Font Awesome 添加动画效果

    在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看《30个免费网页图标字体以及使用方法》一文,其中Font Awesome有较多用户使用。今天我们主要向大家介绍一个可以上Font Awesome动起来的CSS文件,现在交互越来越重视,给图标加上对应的动画可以增加一些用户体验,是很不错的。演示在线演示&下载地址:DEMO从演示文件中可以看出目前有10种CSS动...

    CSS学习 4小时前 2 0 图标字体动画
  • CSS3圆圈动画放大缩小循环动画效果

    CSS3圆圈动画放大缩小循环动画效果

     今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图!1、简单放大缩小循环!<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu...

    CSS学习 9小时前 5 0 循环
  • CSS 横向菜单允许滚动(滑动)并隐藏滚动条(移动端)

    CSS 横向菜单允许滚动(滑动)并隐藏滚动条(移动端)

     今天写一个模板的时候,在手机端需要横线罗列菜单,为减少占用空间,采用了横向滚动(滑动)效果,并且隐藏滚动条!最后写的CSS还是不支持firefox,在firefox的浏览器上滚动条隐藏不掉。。。不管了,因为这个横向滚动是运用在手机端,不会出现firefox的问题!相关:1、纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)2、jQuery插件 - 滚动条样式-jQuery custom content scro...

    CSS学习 1天前 5 0 滚动条
  • CSS垂直翻转/水平翻转学习

    CSS垂直翻转/水平翻转学习

    一、CSS下兼容性的元素水平/垂直翻转实现随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下:/*水平翻转*/.flipx {     -moz-transform:scaleX(-1);     -webkit-transform:scaleX(-1); &nb...

  • CSS3 text-shadow 属性

    CSS3 text-shadow 属性

     基础的文本阴影效果: text-shadow:2px 2px 2px #fff X轴,Y轴,模糊程度(不可是负值),阴影颜色 效果一: text-shadow: 0 0 20px red; 效果二: text-shadow: 0 0 5px #fff, 0 0...

  • css table布局大法,解决你大部分居中、多列等高、左右布局的问题

    css table布局大法,解决你大部分居中、多列等高、左右布局的问题

    看了这篇文章,你可以了解到以下布局方法:table-cell定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最近开发遇到一些布局上的问题,由于不确定因素比较多,比如不定宽高、单行多行的情况需要显示的样式基本相同。这样的情况会比较复杂,后来找到display:table-cell这个布局神器,这些问题也就不...

  • 纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)

    纯CSS3 自定义滚动条样式设置方法大全(不兼容firefox)

     刚写过一篇使用jQuery滚动条插件jQuery custom content scroller,兼容所有浏览器,但缺点也非常明显,就是过大了,高达100K左右的JS+css,非常不友好。本文分享的是纯CSS方法,但缺点也明显,不兼容firefox,看过很多兼容firefox的方法,但因为firefox的更新很多都失效了,以后遇到再重点写下firefox的滚动条样式。/*滚动条*/ .widget_kuaixun ...

    CSS学习 2周前 20 0 滚动条
  • CSS实现多列等高布局实现方式

    CSS实现多列等高布局实现方式

    何为多列等高布局?如下图这样点击增加一侧文字,另一侧背景也增加。html代码:<div id="container">     <div class="left">haorooms多列等高布局左</div>      <div cla...

    CSS学习 3周前 30 0 等高布局
  • 案例:CSS3 菜单线性渐变(linear-gradient)

    案例:CSS3 菜单线性渐变(linear-gradient)

    今天重写模板的时候需要用到这个效果,线性渐变,属于CSS3 linear-gradient写法!之前已经写过一篇关于:CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)案例HTML代码:<div class="box">  <div class="bg"></div>  <div...

  • 手机浏览器(移动端)去除onclick点击事件后文字出现的背景颜色

    手机浏览器(移动端)去除onclick点击事件后文字出现的背景颜色

    移动端开发的一个很大的好处就是可以不管讨厌的IE浏览器的兼容性,只需要页面在火狐等一些高级浏览器中正常显示就行。最近在写一些移动端的页面,刚好在今天遇到了这么一个神奇的css特性。那就是tap-highlight-color这个特效是实现在移动端点击某个地方的时候,比如说按钮或者超链接的时候,系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉,,这个时候就要用到tap...