第38页
  • CSS 选择器参考手册

    CSS 选择器参考手册

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

    CSS学习 1年前 703 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模板学习 11个月前 668 1
  • 经典CSS聚合

    经典CSS聚合

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

    CSS学习 8个月前 323 0
  • css常用效果总结

    css常用效果总结

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

    CSS学习 8个月前 341 0
  • div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中。这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。<!DOCTYPE html>  <html>  <head>&nb...

  • CSS 元素垂直居中的 6种方法

    CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。Line-Height Method试用:单行文本垂直居中,demo代码:html1 2 3<div id="parent&...

  • CSS: position实现左侧栏高度自适应,依右侧栏高度而定 - 等高布局

    CSS: position实现左侧栏高度自适应,依右侧栏高度而定 - 等高布局

    等高布局相关:《padding和margin配合等高布局,侧边栏等高布局方法》而本文介绍的是使用position来实现多栏等高自适应布局!直接上图,左侧菜单只是显示部分,右侧的高度随时可能变化,要求:左侧栏的高度也跟随右侧栏一起变化!方法:position:absolute; top:0; bottom:0;使用position:absolute; 去定义顶部距离、底部距离,就可以让整个div的高度自适应了。完整代码:<...

  • CSS:左侧栏固定宽度,右侧栏自适应宽度

    CSS:左侧栏固定宽度,右侧栏自适应宽度

    相关:《左边固定,右边自适应及左边自适应,右边固定布局的几种方法》 【更全】最近在学习各种CSS知识,特别是制作网站常用的,比如今天来分享的一个CSS。 在制作zblog模板时候经常会用到一侧栏固定宽度,另一侧栏可以自适应宽度,特别是一些zblog博客、CMS主题常用到。如上图所示,是我写出来的比较简单的CSS,可以实现左侧栏固定宽度,右侧栏会自适应宽度与高度。(红色线条是左侧栏固定的宽和高)<!doctype ...

    CSS学习 1年前 622 0
  •  iPhone Safari IOS系统不兼容 :hover 的解决方法

    iPhone Safari IOS系统不兼容 :hover 的解决方法

    今天有一个zblog模板客户反馈问题,手机端菜单在苹果手机上下拉失效,安卓机子上正常,看了一下,使用的是:hover的方法,没有使用任何JS。我自己也没有苹果机子可测试,最终百度中找到iphone无法兼容:hover的原因!方法一:a:hover 设置的样式在iOS系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。代码如下:docume...

    前端技术 1年前 1854 0 hoveriphone
  • 背景透明、文字不透明最简单的CSS方法 - background-color:rgba(229,52,51,0.75);

    背景透明、文字不透明最简单的CSS方法 - background-color:rgba(229,52,51,0.75);

    在写这段代码的时候,遇到了一个问题,就是要求背景红色有透明度,但文字上的颜色不能透明,不然真的不好看。如果直接使用filter:alpha(opacity=80);opacity:0.8 这段解决,则可以把div全部进行透明化,包括文字了,就很难看!找来找去,最简单的方法:background-color:rgba(229,52,51,0.75);颜色使用rgba,最后一个0.75就是透明度了,这种办法可以解决文字透明的问题,...

    CSS学习 1年前 754 0 background
  • 图标: 文字的前缀图标 - 背景图片方式

    图标: 文字的前缀图标 - 背景图片方式

     文字前的图标,并且图标尺寸大于文字尺寸(高度)的情况下CSS:<div class="time green">      <i></i>限量抢,23点开放预热     </div>CSS:.posts .time{height:...

    CSS学习 1年前 651 0 图标
  • 大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS

    大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS

    相关:《长图(宽图)任何宽度浏览器内原尺寸居中,不产生导航条,超出使用背景色》(不如本文分享的居中代码精简,但兼容性较好)今天写zblog主题的时候遇到了一个难题,就是图片(非背景图)必须居中显示,且图片宽度在1920px,网站主题宽度1180px,要求图片在任何1180-1920浏览器宽度内都要居中显示,且高度宽度不变,并且图片一直居中于浏览器中间!如下图:要求图片一直居中于浏览器中,必须保持原有尺寸,且不能有多余的导航条显示,遍寻代...

    CSS学习 1年前 643 0 居中
  • gifgifgif(Gif-gIf-giF)小工具,直接截图/录制屏幕鼠标动态操作、显示并导出为GIF动态图片

    gifgifgif(Gif-gIf-giF)小工具,直接截图/录制屏幕鼠标动态操作、显示并导出为GIF动态图片

    在学习和制作zblog模板的时候,特别是学习CSS各种特效时的效果直接用截屏根本不能很准的表达动态效果,这时候就需要一款软件,一个可以直接把操作导出为gif动态图的工具软件,gifgifgif(Gif-gIf-giF)就是在这种情况下被我发现。一个只有123k的软件,完美的把动态操作录制下来并且直接保存为gif动态图片。使用方法:直接下载解压软件,并且双击打开如上图!然后:1、设置帧数,帧数越高得到的gif图片质量越好,当然图片也就越大...

    工具软件 1年前 605 0
  • CSS3 2D 转换 - 移动,比例化,反过来,旋转,和拉伸元素。

    CSS3 2D 转换 - 移动,比例化,反过来,旋转,和拉伸元素。

    表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。属性transform36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-3.2 -webkit-23.015.0 -webkit-12.110.5 -o-transform-origin(two-va...

    CSS学习 1年前 586 0