驾驭<hr />标签

<hr>标签是html4用来制作水平线的。如果你在网页制作中使用了<hr />标签来制作水平分隔线,你知道在没有样式设置的情况下,他是很难看的。<hr/>在各浏览器的显示常常是100%的宽度,2px的高度,3D边框风格渲染。默认情况是不太好看,或者也不符合你的网页风格,但是你给<hr/>标签设置了样式,这样他看起来就不会那么难看,同时也更能适合你的页面风格。但是,你千万要小心,因为有一些浏览器对<hr/>渲染出来的风格是不一样的。大家先来看一朋友在其页中运用的<hr/>在Firefox 和IE下的效果:

从上图中很明显得知,你在样式中设置<hr/>的边框样式,在各浏览器下显示是不一样的

				hr {border-top: 1px solid #ddd;}
			

此时在IE下显示是1px的边框线;但在Firefox,Opera等浏览器下显示的却是2px的边框,如果你把边值从新设置:

八种创建等高列布局

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了。但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情。

CSS3 Gradient Buttons

前面在《CSS3 Gradient》一文中详细介绍了CSS3中的Gradient属性的使用,一直没来得急介绍这方面的实例,今天在Nick La (@nickla)的Web Designer Wall中看到了一篇《CSS3 Gradient Buttons》主要介绍用CSS3中的Gradient属性制作Buttons的效果。觉得蛮好的,特意整理一份放上来与大家分享。

jQuery和CSS3给图片制作圆角

圆角,这东西在Web页面应用方面,大家在熟悉不过的东西了,以前是使用图片来制作,但现在敢于挑战的同学也在尝试使用CSS3border-radius来制作圆角。在前面,我在《CSS3的圆角Border-radius》专门介绍过CSS3border-radius属性。

jQuery学习笔记—— .addClass()/.removeClass()/.toggleClass()

在平时的页面交互制作中,我们常常要使用jQueryjavaScript来动态改变页面中某个或部分元素的样式,为了实现这样的功能,我们往往都是使用jQueryjavaScript来控制HTMLDOM的类名(class)从而实现增加或删除某一样式,今天我们所要看得是如何使用jQuery来实现这个功能。

jQuery学习笔记—— .is() VS .hasClass()

现在开始在学习jQuery基础知识,这几天学习了一下jQuery中的.is().hasClass()方法的使用。花点时间整理了一下,希望对初学者有所帮助。在jQuery中,我们可以使用两种方法来检查一个元素是否具有某些类名,这两种方法都具有相同的功能。

OOCSS——核心篇

上一节在《OOCSS——概念篇》中主要介绍了一些有关于OOCSS的概念性的东西,并以博客的“meta data”为例介绍了如何创建一个基础对象。赞同和反对使用OOCSS的声音都有,对这个感兴趣的朋友可以不用理会这些反对的声音,因为那些声音是无法阻挡我们对新知识的渴望。今天主要想借助OOCSS官网提供的相关资料,一起来学习Nicole Sullivan写的OOCSS核心东西。

OOCSS——概念篇

“Object Oriented”直译就是面向对象,对于这个词,大家并不陌生,但是加上一个CSS也就是说Object Oriented CSS,对于这个还是第一次见过,被叫作OOCSS(面向对象的CSS),其实这个东西早在2008年被提出,有些同学也在自己的项目中用过了。但有很多同学并不清楚,就拿我来说,我一开始还以为OOCSS是一个新语言或者是CSS框架,其实都不是,他只不过是一种新的写法。那么下面就通过“什么是OOCSS”,“OOCSS理论”等几个部分和大家一起来学习OOCSS。

CSS3 选择器——伪类选择器

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。

和前面一样,在开始之前先创建一个Dom:

CSS3 选择器——属性选择器

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。

从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种:

页面

返回顶部