• CSS 选择器参考手册

    CSS 选择器参考手册

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

    CSS学习 1年前 590 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(...

  • zblogPHP模板制作技巧总结

    zblogPHP模板制作技巧总结

    判断:常用if判断 (CMS首页判断、侧栏判断)指定分类设置特殊模板样式,分类编辑选择为某些分类指定分类模板,后台版方法字段:主题调用指定字段文章(多选字段)方法 调用某篇文章:指定文章标题、内容、摘要、图片...调取某个页面的标题、内容等zblogPHP 调用全部页面(调取所有页面) 调用多篇文章:主题连续调用多篇文章,输入ID方法调取置顶文章到首页,限制(指定)N条数 调用某个(单个)分类:调用(指定)...

    zblog模板学习 9个月前 537 1
  • 经典CSS聚合

    经典CSS聚合

    CSS3 线性渐变(linear-gradient)transition过渡效果(变形、变色、旋转、停顿时间)鼠标移上去,图片会自动原地放大CSS写法三角形对话框(带边框)- :before + :after + border从table转而使用div+cssdisplay: table-cell 无法使用 margin/ padding 的解法纯CSS写三角形,自适应不同宽度水平翻转、垂直翻转 触发变色/随机颜色:手机浏览器...

    CSS学习 6个月前 247 0
  • css常用效果总结

    css常用效果总结

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

    CSS学习 6个月前 245 0
  • display: table-cell 无法使用 margin/ padding 的解法

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

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

  • CSS:padding实现两栏自适应 - 图片与文字左右排列,文字自适应不限宽度

    CSS:padding实现两栏自适应 - 图片与文字左右排列,文字自适应不限宽度

    使用padding来布局,上一篇文章讲解了padding来实现两栏等高布局,本文重点讲解下两栏自适应宽度,在图片和文字组合一起的时候,让文字区域宽度自适应。注意:这里的图片宽度是固定的,而不能随意宽度!要实现图片固定,文字不限制宽度的自适应,那么有两种使用padding的方法。一、padding在容器上:原理如下:容器有个固定的padding-left值,此时图文应该在120px处显示,但是,由于图片margin负值浮动(或者绝对定位)...

    CSS学习 1年前 640 0 padding自适应
  • padding和margin负值实现 - 等高布局,侧边栏等高布局方法

    padding和margin负值实现 - 等高布局,侧边栏等高布局方法

    等高布局相关《position实现等高布局》 实现的方法主要是基于position:absolute;top:0;bottom:0来实现等高布局!而本文要使用的方法主要是padding和margin配合等高布局,让多栏目等高!如上图,两侧等高布局,就是使用padding配合margin实现的!<style>  .box{overflow: hidden;resize: vertica...

  • 纯CSS图形 - padding圆形/同心圆

    纯CSS图形 - padding圆形/同心圆

    之前讲述过几个使用纯CSS制作的图形,比如三角形《border绘制三角形(各种角度)》三横线《三横线(三道杠)padding制作出来》、《border-style:double制作三横线》今天来分享下上图所示的使用CSS绘制同心圆,主要使用padding属性!代码如下:<style>  .box{     width: 100px; height:&n...

  • 纯CSS图形:三横线(三道杠)padding制作出来

    纯CSS图形:三横线(三道杠)padding制作出来

    其实之前已经分享过一篇,用纯CSS方式实现三横线(三道杠)的方法:CSS小技巧:border-style:double制作三横线具体代码:{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}可能比本文实现的还简单,但既然学习到了padding实现三横线,那就看看padding是如何来实现的吧!如上图实现的代码如...

    CSS学习 1年前 865 0 paddingcss图形
  • 难缠的button按钮与padding内边距蛋疼的浏览器兼容性,label解决!

    难缠的button按钮与padding内边距蛋疼的浏览器兼容性,label解决!

     <style>  button{     line-height:20px;     padding: 10px;     border: none;} </style> <button id="btn"...

  • ol/ul列表默认存在左侧外边距padding-left值,而不是默认左对齐!

    ol/ul列表默认存在左侧外边距padding-left值,而不是默认左对齐!

    ol ul列表大家都知道的,也是最常用的一种标签了,各种列表中几乎必备!在使用时候也都会发觉ol ul列表距离左侧是有距离的,存在默认的padding-left值!下面就具体说下这个ol/ul列表默认左侧距padding-left:1、ol/ul内置元素padding-left,但是单位是px而不是em2、例如在chrome浏览器下是40px3、所以如果字号很小,间距就会很开;4、所以如果字号很大,序号会爬到容器外边...

    CSS学习 1年前 402 0 padding
  • padding:50% padding百分比 实现正方形

    padding:50% padding百分比 实现正方形

    还是分享张鑫旭大神的padding进阶学习,padding:50%的作用!如下图:此时container非inline行内元素时padding:50%表现:截图来自慕课网大婶授课学习,padding:50%时候正方形的表现!注:此时container不能直接使用文字图片等元素,不然引起尺寸改变,就不是正方形,所以采用background-img,然后通过position绝对相对定位来书写文字。同时,padding百分比是基于宽度计算的!...

    CSS学习 1年前 540 0 padding
  • inline+padding技巧:间隔符(分割线)与文字高度不一致,间隔竖线高度缩短方法

    inline+padding技巧:间隔符(分割线)与文字高度不一致,间隔竖线高度缩短方法

    如图所示,在前端经常需要用到各种间隔符号,用CSS实现应该是最佳办法,当然如果你用图片、用符号都可以实现,但应用起来不如CSS来的那么顺,那么爽!今天就用CSS来制作这个间隔符,并且让间隔符号垂直居中,并且高度低于前后文字,这样显得干练!<style>  *{font-size: 24px;}  span{padding: 16px 6px 1px;&n...

    CSS学习 1年前 522 0 padding
  • padding和box-sizing:border-box; 外边框变为内边框

    padding和box-sizing:border-box; 外边框变为内边框

     今天着重说明下padding和box-sizing: border-box;的作用,今天听慕课网,学习了前端大神张鑫旭讲解的padding,其中介绍了pading和box-sizing:border-box的作用!注意兼容性:box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:...