‘网页设计’ 分类的存档
也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览 器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign 特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而 像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
CSS网页布局DIV水平居中的各种方法
一、单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：
imoker.cn（爱摩客）提供的代码片段：
div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。
imoker.cn（爱摩客）提供的代码片段：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>
不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。
百度来的，方便以后用，收藏收藏。
1．结构
<div><a href=”#”><img src=”http://www.hsptc.com/cssImg/pic1.jpg” alt=”” /><span> 80万网民追捧全球最性感女主播</span></a><em title=”我要收藏”></em></div>
<div><a href=”#”><img src=”http://www.hsptc.com/cssImg/pic2.jpg” alt=”” /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title=”我要收藏”></em></div>
<div><a href=”#”><img src=”http://www.hsptc.com/cssImg/pic3.jpg” alt=”” /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title=”我要收藏”></em></div>
对于网页制作者来说，最烦琐的事情可能就是给页面中的图片或文字加链接了。假如页面内容很多的话，那么所做的工作只能用恐怖来形容。
记得几天前，笔者就曾在很短的时间内为一个客户做了300个图片和相应的链接。正好是Dreamweaver和Fireworks结合的一个很好的实 例典范，下面我们就来学习一下自动制作许多链接并处理图片的方法。 对于网页制作者来说，最烦琐的事情可能就是给页面中的图片或文字加链接了。假如页面内 容很多的话，那么所做的工作只能用恐怖来形容。记得几天前，笔者就曾在很短的时间内为一个客户做了300个图片和相应的链接。正好是 Dreamweaver和Fireworks结合的一个很好的实例典范，下面我们就来学习一下自动制作许多链接并处理图片的方法。
首先启动Dreamweaver，建立好站点后，选择CoMMand(命令)>Create Web Photo Album(制作Web影集)，打开Create Web Photo Album。
然后在Photo Album Title后的文本输入框中输入影集的名称。在这里输入的文字我们建议最好输入英文字母，不要输入汉字，因为输入汉字后，在Dreamweaver的编辑 区中显示的并不十分正常。Subheading Info和Other Info后输入副标题或其他标题，在Photo Album Title后输入“Photo”。
接下来就在Source Images Folder后的“Browse”按钮中选择目标图片所在的目录，然后单击“保存”按钮，这里选择Boats目录。
点击Destination Folder后的“Browser”按钮，选择好处理后的文件所在的目录，一般我们要选择自己站点所在的目录，(在本例中我们的站点目录就是目标图片目录Boats)，然后单击“打开”按钮。
在Thumbnail Size后的下拉列表中选择好Fireworks处理后的图片大小。
css称这些链接状态为伪类选择器,在css思考方式里,”真”类属性是用class=的属性来明确指定的,而伪类选择器则是用(:hover ; :visited ; :link ; :active)来指定,具体意义及顺序如下:
a: link用在为访问的连接上。
a :visited用在已经访问过的连接上。
a :hover用于鼠标光标置于其上的连接。
a :active用于获得焦点（比如，被点击）的连接上。
有 人或许要问了,难道顺序也有限制吗?在刚学css的时候,不明白为什么自己在链接设置上面都设置的很好了,但显示出来却不是自己想要的那种效果,这是因为 一些浏览器会忽略一条或者更多的锚元素伪类规则,除非它们早已按次序排列出来, 就是上面所显示顺序,也挺好记的(LVHA)
在css链接这些属性中,常用到的是color(文字颜色属性),background(背景颜色属性),text-decoration(文字修饰属性即是否有下划线)
