rockyxia
8年前 (2016-11-16) 6728浏览
写在前面
对于前端来说,CSS Zen Garden这个网站相信大家都是不陌生的,当年我刚接触网页制作(对,那时还不叫前端)的时候,CSS Zen Garden经常会出现在我的视野中,有些年头了,现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”,同一套html结构,仅通过不同的css来改变网站的样子。
2007年出版的一本名叫《CSS禅意花园》的书,主要讲解 http://cssz...
rockyxia
8年前 (2016-07-19) 11279浏览
写在前面
页面中CSS居中的问题我们经常能遇到,有简单的行内元素水平居中、块级元素水平居中,也有较为复杂的未知高度宽度的垂直居中问题,下面我们来把所有有关CSS居中的情况都总结一下,欢迎补充。
曾经的一篇文章:DIV未知高度垂直居中的CSS解决方法(2011-09-29)
水平居中
行内元素
把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式
div {
text-align: cen...
rockyxia
8年前 (2016-05-30) 18632浏览
写在前面
背景颜色半透明在网页中经常会用到,在用到半透明时一般立马会想到opacity,为兼容IE可能还会用到filter,如:
filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;
上面的写法是可以达到半透明的效果,但同时也会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这并不是我想要的。
有没有什么方法能实现只有背景透明...
rockyxia
9年前 (2016-03-21) 7533浏览
继上篇WIN7成功安装SASS记录之后,本周又把SASS如果使用在项目中研究了一番,本次内容是将之前的一个普通的静态页面转化为一个使用SASS的项目,体验了一些基础的SASS规则,像变量、嵌套、判断以及运算等基本的规则,走通了在项目中从scss文件到css文件的流程,没有使用专门的SASS编辑工具和引用第三方SASS库,都是原生态的做法。下面说下我的操作过程:
1、确定项目文件架构
与正常的项目差不多,看我...
rockyxia
9年前 (2016-03-15) 6495浏览
网上有很多sass安装的文章,今天安装sass也是参考的这些文章,总结下来就是两步:
1、安装ruby
2、安装sass
网上教程比较清晰的一篇文章分享给大家:http://www.w3cplus.com/sassguide/install.html
其中ruby部分安装没有问题,但是sass安装时却遭遇到了问题,无论是默认的RubyGems安装还是淘宝RubyGems镜像安装 都不成功,最终还是让我找到一...
rockyxia
10年前 (2014-10-30) 6526浏览
写在前面
inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。
几种尝试
总体来时可分为两种方法,一种是改变html结构法,另一种是css法。
先说第一种,比如下面这段代码:
<ol>
<li>首页</li>
...
rockyxia
12年前 (2013-03-06) 9624浏览
产生原因
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。
解决办法
我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden;
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug
ie7和ie6
发现在ie6和ie7里面overflow:h...
rockyxia
12年前 (2013-01-12) 8429浏览
原文链接:Principles of writing consistent, idiomatic HTML
原文作者:necolas
翻译编辑:张鑫旭
//zxx: 以下为翻译全文 ——–
一、一般原则
所有的代码应看似出自一人之手,即使奶妈有多人。
严格执行约定的风格。
若风格不定,使用现有、常用风格。
二、空白
你的整个源代码应该只存在一种风格。空白使用前后一致,使用空白提高可读性。
到死也不要混...
rockyxia
12年前 (2012-07-04) 12070浏览
Tags:
text-wrap 定义文本的自动换行效果
属性 效果
normal 在允许的断点处自动换行
none 文本不会自动换行;对于不“合身”的容器,文本将会溢出
unrestricted 在任意的文法单词间都可断行,比 normal 的限制要松散很多
suppress 除非断行处没有其他任何允许的断点,方可进行断行,这比 unrestricted 严格,比 normal 松散
word-wrap 执...
rockyxia
13年前 (2012-03-30) 14466浏览
关于css优先级的问题我想也困扰过很多人,特别是我今天发这篇文章里面所说这种情况,本文内容是截取自KB005:CSS层叠文章中的关于计算选择器的特殊性( Selector’s specificity )部分,下面直接进入主题吧!
选择器的特殊性是在相同来源,相同重要性的规则之间判定最终哪个规则会起作用。 比如, 同是开发者自己定义的样式,并且,没有使用 “!importantR...
rockyxia
13年前 (2012-03-22) 8086浏览
写在前面
本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么,有没有一种新的方法可以避免这些缺点呢?
有的,HTML5和CSS3就可以满足你的需求。甚至,它可以做的更多,更好。作为一名设计师,我们应当了解它们是什么东西,有什么特性,从而进...
rockyxia
13年前 (2011-11-18) 6723浏览
HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。
事实上,HTML5并没有对HTML4做什么重大的修改,它们很多东西都是相似的。
可是,其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要...
rockyxia
13年前 (2011-10-18) 7114浏览
我们经常在网上看到一些图片鼠标放上去就感觉变色了,但是这个图片还是原来的图片,并没有变换图片,其实这就是使用了滤镜的功能!滤镜是css中常用的功能,图片在网页中配合css滤镜可以做出很好看的效果!
今天我自己也尝试着做了一个小测试,代码页很简单,我先把代码放上来吧!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN...
rockyxia
13年前 (2011-09-29) 7568浏览
原文标题:Vertical Centering in CSS
副标题:Yuhu’s Definitive Solution with Unknown Hei
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABL...
rockyxia
13年前 (2011-09-08) 18715浏览
写在前面
ie6真是一个头疼的问题,让前端人员真的是伤透脑筋,却经常还是无法解决,今天我又一次遇到了一个关于在ie6下li左浮动换行产生的问题,最终没有办法解决,选择放弃了li而采用span标签!悲剧啊,由于本人的水平有限,希望大神能够指点一二啊!接下来我给大家说说我的情况啊,不知道大家在遇到时是怎么解决的呢?
首先直接看源码
html部分:
<div class="xiaoxue&qu...
rockyxia
13年前 (2011-08-29) 7347浏览
一般社交型的网站都会有发博文或写日志的功能,其中发表后的文章显示也是有学问的,其中之一就是line-height行高。
首先要知道行高的几种表示方法:px/em,或normal,或百分值,或数值,或inherit继承。
在显示文章的box里,px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的,使用px定值,由于继承性,无法实现根据文字大小自动调整间距,会出现大号文字重叠的现象。normal也是...
rockyxia
13年前 (2011-08-26) 7490浏览
在设计中常常会遇到这样的问题:
当容器内部有float样式时,容器的高度不会被撑开。
下面介绍两种方法解决上面的问题
第一种:在浮动元素后面加一个clear: both;比较常见的方法。
缺点:兼容性不强,IE6下div.clear会有高度,需要height:0,overflow:hidden来解决;页面有冗余代码。
第二种方法:clearfix;最完美的解决方法。
.clearfix:after {
...
rockyxia
13年前 (2011-08-26) 6495浏览
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简介
这个针对不同的浏览器写不同的CSS...
rockyxia
13年前 (2011-08-26) 9156浏览
当一个页面的图片在没有使用任何方案的情况下,五个图片超链接就只能使用五个图标按钮。
代码如下:
<div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;">
<center>
<...
rockyxia
13年前 (2011-08-26) 7991浏览
写在前面
相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题,我们首先要解决的是如何定位到问题,只有快速的定位到问题,才能更好的解决问题。
对...