CSS Web Design 我爱CSS - CSS布局实例

DivCSS网页布局中几个漂亮的Button按钮

2010-07-01T11:52:30+08:00

DivCSS网页布局中几个漂亮的Button按钮，大家可以自己建立HTML文档。把下面的代码COPY进去，运行看看效果。

.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}

好看的按钮

class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮

好看的按钮

onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮

好看的

DivCSS实例教程：表单Select样式美化经典案例

2010-05-24T22:20:33+08:00

　　DivCSS布局中表单的美化一直是CSSer头疼的问题，特别是Select样式的美化，更是头痛。今天52CSS.com向大家展示实例，希望对大家的学习工作有所帮助。
　　效果如下图所示：

　　结构分析如下图：

DivCSS实例教程：表单Select样式美化经典案例演示地址

DivCSS实例教程：表单Select样式美化经典案例下载地址
　　

CSS实例：水平居中和垂直居中的多种解决方案

2010-01-17T21:23:11+08:00

　　在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。在52CSS.com中，大量的文章介绍了这些知识。在和别人合作的时候，你的代码的自适应性就需要做到最大程度的好。你自己在做自己的网页的时候或许可以保证在视觉上是居中的，但是如果让这个元素或者他的父元素变大了，你还能保证居中吗？

　　vertical-align是个不错的属性，但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用，但是对行内元素比如span还是有作用的（这时候，这个属性设置为负值元素内容就下移，正值则上移）。

　　下面是比较专业的垂直居中的集中解决方案。记录于此，以便查阅。

1、单行垂直居中

　　文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

Example Source Code [www.52css.com]

2、层水平居中

　　设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。

Example Source Code [www.52css.com]

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}

3、层中的文字水平居中

　　在childdiv的css加上text-align:center;

Example Source Code [www.52css.com]

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}

4、div层垂直居中

Example Source Code [www.52css.com]

                style=" background:red;position:static;position:absolute\9; top: 50%;">
                    style=" background:blue;position: relative; top: -50%;">
                     www.52css.com

5、div层垂直水平居中，英文超长换行

Example Source Code [www.52css.com]

          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
                     style="position:static;position:absolute\9; top: 50%;">

www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com

6、div垂直滚动

Example Source Code [www.52css.com]

              style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

              www.52css.com

7、垂直居中和使用text-align水平居中

Example Source Code [www.52css.com]

          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
                     style="position:static;position:absolute\9;top: 50%;">
                       style="position: relative; top: -50%; text-align:center;">

www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com

8、垂直居中和使用margin水平居中

Example Source Code [www.52css.com]

          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
                     style="position:static;position:absolute\9; top: 50%;">
                       style="position: relative; top: -50%; ">

www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com

CSS网页布局实例：div高度随窗口变化而变化

2009-10-30T16:38:44+08:00

　　今天W3Cbbs.com论坛有一个朋友，提出一个问题。怎么让一个DIV随窗口的变化而变化。
　　原贴：http://w3cbbs.com/thread-3325-1-1.html
　　其实他是指DIV的高度。简写了一下，感觉不是很实用。不过在某些特殊页面中，有一定的作用。
　　可以在IE6、IE7与FF中，自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。

代码如下：

Example Source Code [www.52css.com]

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

CSS网页布局实例：div高度随窗口变化而变化

52CSS & W3Cbbs - CSS学习班本学习班培训，不收任何费用，学习成果在于你自己的努力。

http://52css.com">我爱CSS DivCSS教程 - 52CSS.com

http://w3cbbs.com/">DivCSS网页布局 W3C标准 - W3Cbbs.com

查看运行效果：

Source Code to Run [www.52css.com]

[ 可先修改部分代码再运行查看效果 ]

可以在IE6、IE7与FF中，自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。
　　

CSS实例：Vista风格的CSS二级菜单（附下载）

2009-10-16T21:18:35+08:00

