您的位置：首页 > Web前端 > HTML

XHTML 的一个实例, 其实这个实例的方法已经可以实现所有要实现的布局. by Emerald 绿色学院 - Green Institute

2005-02-25 07:46 1051 查看

没你看到的那么长的 CSS 类, 那些类是我别的定义用到的,

真正用到的类是:

/********* header *********/

div#h {

margin:0px;

width:100%;

background-color:ffffff;

height:98px;

}

div#h ul {

text-align:center;

FLOAT: left;

margin:0px;

}

div#h li{

LIST-STYLE-TYPE: none;

DISPLAY: block;

FLOAT: left;

margin:0px;

}

div#h li#wl{

width:30%;

margin:0px;
}

div#h li#wr{

width:70%;

text-align:right;

margin:0px;

FLOAT: right;

}

div#h li div#cm{

word-spacing: 3px;

padding-right: 2px;

}

div#h li div#org{

padding-top: 20px;

padding-left: 20px;

color: #F3BB97;

text-align:center;

}

div#h li div#pt{

text-align:right;

word-spacing: 8px;

white-space: nowrap;

margin:0px;

padding:0px;

font-size:10px;

font:Verdana, Arial, Helvetica, sans-serif;

padding-top:18px;

padding-right: 2px;

}

效果:

首页
新闻
下载
源码
图片
文章
图书
交流
技术
0Day
辞典
搜客
网摘
工具
链接
地图
ODP
RSS
联系

祝你新春快乐！万事如意！在新的一年里身体健康！事业有成！芝麻开花节节高！

P5
P6
P7
P8
P9
P10

CodeConvert
PageRank
HZZPY
ASCII
Calendar
Weather
GoogleCheat
ZH
SEO-GI

Contact
RSS
ODP
Sitemap
Link
Tools
Digest
GHDB
Glossary
0Day
Forum
BBS
Books
Article
Photo
Xoops
Downloads
News
Home

CSS 文档:

<textarea name="textfield" cols="50%" rows="10" onMouseOver="this.focus()" onFocus="this.select()"><style type="text/css">

</style></textarea>

XHTML 文档:

<textarea name="textfield" cols="50%" rows="10" onMouseOver="this.focus()" onFocus="this.select()"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "TBD">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<meta http-equiv="content-language" content="zh-CN" />
<meta name="robots" content="index,follow" />
<meta name="keywords" content="绿色学院,Green Institute,绿色学院 - Green Institute,不听人间乐,绿色,学院,Green,Institute,绿色进化,绿色进化 E-Studio, E-Studio ,Emerald ,Xoops 站点,Xoops,Xoops 模块 ,Xoops 风格 ,Xoops 图标.XOOPS官方中文站点,XOOPS中文支持 ,Xoops 开发, Xoops 测试,e统天下,E统天下,rss 订阅,rss,订阅." />
<meta name="description" content="不听人间乐 , 想得到, 做得到 ." />
<meta name="rating" content="general" />
<meta name="author" content="Emerald" />
<meta name="copyright" content="Copyright © 2004-2005" />
<meta name="generator" content="Emerald" />
<title>绿色学院 - Green Institute - 不听人间乐 - 想得到 - 做得到 - Xoops</title>
</head>

<script language="JavaScript" type="text/JavaScript">

</script>

