网站导航
- zblogPHP模板zbpkf
- zblog免费模板zblogfree
- zblog模板学习zblogxuexi
- zblogPHP仿站zbpfang
-
CSS 选择器参考手册
CSS3 选择器 <script> $(document).ready(function(){ $("botton").click(function(){ //jQuery 元素选择器 $(this).hide(); $("p").hide(); $("#test").hide();...
-
jQuery修改class属性和CSS样式
class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个class属性.但是class属性的值可以是多个名称,即可能包含一个词的列表,中间用空格分隔. 具体使用方法见:http://www.w3school.com.cn/css/css_selector_class.asp 用jQuery进行类名修改既可以用attr(...
-
zblogPHP模板制作技巧总结
判断:常用if判断 (CMS首页判断、侧栏判断)指定分类设置特殊模板样式,分类编辑选择为某些分类指定分类模板,后台版方法字段:主题调用指定字段文章(多选字段)方法 调用某篇文章:指定文章标题、内容、摘要、图片...调取某个页面的标题、内容等zblogPHP 调用全部页面(调取所有页面) 调用多篇文章:主题连续调用多篇文章,输入ID方法调取置顶文章到首页,限制(指定)N条数 调用某个(单个)分类:调用(指定)...
-
display: table-cell 无法使用 margin/ padding 的解法
之前发过一篇,用div+css替代table的文章,因为div+css实在好用。已实际用过display: table的朋友,当你们在使用的时候,也许会碰到「间距调整」的问题,例如要在每一个table-cell裡头设定margin等间距调整,却发现修改无效。假设你碰过这种状况,不妨参考一下我推荐的解法。话不多说,先上个范例!我使用图片+图说当作范例,例子包含:正常状况下,图片紧密排列使用margin调整的结果将宽度写死的结果使用bord...
-
CSS:padding实现两栏自适应 - 图片与文字左右排列,文字自适应不限宽度
使用padding来布局,上一篇文章讲解了padding来实现两栏等高布局,本文重点讲解下两栏自适应宽度,在图片和文字组合一起的时候,让文字区域宽度自适应。注意:这里的图片宽度是固定的,而不能随意宽度!要实现图片固定,文字不限制宽度的自适应,那么有两种使用padding的方法。一、padding在容器上:原理如下:容器有个固定的padding-left值,此时图文应该在120px处显示,但是,由于图片margin负值浮动(或者绝对定位)...
-
纯CSS图形 - padding圆形/同心圆
之前讲述过几个使用纯CSS制作的图形,比如三角形《border绘制三角形(各种角度)》三横线《三横线(三道杠)padding制作出来》、《border-style:double制作三横线》今天来分享下上图所示的使用CSS绘制同心圆,主要使用padding属性!代码如下:<style> .box{ width: 100px; height:&n...
-
纯CSS图形:三横线(三道杠)padding制作出来
其实之前已经分享过一篇,用纯CSS方式实现三横线(三道杠)的方法:CSS小技巧:border-style:double制作三横线具体代码:{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}可能比本文实现的还简单,但既然学习到了padding实现三横线,那就看看padding是如何来实现的吧!如上图实现的代码如...
-
难缠的button按钮与padding内边距蛋疼的浏览器兼容性,label解决!
<style> button{ line-height:20px; padding: 10px; border: none;} </style> <button id="btn"...
-
ol/ul列表默认存在左侧外边距padding-left值,而不是默认左对齐!
ol ul列表大家都知道的,也是最常用的一种标签了,各种列表中几乎必备!在使用时候也都会发觉ol ul列表距离左侧是有距离的,存在默认的padding-left值!下面就具体说下这个ol/ul列表默认左侧距padding-left:1、ol/ul内置元素padding-left,但是单位是px而不是em2、例如在chrome浏览器下是40px3、所以如果字号很小,间距就会很开;4、所以如果字号很大,序号会爬到容器外边...
-
padding:50% padding百分比 实现正方形
还是分享张鑫旭大神的padding进阶学习,padding:50%的作用!如下图:此时container非inline行内元素时padding:50%表现:截图来自慕课网大婶授课学习,padding:50%时候正方形的表现!注:此时container不能直接使用文字图片等元素,不然引起尺寸改变,就不是正方形,所以采用background-img,然后通过position绝对相对定位来书写文字。同时,padding百分比是基于宽度计算的!...
-
inline+padding技巧:间隔符(分割线)与文字高度不一致,间隔竖线高度缩短方法
如图所示,在前端经常需要用到各种间隔符号,用CSS实现应该是最佳办法,当然如果你用图片、用符号都可以实现,但应用起来不如CSS来的那么顺,那么爽!今天就用CSS来制作这个间隔符,并且让间隔符号垂直居中,并且高度低于前后文字,这样显得干练!<style> *{font-size: 24px;} span{padding: 16px 6px 1px;&n...
-
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:...