Vista风格的CSS二级菜单（附下载）。Vista虽然没有微软预期的那样成为完全替代Windows XP的操作系统，但其华丽的界面还是深入人心，现在越来越多的软件界面，网页风格，小到按钮、导航的样式，都在尽可能的模仿Vista那华丽的界面风格，今天给大家展示的就是一种用CSS制作的仿Vista风格的一个二级菜单！

>>> 查看演示 <<<
>>> 下载代码 <<<

CSS的expression判断表达式设置input样式

2009-06-04T20:53:56+08:00

　　用CSS的expression判断表达式设置input样式，简单，轻量级。缺点在于expression判断表达式FireFox是不支持的。致命的是只能区分出一个（例如例子中就只能区分出text文本框），不要试图设置多个，下面的会将上面的覆盖掉 52CSS.com ……Orz…

　　代码：

Example Source Code [www.52css.com]

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >

    www.52CSS.com

    input
    {
    background-color:expression(this.type=="text"?'#FFC':'');
    }

This is normal textbox:
This is normal button:

　　另一种方法：

Example Source Code [www.52css.com]

input{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}

　　1、将 input 的属性取出来，赋给 className。
　　2、对于 expression，这里使用一个无关紧要的属性（此处是zoom）来触发，处理完需要做的事情之后，再将此属性覆盖掉以解决 expression 不断执行的效率问题。

　　代码：

Example Source Code [www.52css.com]

input[type="text"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
background: #F5F5F5;
}
input[type="password"]{
border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
color: #000; background: #F5F5F5;
width: 50px;
}
input[type="button"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #000; font-weight: bold; background: #F5F5F5;
}
input[type="reset"]{
border: 1px solid; border-color: #EEE #CCC #CCC #EEE;
color: #666; background: #F5F5F5;
}

CSS之绝对定位（position: fixed）的一个案例

2009-04-25T23:23:51+08:00

我相信这个绝对定位（position: fixed）CSS属性很多人都不陌生，也多应用过，同样我曾也尝试过绝对定位，试验过后发现，它是华丽而不省油，相当消耗计算机内存，特别在我这老机器上运行显然有些吃力，曾看过某些专家们使用华丽而不消耗内存方法，但有些复杂。

但今天我要想大家展示的比较非常规的应用，我相信大家演示后一定会惊叹，一定会记住这个绝对定位应用。

使用了两张透明度的GIF图片作为交叉比较，一个定位一个非定位:

Source Code to Run [www.52css.com]

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>position-fixed</title>	
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Helvetica, sans-serif;
}

p#about {
	position: fixed;
	top: 20px;
	right: 20px;
}

#page-wrap {
	width: 800px;
	background: white;
	margin: 0 auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(attachments/month_0904/r2009425232639.gif) white no-repeat;
	width: 800px;
	height: 150px;
}

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(attachments/month_0904/j2009425232654.gif) top center no-repeat;
	width: 800px;
	height: 825px;
}
</style>
</head>

<body>

<p id="about">by wulinfo: <a href="<a href="http://www.52css.com/" target="_blank">http://www.52css.com/</a>"><strong>去骂两句</strong></a></p>

<div id="fixed-letters">
	</div>
	
	<div id="scroll-letters">
	</div>
	
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "<a href="https://ssl." target="_blank">https://ssl.</a>" : "<a href="http://www." target="_blank">http://www.</a>");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8214144-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>

</html>

[ 可先修改部分代码再运行查看效果 ]

Reset CSS 淘宝CSS框架研究

2009-04-24T23:34:11+08:00

　　八卦是种优良品质，特别是用在技术上时。来看几个Reset CSS的八卦问题吧：

　　你知道世界上第一份reset.css在哪么？

Example Source Code [www.52css.com]

* { margin: 0; padding: 0 }人品很坏吗？
Eric Meyer和YUI是情侣吗？
Google有用reset.css吗？
No CSS Reset的口号是谁最先提出来的？

　　类似问题或者说困惑还能列举很多，reset.css极其简单又极其不简单。继续挖掘八卦之前，请先关机遐思，或去如厕更衣透透气，想想后再读下文。

