不少网站开始采用韩式风格来建站，这种风格的特点是色彩变化丰富、应用动画合理、结构新颖，最明显的特点就是表格或标题栏常会加上一条横或竖的色带，如图1中圈起来的地方就是这样。
一般人都会想到用Photoshop等软件来完成这样的效果，但如果网页上这类图片太多，或是较大时，会给访问带来一定的困难。这里就给大家讲一讲如何用CSS来做这样的风格，因为用CSS只是对颜色的定义，少了图片的应用，所以基本不会影响速度。
首先，在 MX 2004中为页面添加一个CSS效果类，具体设置如图2。
点击OK后，会弹出具体的效果设置，打开其中的border标签，进行如图3的设置。
然后将Background标签中的Background Color设置为“#BAEE66”，在你要应用这种风格的表格上添加这个CSS效果就OK了。
应用这种方法，大家可以做出各式各样美观且访问速度很快的表格来，图4是笔者试做的几种风格，大家可以根据border的设定再结合表格的设计来做出各式各样的效果来。
记住你可以保存 HTML 编码的源文件，用做你的 Web 页的模板，或者把它修改之后用做其他用途.
HTML 标记
HTML
该元素指明你的文件包含 HTML-编码 信息. 文件扩展名 .html 也指明该文件是一个 HTML 文档而且 必须使用. (如果你的系统受 8.3 制文件名的限制 (如., LeeHome.htm）, 可以用 .htm 做扩展名.)
HEAD
头元素 head 是你的 HTML-编码 文档中包含标题 title 的第一部分. 标题是作为你的浏览器窗口的一部分来显示的 (见下文).
TITLE
标题 title 元素含有你的文档标题并且作为一种全局上下文识别其内容. 标题通常显示在浏览器窗口的某个位置 (通常在顶端), 而不是在文本区. 标题同时也用于热点列表 hotlist 或书签列表 bookmark list 中的显示, 因此标题的选择因当是描述性的, 独特的, 和相对简洁的. 标题在 WAIS 服务中还用于搜索服务器.
例如, 你可能在一章的内容中包含一个短小的书本的标题: NCSA Mosaic 指南 (Windows): 安装. 这个标题说明了软件的名称, 使用平台, 和本章内容, 它比简单地把该文档称为 安装. 要好得多。一般你的标题应该不超过 64 个字符.
BODY
HTML 文档的第二部分，也是最大的部分是正文 body, 它含有你的文档的内容 (显示在你的浏览器窗口文本区的部分). 下面介绍的标记用在 HTML 文档的正文 body 内.
标题字体Headings
HTML 有六级标题字体, 从 1 到 6 编号, 1 号最小. 标题字体的显示比普通文本字体大或者粗. 每个文档中的第一个标题字体应该标记为 <H1>.
标题字体元素的语法为:
<Hy>标题字体文本 </Hy>
其中 y 是从 1 到 6 的数字，指明标题字体的等级.
在你的文档中不要跳跃使用标题字体等级. 例如, 不要用一级标题 (<H1>) 开始，然后跟随一个三级标题 (<H3>) .
段落Paragraphs
不同于多数字处理器中的文档, HTML 文件中的换行是不重要的. 你不用担心你的文本中行的长度 ( 当然最好不要超过 72 个字符). 在你的源文件中任何地方可以使用换行, 多个空白在你的浏览器中被重叠成为一个空白.
在“最小的 HTML 文档”中给出的例子中第一段的编码为
<P>Welcome to the world of HTML.
This is the first paragraph.
While short it is
still a paragraph!</P>
源文件中各行之间有换行. Web 浏览器忽略这些换行，只有遇到另一个 <p> 标记时才开始新段落 <P>
要点: 你必须用 <P> 元素指明段落. 浏览器忽略源文件中的任何缩进或空行. 如果没有 <P> 元素, 文档将被看作一个大段落处理. (一个例外的情况是把文本标记为 "preformatted," 下文中将做介绍.) 例如, 下面的内容的输出和第一个 HTML 例子完全相同:
<H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is the
first paragraph. While short it is still a
paragraph! </P> <P>And this is the second paragraph.</P>
为了保持 HTML 文件的可读性, 标题字体应该独占一行, 在开始一个新的部分之前加一到两行空行，段落之间也用空行隔开( 除了用<P> 标记以外). 这些额外的空白在你编辑文件时将会有用 ( 但是你的浏览器将忽略这些空白因为它有自己的关于空白的规则，不依赖于你源文件中的空白).
注意: 结束标记 </P> 可以省略. 这是因为当浏览器遇到一个 <P> 标记时, 它认为前一个段落到此结束.
使用 <P> 和 </P> 作为段落标记使得你可以通过在源文件中使用 ALIGN=alignment 属性使一个段落居中排列.
<P ALIGN=CENTER>
这是一个居中的段落. [见下面的输出形式]
</P>
这是一个居中的段落.[page]
列表Lists
HTML 支持不编号 unnumbered, 编号numbered, 和定义definition 三种列表. 你也可以嵌套列表, 但是不要嵌套过多，否则会使读者感到不清晰。
不编号列表Unnumbered Lists
制作一个不编号的，公告式列表,
用开始标记 <UL> ( unnumbered list 的简记) 开始
输入 <LI> (list item) 标记，后面跟独立的项; 不需使用 </LI> 标记
用 </UL> 标记结束整个列表
下面是一个有三个项的列表:
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
输出形式为:
apples
bananas
grapefruit
<LI> 项可以含有多个段落. 用段落标记 <P> 指明.
编号列表Numbered Lists
编号列表 (也称为 有序列表ordered list) 和不编号列表相同, 只是用 <OL> 代替 <UL>. 各项同样用 <LI> 标记. 下面的 HTML 代码:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
产生的输出为:
oranges
peaches
grapes
定义列表Definition Lists
定义列表 (编码为 <DL>) 通常含有交替出现的 定义术语definition term (编码为 <DT>) 和定义描述definition definition (编码为 <DD>). Web 浏览器通常另起一行显示定义描述.
下面是一个定义列表的例子:
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York.
</DL>
输出形式为:
NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.
<DT> 和 <DD> 项可以包含多个段落 (用 <P> 标记指示), 列表, 或其他的定义信息.
COMPACT 属性可能会被经常使用，如果你的定义术语很简短的话. 例如，如果你想显示一些计算机选项, 它们可以和定义的开始处于同一行中.
<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows using the
initialization file defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode
</DL>
输出形式为:
-i
invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
-k
invokes NCSA Mosaic for Microsoft Windows in kiosk mode.
嵌套列表Nested Lists
列表可以嵌套. 在每个列表项中，你还可以含有多个段落，每个段落含有嵌套列表.
[page]
这里是一个嵌套列表的例子:
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
这个嵌套列表的显示：
A few New England states:
Vermont
New Hampshire
Maine
Two Midwestern states:
Michigan
Indiana
预排格式文本Preformatted Text
用<PRE> 标记 (表示 "preformatted") 可以产生固定宽度的字体. 该标记同时使空格，新行，和制表键 tabs 有效 (多个空格显示为多个空格, 源文件中的换行也在浏览器中产生换行). 这对于程序清单和其他一些情况是很有用的. 例如, 下面的行:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
显示为:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
<PRE> 标记可以带一个宽度属性 WIDTH ，指明一行中最多允许的字符数. WIDTH 同时通知浏览器选择一个合适的字体以及文本的缩排.
在 <PRE> 作用的部分中也可以加超链. 但是其他的 HTML 标记应该避免在 <PRE> 的区间中使用.
注意，由于<, >, 和 &
标签(Tags)：CSS轻松实现色块标题标识
引用地址：