<div id="h">
<ul>
<li id="wl"><img src="/images/logo.gif" /></li>
<li id="wr">
<div id="cm">
<A href="http://blog.csdn.net/" target="_self">首页</a>
<A href="http://blog.csdn.net/modules/news/index.htm" target="_self">新闻</a>
<A href="http://blog.csdn.net/modules/wfdownloads/index.htm" target="_self">下载</a>
<A href="http://blog.csdn.net/modules/mydownloads/index.htm" target="_self">源码</a>
<A href="http://blog.csdn.net/modules/myalbum/index.htm" target="_self">图片</a>
<A href="http://blog.csdn.net/modules/AMS/index.htm" target="_self">文章</a>
<A href="http://blog.csdn.net/modules/booklists/index.htm" target="_self">图书</a>
<A href="http://blog.csdn.net/modules/xphpbbi/index.htm" target="_self">交流</a>
<A href="http://blog.csdn.net/modules/newbb/index.htm" target="_self">技术</a>
<A href="http://blog.csdn.net/modules/digest/index.htm" target="_self">0Day</a>
<A href="http://blog.csdn.net/modules/wordbook/index.htm" target="_self">辞典</a>
<A href="http://blog.csdn.net/modules/dictionary/index.htm" target="_self">搜客</a>
<A href="http://blog.csdn.net/modules/xmline/index.htm" target="_self">网摘</a>
<A href="http://blog.csdn.net/modules/GI-Tools/index.htm" target="_self">工具</a>
<A href="http://blog.csdn.net/modules/mylinks/index.htm" target="_self">链接</a>
<A href="http://blog.csdn.net/modules/sitemap/index.htm" target="_self">地图</a>
<A href="http://blog.csdn.net/modules/xoopsodp/" target="_self">ODP</a>
<A href="http://blog.csdn.net/modules/lykos_syndication/index.htm" target="_self">RSS</a>
<A href="http://blog.csdn.net/modules/liaise/index.htm" target="_self">联系</a>
</div>
<div id="org">祝你新春快乐！万事如意！在新的一年里身体健康！事业有成！芝麻开花节节高！</div>
<div id="pt">
<A href="http://blog.csdn.net/modules/Google_Cheat/index_5.htm" >P5</a>
<A href="http://blog.csdn.net/modules/Google_Cheat/index_6.htm" >P6</a>
<A href="http://blog.csdn.net/modules/Google_Cheat/index_7.htm" >P7</a>
<A href="http://blog.csdn.net/modules/Google_Cheat/index_8.htm" >P8</a>
<A href="http://blog.csdn.net/modules/Google_Cheat/index_9.htm" >P9</a>
<A href="http://blog.csdn.net/modules/Google_Cheat/index_10.htm" >P10</a>
<br/>
<A href="http://blog.csdn.net/modules/T-TechTools/index.htm">CodeConvert</a>
<A href="http://blog.csdn.net/modules/GI-Tools/GI-Tools_pagerank.htm">PageRank</a>
<A href="http://blog.csdn.net/modules/GI-Tools/GI-Tools_HZZPY.htm">HZZPY</a>
<A href="http://blog.csdn.net/modules/GI-Tools/GI-Tools_ASCIIArtist.htm">ASCII</a>
<A href="http://blog.csdn.net/modules/GI-Tools/GI-Tools_Calendar.htm">Calendar</a>
<A href="http://blog.csdn.net/modules/GI-Tools/GI-Tools_Weather.htm">Weather</a>
<a href="http://gi.2288.org:88/t/google/cheat_Google.php" >GoogleCheat</a>
<a href="http://zh.2288.org:66/index.htm">ZH</a>
<a href="http://seo.2288.org:99/index.htm" >SEO-GI</a>
</div>
</li>
</ul>
</div>
<div id="top-m-en">
<A href="http://blog.csdn.net/modules/liaise/index.htm" target="_self">Contact</a>
<A href="http://blog.csdn.net/modules/lykos_syndication/index.htm" target="_self">RSS</a>
<A href="http://blog.csdn.net/modules/xoopsodp/" target="_self">ODP</a>
<A href="http://blog.csdn.net/modules/sitemap/index.htm" target="_self">Sitemap</a>
<A href="http://blog.csdn.net/modules/mylinks/index.htm" target="_self">Link</a>
<A href="http://blog.csdn.net/modules/GI-Tools/index.htm" target="_self">Tools</a>
<A href="http://blog.csdn.net/modules/xmline/index.htm" target="_self">Digest</a>
<A href="http://blog.csdn.net/modules/dictionary/index.htm" target="_self">GHDB</a>
<A href="http://blog.csdn.net/modules/wordbook/index.htm" target="_self">Glossary</a>
<A href="http://blog.csdn.net/modules/digest/index.htm" target="_self">0Day</a>
<A href="http://blog.csdn.net/modules/newbb/index.htm" target="_self">Forum</a>
<A href="http://blog.csdn.net/modules/xphpbbi/index.htm" target="_self">BBS</a>
<A href="http://blog.csdn.net/modules/booklists/index.htm" target="_self">Books</a>
<A href="http://blog.csdn.net/modules/AMS/index.htm" target="_self">Article</a>
<A href="http://blog.csdn.net/modules/myalbum/index.htm" target="_self">Photo</a>
<A href="http://blog.csdn.net/modules/mydownloads/index.htm" target="_self">Xoops</a>
<A href="http://blog.csdn.net/modules/wfdownloads/index.htm" target="_self">Downloads</a>
<A href="http://blog.csdn.net/modules/news/index.htm" target="_self">News</a>
<A href="http://blog.csdn.net/" target="_self">Home</a>

</div>

</textarea>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xhtml calendar float books bbs header

相关文章推荐

新的分享

章节导航