　　不是历史
　　2004年，遥远又如近在眼前的昨天，Tantek被不同浏览器下默认样式的差异搞烦了，于是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。

　　对于基于Gecko引擎的Firefox等浏览器，请在地址栏中输入resource://gre/res/html.css，默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性：Really Undoing html.css. 知道CSS好玩，实在没想到CSS居然这么好玩。比如style, script { display: block }就可以显示CSS和JS源码，在做代码演示的demo页时，就不用辛辛苦苦用pre或textarea了（虽然因为ie不支持导致不实用，不过这的确是个思路）。

　　继续八卦：CSS Negotiation and a Sanity Saving Shortcut. * { margin: 0; padding: 0 }的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的，并且作者建议一定要先破后立，要将清扫差异和重置默认样式结合起来，这样才是正确的做法。

　　为何Global White Space Reset当初风光一时，如今却黯然销魂？* { margin: 0; padding: 0 }的成功之处在于，管你三七二十八，统统抹平，人人生而平等！然而其失败之处也正是因为其威力太大，虽然捣了蜂窝得了蜜，却惹来群蜂追尾，麻烦无限（因为被抹平的样式，你得再重新设置回来，比如input的padding等）。这就如西汉一代名将韩信哪，是成也萧何，败也萧何！

　　还有一个传说中的说法是，星号*选择符还会导致性能问题。由于一直没找到可靠的资料，我又不知道怎样才能测试CSS选择符的渲染性能（知道的请一定告诉我），这个传说中的性能问题就只能当它是传说了。

　　眨眼一瞬间，三年就过去了。2007年，Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案：Eric的reset.css是源自YUI的，可能是母子关系，但总之不是情侣关系。

　　很快，Eric发布了第二版：Reworked Reset. 后面的解释极具价值，很多属性值的设置在这里有详尽说明。

　　火爆的回复给了Eric源源不断的动力：Reset Reloaded. 看完这篇文章，有一种尘埃落定的感觉。

　　但上面的文章并不是最终版本，2008年2月份，Eric Meyer还更新了一次：CSS Tools: Reset CSS

　　说完Eric Meyer的心路历程，不得不提一下YUI Reset CSS. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面，前不久已离开YAHOO，让我的直觉里对YUI都有点担心起来了，唉。

　　上面是两个最有名的CSS Reset方案。但世界永远是多样化的，比如Less is more - my choice of Reset CSS. 这和Eric Meyer的期望其实是一致的：不同的应用环境下，应该选择自己的reset方案，而不是简单的copy过去。比如Google首页，在这种特定页面里，不用就是一种最好的用。

　　更多眼花缭乱的Reset方案请参看：A Killer Collection of Global CSS Reset Styles. 很标题党，内容就鱼龙混杂了。

　　最后，隆重揭晓最后一个八卦问题的答案：No CSS Reset. 提倡的核心思想也是Less is more. 原因很简单，* { margin: 0; padding: 0 }杀伤力太大，在某些场合下，Eric Meyer的方案杀伤力也还是太大了。有想法并说出来，总是好的。

　　有反对就会有支持：Why I Like (and Use) Reset CSS. 公说公有理，婆说婆有理，并非所有问题都需要一个确切的答案，有时过程本身，就是追求的结果。

　　Eric Meyer对No CSS Reset一文的回复：Crafting Ourselves. 读罢此文，明月松间照，清泉石上流。下面摘录两段，做为此八卦闲文的完结：

Example Source Code [www.52css.com]

　　Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.
　　…It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.

　　下一篇是技术篇，将详细探讨淘宝目前使用的Reset CSS方案，欢迎各位提前准备好板砖，我已购买坚固头盔一顶…… 敬请期待。
　　
　　

一款非常经典纯CSS下拉导航菜单

2009-04-18T20:34:45+08:00

