• CSS 选择器参考手册

    CSS 选择器参考手册

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

    CSS学习 11个月前 500 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学习 2个月前 118 0
  • 纯CSS实现自适应浏览器宽度的正方形

    纯CSS实现自适应浏览器宽度的正方形

    JavaScript实现自适应浏览器宽度,可以监听onresize事件。纯CSS实现自适应浏览器宽度的正方形有以下三种方法:1、方案一:CSS3 vw 单位CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视...

    CSS学习 2周前 62 0 正方形
  • 纯CSS写三角形,自适应不同宽度

    纯CSS写三角形,自适应不同宽度

    今天在写一个定制模板的时候,遇到一个全屏三角形做的特效,需要用到自适应,在不同分辨率下都三角形都能自适应居中!看图:因为这个zblog模板需要自定义配色,所以这个三角形必须使用css制作,不能使用背景图片,当浏览器缩小的时候,三角形居中不变!HTML:<div class="triangle"><div class="box"></div>&...

    CSS学习 4周前 78 1 三角形
  • display: table-cell 无法使用 margin/ padding 的解法

    display: table-cell 无法使用 margin/ padding 的解法

    之前发过一篇,用div+css替代table的文章,因为div+css实在好用。已实际用过display: table的朋友,当你们在使用的时候,也许会碰到「间距调整」的问题,例如要在每一个table-cell裡头设定margin等间距调整,却发现修改无效。假设你碰过这种状况,不妨参考一下我推荐的解法。话不多说,先上个范例!我使用图片+图说当作范例,例子包含:正常状况下,图片紧密排列使用margin调整的结果将宽度写死的结果使用bord...

  • 从table转而使用div+css

    从table转而使用div+css

    一般来讲,table打好语法就可以呈现效果了,而且语法很简单,就单纯的table、tr、td,这三个语法就可以画出表格,在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮,就直接在语法内加上width、color等等的属性值,效果很容易就达到了,可是这样会让程式码杂乱。对于搜寻引擎来讲,他们抓网站内容通常不会一次抓完,会先抓到一定的网页大小,之后再来,如果你把样式调整的程式码都放进去,很快的,搜寻引擎可能光收录你的表格样式,还没抓到重...

    CSS学习 4周前 78 0 table
  • 纯CSS 画梯形

    纯CSS 画梯形

    梯形制作过程中,涉及到border-left /right    transparent(背景透明) 还需要图形的宽度代码如下:<div id="oricl"></div> <div id="oricl1"></div>#oricl{     border-botto...

    CSS学习 1个月前 122 1 梯形
  • 超大图居中的方法,绝对定位与相对定位使图片居中方法!

    超大图居中的方法,绝对定位与相对定位使图片居中方法!

    在网页设计中,常常会遇到大图片需要居中,但又不能把图片做为背景居中。 方法/步骤 使用绝对定位html代码css代码 .wrap{width:100%;overflow:hidden;}.banner{width:1920px;margin-left:-960px;left:50%;position:relative;}效果使用相对定位html代码<div class="bannerbox"...

    CSS学习 2个月前 135 0 图片居中
  • 图片在DIV中居中显示的方法

    图片在DIV中居中显示的方法

    问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景)关于该问题的解决方法如下:方法一:思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。结构如下:<div><img src="images/tt.gif" width="150" height="100" /></div>...

    CSS学习 2个月前 127 0 图片居中
  • display: list-item什么意思?display:block/inline/inline-block/inline-table/list-item的区别

    display: list-item什么意思?display:block/inline/inline-block/inline-table/list-item的区别

    display:list-itemdisplay:list-item为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点,而display:block则不会出现黑点。display:block/inline/inline-block/inline-table/list-item区别大家都知道 display:block是显示成块状,独占一行;而inline是行...

    CSS学习 2个月前 112 0 display
  • CSS 菜单(有子菜单/子分类)显示图标,没有不显示

    CSS 菜单(有子菜单/子分类)显示图标,没有不显示

    选单常见于我们的生活当中,通常用于整理一系列的指令,简化複杂的程序,使介面看起来更加友善。当应用程式愈複杂,功能愈多时,通常会利用多级选单将类似的指令组织成一个子选单。一般网页常见到二级选单,利用 CSS 即可达成,有些会透过 JavaScript 增加更多效果,例如动画、延迟等。多级选单一般常使用 JavaScript 达成,不过透过 CSS 也能做出简单的多级选单。###HTML<nav>   &l...

    CSS学习 2个月前 115 0 菜单
  • 给网页图标字体 Font Awesome 添加动画效果

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

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

    CSS学习 2个月前 109 0 图标字体动画
展开