Erick » 网页设计 http://blog.xiongchuan.org Even a great life is only a life until you make it. Thu, 10 Mar 2011 14:44:44 +0000 en hourly 1 http://wordpress.org/?v=3.1 DIV+CSS让文字垂直居中 http://blog.xiongchuan.org/div-css-align-middle.html http://blog.xiongchuan.org/div-css-align-middle.html#comments Mon, 15 Jun 2009 07:48:38 +0000 Erick http://www.wp.com/wordpress/?p=57

也许有人会问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及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如 果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相 同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码：

imoker.cn（爱摩客）提供的代码片段：

div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

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 {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>
三、多行文本固定高度的居中

在 本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个 display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用 vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必 须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
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#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”content”><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基 础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

imoker.cn（爱摩客）提供的代码片段：

<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”>
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对 定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使 content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才 能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现 Internet Explorer 6中的垂直居中：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

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#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
</html>
五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

imoker.cn（爱摩客）提供的代码片段：

div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此，一个完美的居中方案就产生了。

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#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
</html>
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

Related Posts

]]> http://blog.xiongchuan.org/div-css-align-middle.html/feed 0 图片链接效果 http://blog.xiongchuan.org/pictures-links.html http://blog.xiongchuan.org/pictures-links.html#comments Mon, 15 Jun 2009 07:47:17 +0000 Erick http://www.wp.com/wordpress/?p=55 百度来的，方便以后用，收藏收藏。

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>

2．样式

*{
margin:0px;
padding:0px;
}
body {
margin:20px;
font-size: 12px;
line-height:18px;
}
.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}
.blueidea a span {
margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}
.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla浏览器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*”+”图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/
}

Related Posts

]]> http://blog.xiongchuan.org/pictures-links.html/feed 0 利用DW快速批处理图片链接(转) http://blog.xiongchuan.org/batch-change-pictures-links.html http://blog.xiongchuan.org/batch-change-pictures-links.html#comments Mon, 15 Jun 2009 07:45:57 +0000 Erick http://www.wp.com/wordpress/?p=53 对于网页制作者来说，最烦琐的事情可能就是给页面中的图片或文字加链接了。假如页面内容很多的话，那么所做的工作只能用恐怖来形容。

记得几天前，笔者就曾在很短的时间内为一个客户做了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处理后的图片大小。

在Columns后选择每行图片排列的个数，在Thumbnail Format后的下拉列表中选择索引图片的压缩格式，在Photo Frmat后的下拉列表中可以选择原图片的压缩格式。

对于Create Navigation Page for Each Photo的单选框中的对号不做选择。它作用是是否给所有的图片创建一个索引页。如果勾选了该项，则在浏览该图片的时候，每个图片的页面都会有向前、向 后、或回到主页面的链接;如果不勾选该项，则没有这些链接，这在选择的时候可以根据自己的需要来确定。

作好上面的工作之后，单击“OK”按钮，接下来Fireworks就启动起来了(机器里要装有Fireworks)，在Fireworks的窗口里将出现窗口，这是Fireworks中处理图片的进度。

返回Dreamweaver的工作区，按下键盘的F12键，测试一下页面，看看效果，这么多链接仅仅两分钟就做好了，是不是很容易。

点击图片，会自动跳转到放大后的图片，也就是原图片的页面。

首先启动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处理后的图片大小。

在Columns后选择每行图片排列的个数，在Thumbnail Format后的下拉列表中选择索引图片的压缩格式，在Photo Frmat后的下拉列表中可以选择原图片的压缩格式。

对于Create Navigation Page for Each Photo的单选框中的对号不做选择。它作用是是否给所有的图片创建一个索引页。如果勾选了该项，则在浏览该图片的时候，每个图片的页面都会有向前、向 后、或回到主页面的链接;如果不勾选该项，则没有这些链接，这在选择的时候可以根据自己的需要来确定。

作好上面的工作之后，单击“OK”按钮，接下来Fireworks就启动起来了(机器里要装有Fireworks)，在Fireworks的窗口里将出现窗口，这是Fireworks中处理图片的进度。

返回Dreamweaver的工作区，按下键盘的F12键，测试一下页面，看看效果，这么多链接仅仅两分钟就做好了，是不是很容易。

点击图片，会自动跳转到放大后的图片，也就是原图片的页面。

Related Posts

]]> http://blog.xiongchuan.org/batch-change-pictures-links.html/feed 0 css链接颜色 http://blog.xiongchuan.org/css-links-color.html http://blog.xiongchuan.org/css-links-color.html#comments Mon, 15 Jun 2009 07:44:03 +0000 Erick http://www.wp.com/wordpress/?p=51 css称这些链接状态为伪类选择器,在css思考方式里,”真”类属性是用class=的属性来明确指定的,而伪类选择器则是用(:hover ; :visited ; :link ; :active)来指定,具体意义及顺序如下:
a: link用在为访问的连接上。
a :visited用在已经访问过的连接上。
a :hover用于鼠标光标置于其上的连接。
a :active用于获得焦点（比如，被点击）的连接上。
有 人或许要问了,难道顺序也有限制吗?在刚学css的时候,不明白为什么自己在链接设置上面都设置的很好了,但显示出来却不是自己想要的那种效果,这是因为 一些浏览器会忽略一条或者更多的锚元素伪类规则,除非它们早已按次序排列出来, 就是上面所显示顺序,也挺好记的(LVHA)

在css链接这些属性中,常用到的是color(文字颜色属性),background(背景颜色属性),text-decoration(文字修饰属性即是否有下划线)

一般情况下,只要按照上面顺序,在css中都能很好的定义链接样式,但今天却遇到一个问题，CSS链接样式表如下：
h5 a:link{color:#000000;
text-decoration:none;}
h5 a:visited{color:#000000;
text-decoration:none;}
h5 a:hover{color:#D6434B;
text-decoration:none;}
h5 a:active{color:#000000;
text-decoration:none;}
发现仍然是默认的紫色带下划线的样式，最后改成如下：
h5 a:link,h5 a:visited,h5 a:active{
color:#000000;
text-decoration:none;
}

h5 a:hover{
color:#D6434B;
text-decoration:none;
}
才实现了我想要的样式。

Related Posts

]]> http://blog.xiongchuan.org/css-links-color.html/feed 0