　　在52CSS.com大量的CSS网页布局实例中，包括了很多CSS菜单方面的知识与案例，但是大家对这些知识的学习依然非常热衷。今天向大家介绍一款，非常经典的，纯CSS实现的下拉导航菜单，此案例中的浏览器条件注释信息也值得大家学习。

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css下拉菜单 - 52css.com</title>

<link rel="stylesheet" type="text/css" href="menu1.css" />


<style>
 @charset "utf-8";
/* CSS Document */
body {
    font-family:verdana, sans-serif; 
    font-size:small;
}
#navigation , #navigation li ul{
    padding:0; 
    margin:0;
    list-style-type: none;
}
#navigation li {
    float:left;
    text-align:center;
    position:relative;
}
#navigation li h3 {
    margin:0; 
}
#navigation li a:link, #navigation li a:visited {
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:120px; 
    height:30px; 
    line-height:30px; 
    border:1px solid #fff; 
    border-width:1px 1px 0 0; 
    background:#c5dbf2; 
    padding-left:10px; 
}
#navigation li ul {
    display: none;
}
table {
    margin:-1px; 
    border-collapse:collapse;
}
/* 以下只支持非IE6浏览器 */
#navigation li:hover a {
    color:#fff;
    background:#ff0000;
}
#navigation li:hover ul {
    display:block; 
    position:absolute; 
    top:30px;
    margin-top:1px;
    left:0; 
    width:120px;
}
#navigation li:hover ul li a {
    display:block; 
    background:#c5dbf2; 
    color:#000; 
    height:15px; 
    line-height:15px; 
    padding:5px 10px; 
    width:110px;
}
#navigation li:hover ul li a:hover {
    color:#fff;
    background:#647413; 
}

body 
 { font-family:verdana, sans-serif;  font-size:small;}
 #navigation ,
  #navigation li ul{ padding:0;  margin:0; list-style-type: none;}
  #navigation li { float:left; text-align:center; position:relative;
  }#navigation li h3 { margin:0; }
  #navigation li a:link, #navigation li a:visited { display:block;  text-decoration:none;  color:#000;  width:120px;  height:40px;  line-height:40px;  border:1px solid #fff;  border-width:1px 1px 0 0;  background:#c5dbf2;  padding-left:10px; }
  #navigation li ul{ display: none;}table { margin:-1px;  border-collapse:collapse;}/* IE6浏览器专用 */
  #navigation li a:hover { color:#fff;  background:#2687eb;}
  #navigation li a:hover ul {  display:block;  position:absolute;  top:40px; margin-top:1px; left:0;  width:120px;}
  #navigation li a:hover ul li a { display:block;  background:#c5dbf2;  color:#000;  height:20px;  line-height:20px;  padding:5px 10px;  width:110px;}
  #navigation li a:hover ul li a:hover { color:#fff; background:#6b839c; }

</style>
</head>
<body>
<ul >
  <li> <a href="#">栏目1
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目1-->菜单1</a></li>
            <li><a href="<a href="http://www.52css.com" target="_blank">http://www.52css.com</a>">52css.com</a></li>
            <li><a href="#">栏目1-->菜单3</a></li>
            <li><a href="#">栏目1-->菜单4</a></li>
          </ul></td>
      </tr>
    </table>
    
  </li>
  <li> <a href="#">栏目2
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目2-->菜单1</a></li>
            <li><a href="#">栏目2-->菜单2</a></li>
            <li><a href="#">栏目2-->菜单3</a></li>
            <li><a href="#">栏目2-->菜单4</a></li>
            <li><a href="#">栏目2-->菜单5</a></li>
          </ul></td>
      </tr>
    </table>
    
  </li>
  <li> <a href="#">栏目3
    
    </a>
    
    <table>
      <tr>
        <td><ul>
            <li><a href="#">栏目3-->菜单1</a></li>
            <li><a href="#">栏目3-->菜单2</a></li>
            <li><a href="#">栏目3-->菜单3</a></li>
          </ul></td>
      </tr>
    </table>
    
  </li>
</ul>
</body>
</html>

[ 可先修改部分代码再运行查看效果 ]

