2006年02月16日

么叫绝对居中?就是说容器到屏幕左右上下四个方向都有间距,并且随屏幕大小缩放相对不变或者等比例调整,始终居屏幕中间。 绝对居中也有两种情况,容器的绝对大小和相对大小。 同时有很多方法可以实现,总结起来大致如下:

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

2.利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)
根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数:



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

3.老外给出的另类方法,巧妙利用display:inline-block;,IE6.0测试通过。(标准)
注意1.height:100%是关键:2.edge与container没有嵌套关系:
这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

4.CSS行为expression控制实现,不过expression为IE独有,并且耗资源严重,尤其在大量使用的时候。(标准)
注意关键定义,不要以为height:100%在IE内是没用的:
实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位:



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

5.FF1.5测试通过,绝对定位,边距为比例,此时容器高宽始终为viewport的50%相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

6.FF1.5测试通过,绝对定位,直接定位上下左右,强制边局实现容器相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

7.IE6.0测试通过,强制html的padding,实现container的相对大小(标准):



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

8.



[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

技术提示

容器大小固定,推荐使用的是第2种方法,兼容最好。

容器大小相对,第7,8两种方法效果在各自支持浏览器内效果是一样的,可以通过过滤语法实现单独在IE或FF内支持。

命名规范

文件命名的原则:以最少的字母达到最容易理解的意义。

一般文件及目录命名规范

每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm文件名称统一用小写的英文字母、数字和下划线的组合;

尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们);

多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm

图片的命名规范

名称分为头尾两两部分,用下划线隔开。

头部分表示此图片的大类性质。例如: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner ;标志性的图片我们取名为:logo ;在页面上位置不固定并且带有链接的小图片我们取名为button ;在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu ;装饰用的照片我们取名:pic ;不带链接表示标题的图片我们取名:title 依照此原则类推。

尾部分用来表示图片的具体含义,用英文字母表示。例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。

其它文件命名规范

js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js;所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi。

目录结构规范

目录建立的原则:以最少的层次提供最清晰简便的访问结构。

目录的命名以小写英文字母,下划线组成。(参照命名规范);

根目录一般只存放index.htm以及其他必须的系统文件;

每个主要栏目开设一个相应的独立目录;

根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片;

所有JS,ASP,PHP等脚本存放在根目录下的scripts目录;

所有CGI程序存放在根目录下的cgi-bin目录;

所有CSS文件存放在根目录下style目录;

每个语言版本存放于独立的目录。例如:简体中文gb;

所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录。

尺寸规范

尺寸规范请根据您的实际情况调整:页面标准按800*600分辨率制作,推荐尺寸为766*430px;
页面长度原则上不超过3屏,宽度不超过1屏;
每个标准页面为A4幅面大小,即8.5X11英寸;
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px,另外120*90,120*60也是小图标的标准尺寸;
每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K。

首页代码规范

首页的代码关键在head区,head区是指首页HTML代码的<head>和</head>之间的内容。 head区必须加入的标识
公司版权注释 <!— The site is designed by yourcompany,Inc 03/2001 —>
网页显示字符集 例如:
简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
原始制作者信息 <META name="author" content="webmaster@yoursite.com">
网站简介 <META NAME="DESCRIPTION" CONTENT="这里填您网站的简介">
搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2,关键字3,…">
网页的css规范 <LINK href="style/style.css" rel="stylesheet" type="text/css">
网页标题 <title>这里是你的网页标题</title>
head区可以选择加入的标识
设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指时间停留5秒。
网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">所有的javascript脚本尽量采取外部调用
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
CSS书写规范
所有的CSS的尽量采用外部调用
<LINK href="style/style.css" rel="stylesheet" type="text/css">
书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。
为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

CSS推荐模板。

