CSS3和HTML实体符制作带图片效果的Buttons

大家都知道,无论我们是设计一个网站或Web应用程序,我们都少不了Buttons。自从有了CSS3后,我们制作一些漂亮的Buttons就容易多了,只是有一点头痛的是,IE6-8不能支持这种靓丽的Buttons。前面我在《CSS3 Gradient Buttons》和《CSS——Bootstrap From Twitter》都有介绍关于CSS3制作好看的Buttons方法,并且在《LESS和CSS3动态制作按钮》介绍了如何使用CSS3结合Less动态制作不同的Buttons。

CSS制作图片水平垂直居中

做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一不足之处就是结构繁锁,那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。

曾经拜读过张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文,从中学会好几种关于图片水平垂直居中的方法,而今天我要和大家一起探讨的是其他几种关于图片水平垂直居中的方法。

CSS制作水平垂直居中对齐

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家,以供大家参考。或许对于我这样的初学者有一定的帮助。

用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。

方法一:

这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的。

Html Markup

				<div class="vertical">content</div>
			

CSS Code:

驾驭<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核心东西。

页面

返回顶部