CSS高级文字排版的实例

2009-03-22T19:31:20+08:00

　　CSS功能的强大在52CSS.com中早已经展现很多，而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。今天的这些实例，为您提供了很多想象和拓展的空间。

Example Source Code [www.52css.com]

h3.reflect_1 { color: #333333; border-bottom: 6px solid #DDDDDD; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 150%; }
h3.reflect_2 { color: #CECECE; margin: 0; line-height: .6em; border-top: 1px solid #EEEEEE; padding: 0 0 0 10px; font-size: 150%;}

h3.line_drop { font-family:"Trebuchet MS", Garamond, Georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;
letter-spacing: -2px; }

h3.elegant { letter-spacing: -2px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }

h3.handwriting { font-style: italic; font-weight: bold; font-family: "Comic Sans MS"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"Trebuchet MS", Garamond, Georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "Comic Sans MS"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }

h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #FFFF66; }

h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }
h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}

p.letters { line-height: .64em; letter-spacing: -2px; font-family: "Courier New", Courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; }

h3.newspaper span { font-family: Georgia, "Times New Roman", Times, serif; }

h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; font-variant: small-caps;}

h3.funky { font-family: "Trebuchet MS", Garamond, Georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}
h3.funky span { letter-spacing: 5px;}

h3.el { font-family: Verdana, Arial, Helvetica, sans-serif; color: #BBBBBB; border-bottom: #CCCCCC 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}

h3.num_blend { font-size: 36px; font-weight: 100;}

h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}

h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "Courier New", Courier, monospace; font-weight: 100;}

h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: Impact, Arial, Verdana; text-transform: uppercase; border-bottom: #CC0000 10px solid; font-weight: 100; }
h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: Impact, Arial, Verdana; text-transform: uppercase; position: relative; font-weight: 100; }

h3.g { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #133BC1; }
h3.o1 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; }
h3.o2 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E6B500; }
h3.l { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #4BCE54; }
h3.lg { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #0048E3; }
h3.e { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; font-style: italic; }

.gray { background: #000000; padding: 20px; }

h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: Garamond, Georgia, "Times New Roman";
letter-spacing: .5em; font-weight: 100; color: #FFFFFF; border-top: 1px solid #CCCCCC; border-bottom: #CCCCCC 1px solid; width: 600px; text-align: center; }

h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: Verdana, Arial, Helvetica, sans-serif; }
h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }

h3.y1 { float: left; font-size: 500%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 0;
font-weight: 0; color: #FF0000; }

h3.y2 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #FF0000; }

h3.y3 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #FF0000; }

h3.y4 { float: left; font-size: 300%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #FF0000; }

h3.y5 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #FF0000; }

h3.y6 { float: left; font-size: 350%; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #FF0000; }

p.tag a { font-size: 85%; text-align: center; color: #FF3300; }
p.tag a:hover { background: #FFFF66; }

Source Code to Run [www.52css.com]

html, body { width: 75%; }

h3.line_drop { font-family:"Trebuchet MS", Garamond, Georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;
letter-spacing: -2px; }

h3.elegant { letter-spacing: -2px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }

h3.handwriting { font-style: italic; font-weight: bold; font-family: "Comic Sans MS"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"Trebuchet MS", Garamond, Georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }

h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "Comic Sans MS"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }

h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #FFFF66; }

h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }
h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}

p.letters { line-height: .64em; letter-spacing: -2px; font-family: "Courier New", Courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}

h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; }

h3.newspaper span { font-family: Georgia, "Times New Roman", Times, serif; }

h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; font-variant: small-caps;}

h3.funky { font-family: "Trebuchet MS", Garamond, Georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}
h3.funky span { letter-spacing: 5px;}

h3.el { font-family: Verdana, Arial, Helvetica, sans-serif; color: #BBBBBB; border-bottom: #CCCCCC 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}

h3.num_blend {  font-size: 36px; font-weight: 100;}

h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}

h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "Courier New", Courier, monospace; font-weight: 100;}