<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋体"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #0000FF; text-decoration: none}
a:visited { font-size: 9pt; color: #990099; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9900; text-decoration: none}
.blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
–>
</style>

body标识

为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">
形象设计规范
网站的CI整体形象包括下面几个要素:

标志(logo)

网站必须有独立的标志;

大部分定义根据项目需求定制,并不适合每个网站,提出一种思路,抛砖引玉。

  1. 主要兼容MOZ & IE6。好多年不用IE5.x了,而且也没测试环境,工作和自己项目都已不考虑IE5;
  2. 定义名主要采用单字母识别。主要是自己使用,减少代码,语意描述显然不是很好;
  3. 大量采用包含选择符增加定义重用,定义写法上重复都为合写,可读性同样不是那么好;
  4. 链接部分定义适用于触发不换色,只增加下划线;

  欢迎提出意见。可能部分定义对兼容有潜在的影响,个人使用不断更新。

语言定义

常被忽略,但我总喜欢加上@charset "gb2312";

全局宏观定义

html,body标签,以及MOZ的模块兼容
html,body { margin:0 auto; font:12px Arial,Helvetica,sans-serif,宋体; line-height:150%; TEXT-ALIGN:center; overflow-x:hidden; color:#000;}
body>table,body>div { margin-left:auto; margin-right:auto; clear:both;} /* M0Z */

全局微观定义

各容器和表单,主要控制文字、图片
table,div,tr,th,td,ul,li,img,form,h2,h3,h4 { font:12px Arial,Helvetica,sans-serif,宋体; margin:0; padding:0; border:0; color:#000;}
div,td,ul,li,h2,h3,h4 { LIST-STYLE-TYPE: none; word-break:break-all; Width:fixed; text-align:justify; text-justify:inter-ideograph; line-height:150%; border:0;}
input,select,textarea { color:#000; font:12px Arial,Helvetica,sans-serif,宋体;}

全局链接定义

触发出现下划线,链接颜色不变
a { font:12px Arial,Helvetica,sans-serif,宋体; color:#000; text-decoration: none;}
a:hover { text-decoration:underline;}

文字-标题

h2,h2 a { font-size:16px; font-weight:bold;}
h3,h3 a { font-size:14px; font-weight:bold;}
h4,h4 a { font-size:12px; font-weight:bold;}
文字-加粗与下划线
.f_b {}
.fs_b,.f_b * { font-weight:bold;}
.f_u {}
.fs_u,.f_u * { text-decoration:underline;}
文字-链接下划线效果
.a_vl a:link,.a_vl a:visited { text-decoration:underline;}
.a_vl a:hover{ text-decoration:none;} /* 触发无 */
.a_hl a:link,.a_hl a:visited { text-decoration:none;}
.a_hl a:hover{ text-decoration:underline;} /* 触发有 */
.a_nl a:link,.a_nl a:visited { text-decoration:none;}
.a_nl a:hover{ text-decoration:none;} /* 永久无 */

文字-大小

.f_s_10,.f_s_10 * { font-size:10px;}
.f_s_12,.f_s_12 * { font-size:12px;}
.f_s_14,.f_s_14 * { font-size:14px;}
.f_s_16,.f_s_16 * { font-size:16px;}

文字-颜色

.a_c_black,.a_c_black * { color:#000;}
.a_c_gray,.a_c_gray * { color:#666;}
.a_c_white,.a_c_white * { color:#fff;}
.a_c_red,.a_c_red * { color:#f00;}

图片-边框

.b_black {}
.bs_black,.b_black img { border:1px #000 solid;}
.b_gray {}
.bs_gray,.b_gray img { border:1px #999 solid;}
.b_white {}
.bs_white,.b_white img { border:1px #fff solid;}

图片-通栏广告

常用宽度通栏,包含纵向外补丁,兼容MOZ
.ban,.ban_white,.ban_black { width:760px;}
.ban img { margin:5px auto;}
.ban_white img { margin:5px auto; border:1px #fff solid;}
.ban_black img { margin:5px auto; border:1px #000 solid;}

列表-行高

.l_16,.l_16 * { line-height:16px;}
.l_18,.l_18 * { line-height:18px;}
.l_20,.l_20 * { line-height:20px;}
.l_22,.l_22 * { line-height:22px;}
.l_24,.l_24 * { line-height:24px;}
.l_26,.l_26 * { line-height:26px;}
.l_28,.l_28 * { line-height:28px;}
.l_30,.l_30 * { line-height:30px;}

列表-高度

.l_h_18,.l_h_18 * { height:18px;}
.l_h_20,.l_h_20 * { height:20px;}
.l_h_22,.l_h_22 * { height:22px;}

列表-单元格宽

.l_t_20 {}
.l_t_20 td { width:20%;}
.l_t_25 {}
.l_t_25 td { width:25%;}
列表-补丁
列表的横向内补丁
.l_p_5 {}
.l_p_5 * { padding-left: 5px;padding-right: 5px;}
.l_pr_5 {}
.l_pr_5 * { padding-right: 5px;}
浮动-位置,偏移,对齐
组合定义,控制位置左中右,控制左右浮动列表,单元格居顶,图片、表单的横向对齐
.t_l,.t_l * { text-align:left;}
.t_c,.t_c * { text-align:center;}
.t_r,.t_r *,.f_la,.f_lb,.f_ld,.f_ls { text-align:right;}
.f_l,.f_la a,.f_lb b,.f_ld div,.f_ls span { float:left;} /* f_la f_lb f_ld f_ls */
.f_r { float:right;}
.v_t { vertical-align:top;}
.v_m,.v_m_o,.v_m_o * { vertical-align:middle;}
间隔-内补丁
常用内补丁组合定义
.p_5 { padding: 5px;}
.p_t_5 { padding-top: 5px;}
.p_l_5 { padding-left: 5px;}
.p_r_5 { padding-right: 5px;}
.p_ape_5 { padding-top: 5px;padding-bottom: 5px;} /* apeak */
.p_lev_5 { padding-left: 5px;padding-right: 5px;} /* level */
.p_10 { padding: 10px;}
.p_t_10 { padding-top: 10px;}
.p_l_10 { padding-left: 10px;}
.p_r_10 { padding-right: 10px;}
.p_ape_10 { padding-top: 10px;padding-bottom: 10px;} /* apeak */
.p_lev_10 { padding-left: 10px;padding-right: 10px;} /* level */
间隔-外补丁
常用外补丁组合定义
.m_t_5 { margin:5px auto 0 auto;}
.m_a_5 { margin:5px auto;}
兼容
MOZ层自动延伸,清除浮动,MOZ居中
.h_h { height:0; clear:both; overflow:hidden; margin:0 auto;} /* M0Z */
.c_c { clear:both;}
.c_m,.c_l_m,.c_l_m div { margin:0 auto;} /* M0Z */

关于页面居中我总结了有以下几种用CSS方法:

第一种方法


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

以上代码的关键是 div { position: absolute; width: 770px; left: 50%; margin-left:-385px; }

第二种方法


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

第三种方法


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

以上均在IE6.0中测试通过。其中第三种方法在IE6.0中显示正常,但在IE5.0中显不正常。各位网友是否还有其它的方法请指教。

1.样式命名
    外 套:  wrap
    主导航:  mainnav
    子导航:  subnav
    页 脚:  footet
    整个页面: content
    页 眉:  header
    页 脚:  footer
    商 标:  label
    标 题:  title
    主导航:  mainbav(globalnav)
    顶导航:  topnav
    边导航:  sidebar
    左导航:  leftsidebar
    右导航:  rightsidebar
    旗 志:  logo
    标 语:  banner
    菜单内容1: menu1   content
    菜单容量: menu container
    子菜单:  submenu
    边导航图标:sidebarIcon
    注释:   note
    面包屑:  breadcrumb(即页面所处位置导航提示)
    容器:   container
    内容:   content
    搜索:   search
    登陆:   Login
    功能区:  shop(如购物车,收银台)
    当前的   current

2.另外在编辑样式表时可用的注释可这样写:
    <--   Footer -->
    内容区
    <-- End Footer -->

3.样式文件命名
    主要的      master.css
    布局,版面  layout.css
    专栏        columns.css
    文字        font.css
    打印样式    print.css
    主题        themes.css 

说明:以后会补充。
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell; }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px; line-height: 1.12 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, object,
select          { display:inline-block; }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk/

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

1.CSS字体属性简写规则

一般用CSS设定字体属性是这样做的:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

<p class="text side">…</p>

同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。

补充:对于一个ID,不能这样写<p id="text side">…</p>也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色,宽度和风格,如:
border: 3px solid #000
这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。

如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。

也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示,第2行是打印,注意其中的media属性。

但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。

比如你想整个卖东西的图标,你就用了这个图片:
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:

#box { width: 100px; border: 5px; padding: 20px }

这样调用它:
<div id="box">…</div>
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的,让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用:
<div id="box"><div>…</div></div>
这样,不管什么浏览器,宽度都是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点,可以这样:

#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。

本文作者是:Trenton Moss。
发表网站是:http://www.webcredible.co.uk/。

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权,可以自由使用本翻译。

本文作者:小毅
发表网站:蓝色理想

  1. 整理好一个标准的XHTML文件。这个文件里有DTD,HEAD,BODY等等,在HEAD中我们把每次都要填写的信息都加入其内,这个就是我每次生存网页的模板!
  2. 在Editplus中把一些常用的标签都事先制作放在Editplus的剪贴库中!
  3. 在Editplus中把一些常用的CSS也事先做好放在剪贴库中。
  4. 分析出常用的几种网页布局,然后制作成XHTML代码,存放在剪贴库中。
  5. 制作自己的CSS常用ID与CLASS名称集,最好全面一点。
  6. 在CSS中需要把常用的一些CSS命令制作成为合集,比如:“网页居中”,“横向导航”,“表单样式”等,在CSS中的BODY与的DIV的ID或是CLASS的CSS命令就合为一个放在剪贴库中。
  1. ul 标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
    1. 同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效。
    2. 一个兼容性调整(IE和Mozilla)的笨办法:
      初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
    • 临时解决方法:选择符 {属性名:B !important ; 属性名:A;}
    1. 如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
    2. li 标签前面的图标推荐使用background-image 而不是list-style-image
    3. IE分不清继承关系和父子关系的差别,全部都是继承关系。
    4. 在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注汀?等你以后修改你的CSS的时候就知道为什么要这么做了。
    5. 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
    6. 定义链接的四种状态要注意先后顺序: Link Visited Hover Active
    7. 与内容无关的图片请使用background
    8. 定义颜色可以缩写#8899FF = #89F
    9. table 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
    10. <script>没有language这个属性,应该写成这样:
      <script type="text/javascript">
    11. 标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
    12. 完美的单象素外框线表格(在IE5.0 IE6.0及FF1.0.4中均可通过测试,其它夫测试)
      table {border-collapse:collapse;}
      td {border:#000 solid 1px;}
    13. margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。 把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。
    14. 绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
    15. 几个常用到的CSS样式
      中文字两端对齐:text-align:justify; text-justify:inter-ideograph;
      固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)
      固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)
      <acronym title="输入要提示的文字" style="cursor:help;">文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

    第一种方法


    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    第一行的javascript可改为外部链接,如:<script type="text/javascript" src="script/btr.js"></script>。

    第二种方法


    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    第三种方法


    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

    以上通过IE6验证全部显示正常。二、三在Firefox中失效,所以建议使用第一种方法。