css使用技巧20则---css-为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 my小屋

联系我们
设为首页
加入收藏

qq,asp,php,jsp,xml,sql,.net,编程程序网页图象建站经验私服




	当前位置：首页>>网页设计>>html/css>>正文	新版上线！[旧版]

注:打开慢时请稍等

css使用技巧20则

http://www.iyit.net 日期：2006-9-29 17:01:10 来源：点击：

【参加讨论】

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，ie6之前版本会显示不出这种效果。改css如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在content中又加入了
text-align: left 。

8. 用css来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对css来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

css方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. css在容器内定位

css的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

<div id="container"><div id="navigation">...</div></div>

如果想定位到距左30点，距上5悖梢哉庋?br>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是css所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的css：

#navigation
{
background: blue;
width: 150px
}

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

11. block和inline元素对比
所有的html元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

12. 再来一个box黑客方法

之所以有这么多box黑客方法，是因为ie在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让ie5等同其他浏览器保持一致，可以用css的方法：

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一个宽度所有浏览器都认得，但ie5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以ie5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。

13. 页面的最小宽度

min-width是个非常方便的css命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但ie不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在ie上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

本新闻共4页,当前在第2页 1 2 3 4

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：超级漂亮的表格:彩色背景
下一篇：实用技巧:用html给flash加链接
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

　相关文章

css+div设计实例：看看ie中有关1px的bu	css+div设计实例：hover over下的边框变	巧用css滤镜做图案文字
css中的行为——expression	中文排版css心得	总结：用css进行网页样式设计攻略全集
网站重构：利用css改善网站可访问性	两分钟做个xhtml+css的网站首页	调整css类型的顺序改变链接状态
expression将js、css结合起来	常用css	如何用css来控制网页字体的显示样式
用css实现表格背景颜色渐变效果	网页设计引入css样式的五种方式	技巧再现:css网页设计技巧
采用xhtml和css设计可重用可换肤网页	巧用css滤镜做图案文字	实例分析css属性display与visibility不
用css实现皮肤适时切换	css布局入门	10个你未必知道的css技巧
你没见过的css效果	避免表格table被撑开变形的css	css应用实例：水平线变成虚线

最新更新

热点排行

推荐新闻

css+div设计实例：看看ie中有关1px的b

css+div设计实例：hover over下的边框

实用技巧:用html给flash加链接

css使用技巧20则

超级漂亮的表格:彩色背景

css+div设计实例：看看ie中有关1px的b

css+div设计实例：hover over下的边框

css+div设计实例：看看ie中有关1px的b

css+div设计实例：hover over下的边框

qq2006 beta3隆重发布实用功能一一奉

由windows远程桌面想到的复制粘贴问题

	友情链接

	copyrights © 2004-2006 iyit.net all rights reserved. 网站合作、广告联系qq:147007642、466949678
	易特网络技术冀icp备05011851号		浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。