h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: Impact, Arial, Verdana; text-transform: uppercase; border-bottom: #CC0000 10px solid; font-weight: 100; }
h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: Impact, Arial, Verdana; text-transform: uppercase; position: relative; font-weight: 100;  }

h3.g { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #133BC1; }
h3.o1 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; }
h3.o2 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E6B500; }
h3.l { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #4BCE54; }
h3.lg { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #0048E3; }
h3.e { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; font-style: italic; }

.gray { background: #000000; padding: 20px; }

h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: Garamond, Georgia, "Times New Roman"; 
letter-spacing: .5em; font-weight: 100; color: #FFFFFF; border-top: 1px solid #CCCCCC; border-bottom: #CCCCCC 1px solid; width: 600px; text-align: center; }

h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: Verdana, Arial, Helvetica, sans-serif; }
h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }

h3.y1 { float: left; font-size: 500%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 0;
font-weight: 0; color: #FF0000; }

h3.y2 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #FF0000; }

h3.y3 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #FF0000; }

h3.y4 { float: left; font-size: 300%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #FF0000; }

h3.y5 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #FF0000; }

h3.y6 { float: left; font-size: 350%; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #FF0000; }

p.tag a { font-size: 85%; text-align: center; color: #FF3300; }
p.tag a:hover { background: #FFFF66; }

</style>

</head>

<body>

<br />

<h3 class="reflect_1">KINDEK INC</h3> 
<h3 class="reflect_2">KINDEK INC</h3>
<h3 class="line_drop">Web Design Rockstarz</h3>

<h3 class="elegant">The chapple De La Ross Johnson</h3>

<h3 class="handwriting">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting2">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting3">Don't forget to turn off the lights when you leave!</h3>

<h3 class="capital">C<span>aptivating, </span>C<span>reative</span></h3>

<h3 class="capital">L<span>ogan's </span>L<span>itigation</span></h3>

<h3 class="capital">B<span>est </span>B<span>uilding</span></h3>

<p class="letters">Potential use for magazine style typography
Close line height and letter spacing, 
 almost connected lines...</p>

<p class="letters2">Potential use for magazine style typography
Close line height and letter spacing, 
 almost connected lines...</p>

<p class="letters3">Potential use for magazine style typography
Close line height and letter spacing, 
 almost connected lines...</p>

<h3 class="newspaper"><span>Webdesign</span> Times</h3>

<h3 class="newspaper2">Webdesign Times</h3>

<h3 class="funky">Fun<strong><em>k</em></strong>y <br /><span> We<em>b<strong>d</strong></em>esign!</span></h3>

<h3 class="el">SATURDAY MARCH 19TH 2046</h3>

<h3 class="scaps">More Typerighter Style, less cluttered.</h3>

<h3 class="gr">Gray's</h3><h3 class="gr2"> Anatomy</h3>

<div class="gray">
	<h3 class="gray2">Gray's Anatomy</h3>

</div>

<p class="tag"><a href="<a href="http://www.52css.com" target="_blank">http://www.52css.com</a>">Typography Examples by Ross Johnson - www.52css.com</a></p>

</html>

[ 可先修改部分代码再运行查看效果 ]

CSS Web Design 我爱CSS - CSS布局实例

DivCSS网页布局中几个漂亮的Button按钮

DivCSS实例教程：表单Select样式美化经典案例

CSS实例：水平居中和垂直居中的多种解决方案

CSS网页布局实例：div高度随窗口变化而变化

http://52css.com">我爱CSS DivCSS教程 - 52CSS.com

http://w3cbbs.com/">DivCSS网页布局 W3C标准 - W3Cbbs.com

CSS实例：Vista风格的CSS二级菜单（附下载）

CSS的expression判断表达式设置input样式

CSS之绝对定位（position: fixed）的一个案例

Reset CSS 淘宝CSS框架研究

一款非常经典 纯CSS下拉导航菜单

CSS高级文字排版的实例

一款非常经典纯CSS下拉导航菜单