最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

CSS

CSS3+HTML5学习

具有《CSS禅意花园》情节的读书笔记

rockyxia 2年前 (2016-11-16) 3080浏览

写在前面 对于前端来说,CSS Zen Garden这个网站相信大家都是不陌生的,当年我刚接触网页制作(对,那时还不叫前端)的时候,CSS Zen Garden经常会出现在我的视野中,有些年头了,现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”,同一套html结构,仅通过不同的css来改变网站的样子。 2007年出版的一本名叫《CSS禅意花园》的书,主要讲解 http://cssz...

CSS居中问题的各种解决方案(水平、垂直)

CSS居中问题的各种解决方案(水平、垂直)

rockyxia 2年前 (2016-07-19) 5169浏览

写在前面 页面中CSS居中的问题我们经常能遇到,有简单的行内元素水平居中、块级元素水平居中,也有较为复杂的未知高度宽度的垂直居中问题,下面我们来把所有有关CSS居中的情况都总结一下,欢迎补充。 曾经的一篇文章:DIV未知高度垂直居中的CSS解决方法(2011-09-29) 水平居中 行内元素 把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式 div { text-align: cen...

RGBA背景颜色半透明全兼容的做法

rockyxia 3年前 (2016-05-30) 6887浏览

写在前面 背景颜色半透明在网页中经常会用到,在用到半透明时一般立马会想到opacity,为兼容IE可能还会用到filter,如: filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 上面的写法是可以达到半透明的效果,但同时也会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这并不是我想要的。 有没有什么方法能实现只有背景透明...

SASS在项目中的实战

rockyxia 3年前 (2016-03-21) 3885浏览

继上篇WIN7成功安装SASS记录之后,本周又把SASS如果使用在项目中研究了一番,本次内容是将之前的一个普通的静态页面转化为一个使用SASS的项目,体验了一些基础的SASS规则,像变量、嵌套、判断以及运算等基本的规则,走通了在项目中从scss文件到css文件的流程,没有使用专门的SASS编辑工具和引用第三方SASS库,都是原生态的做法。下面说下我的操作过程: 1、确定项目文件架构 与正常的项目差不多,看我...

WIN7成功安装SASS记录

rockyxia 3年前 (2016-03-15) 3539浏览

网上有很多sass安装的文章,今天安装sass也是参考的这些文章,总结下来就是两步: 1、安装ruby 2、安装sass 网上教程比较清晰的一篇文章分享给大家:http://www.w3cplus.com/sassguide/install.html 其中ruby部分安装没有问题,但是sass安装时却遭遇到了问题,无论是默认的RubyGems安装还是淘宝RubyGems镜像安装 都不成功,最终还是让我找到一...

去除inline-block元素间的空隙

rockyxia 4年前 (2014-10-30) 3872浏览

写在前面 inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。 几种尝试 总体来时可分为两种方法,一种是改变html结构法,另一种是css法。 先说第一种,比如下面这段代码: <ol> <li>首页</li> ...

css ie6、ie7、ie8中overflow:hidden无效解决办法

rockyxia 6年前 (2013-03-06) 6126浏览

产生原因 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。 解决办法 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden; 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里面overflow:h...

翻译:稳定、地道HTML书写原则

rockyxia 6年前 (2013-01-12) 5447浏览

原文链接:Principles of writing consistent, idiomatic HTML 原文作者:necolas 翻译编辑:张鑫旭 //zxx: 以下为翻译全文 ——– 一、一般原则 所有的代码应看似出自一人之手,即使奶妈有多人。 严格执行约定的风格。 若风格不定,使用现有、常用风格。 二、空白 你的整个源代码应该只存在一种风格。空白使用前后一致,使用空白提高可读性。 到死也不要混...

通过CSS实现换行的几个标签

rockyxia 7年前 (2012-07-04) 5488浏览

Tags: text-wrap 定义文本的自动换行效果 属性 效果 normal 在允许的断点处自动换行 none 文本不会自动换行;对于不“合身”的容器,文本将会溢出 unrestricted 在任意的文法单词间都可断行,比 normal 的限制要松散很多 suppress 除非断行处没有其他任何允许的断点,方可进行断行,这比 unrestricted 严格,比 normal 松散 word-wrap 执...

CSS优先级之计算选择器的特殊性( Selector’s specificity )

rockyxia 7年前 (2012-03-30) 7188浏览

关于css优先级的问题我想也困扰过很多人,特别是我今天发这篇文章里面所说这种情况,本文内容是截取自KB005:CSS层叠文章中的关于计算选择器的特殊性( Selector’s specificity )部分,下面直接进入主题吧! 选择器的特殊性是在相同来源,相同重要性的规则之间判定最终哪个规则会起作用。 比如, 同是开发者自己定义的样式,并且,没有使用 “!importantR...

HTML5和CSS3令设计师心动的新特征

rockyxia 7年前 (2012-03-22) 5186浏览

写在前面 本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么,有没有一种新的方法可以避免这些缺点呢? 有的,HTML5和CSS3就可以满足你的需求。甚至,它可以做的更多,更好。作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进...

HTML5和HTML4之间的10个主要不同点

rockyxia 7年前 (2011-11-18) 3477浏览

HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。 事实上,HTML5并没有对HTML4做什么重大的修改,它们很多东西都是相似的。 可是,其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要...

CSS滤镜在图片链接时的应用

rockyxia 7年前 (2011-10-18) 4424浏览

我们经常在网上看到一些图片鼠标放上去就感觉变色了,但是这个图片还是原来的图片,并没有变换图片,其实这就是使用了滤镜的功能!滤镜是css中常用的功能,图片在网页中配合css滤镜可以做出很好看的效果! 今天我自己也尝试着做了一个小测试,代码页很简单,我先把代码放上来吧! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN...

DIV未知高度垂直居中的CSS解决方法

rockyxia 7年前 (2011-09-29) 4488浏览

原文标题:Vertical Centering in CSS 副标题:Yuhu’s Definitive Solution with Unknown Hei 尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABL...

[ie6hack]如何解决ie6下li左浮动换行产生的hack

rockyxia 7年前 (2011-09-08) 13655浏览

写在前面 ie6真是一个头疼的问题,让前端人员真的是伤透脑筋,却经常还是无法解决,今天我又一次遇到了一个关于在ie6下li左浮动换行产生的问题,最终没有办法解决,选择放弃了li而采用span标签!悲剧啊,由于本人的水平有限,希望大神能够指点一二啊!接下来我给大家说说我的情况啊,不知道大家在遇到时是怎么解决的呢? 首先直接看源码 html部分: <div class="xiaoxue&qu...

行高在文章显示中的应用

rockyxia 7年前 (2011-08-29) 4537浏览

一般社交型的网站都会有发博文或写日志的功能,其中发表后的文章显示也是有学问的,其中之一就是line-height行高。 首先要知道行高的几种表示方法:px/em,或normal,或百分值,或数值,或inherit继承。 在显示文章的box里,px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的,使用px定值,由于继承性,无法实现根据文字大小自动调整间距,会出现大号文字重叠的现象。normal也是...

CSS技术二之clearfix-清除浮动

rockyxia 7年前 (2011-08-26) 4490浏览

在设计中常常会遇到这样的问题: 当容器内部有float样式时,容器的高度不会被撑开。 下面介绍两种方法解决上面的问题 第一种:在浮动元素后面加一个clear: both;比较常见的方法。 缺点:兼容性不强,IE6下div.clear会有高度,需要height:0,overflow:hidden来解决;页面有冗余代码。 第二种方法:clearfix;最完美的解决方法。 .clearfix:after { ...

css技术一之css hack

rockyxia 7年前 (2011-08-26) 3909浏览

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 简介 这个针对不同的浏览器写不同的CSS...

减少图片HTTP请求的方案

rockyxia 7年前 (2011-08-26) 6288浏览

当一个页面的图片在没有使用任何方案的情况下,五个图片超链接就只能使用五个图标按钮。 代码如下: <div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;"> <center> <...

快速定位页面中复杂 CSS BUG

rockyxia 7年前 (2011-08-26) 5505浏览

写在前面 相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题,我们首先要解决的是如何定位到问题,只有快速的定位到问题,才能更好的解决问题。 对...