|
源代码网推荐
我们可以自定义标记来布局页面。
有的朋友可能有这样的疑问，自己随便定义的标记浏览器怎么能正确的认识呢？
这里我们就要用到文档的命名空间，那么命名空间又是指什么？
大家知道XML有一个很大的特点就是他的可扩展性。你可以创建你自己的标记或使用别人创建的标记，这里就存在了一个问题，即你所定义的标记和别人定义的标识有可能相同，但他们各自所表示的意义却不同。
打一个形象的比喻，比如有两个人名字都叫webjx_com，一个人在中国，一个人在外国，如果你要找他们就可以说，中国的，外国的，这样就不会混淆了。
命名空间的意义就是要告诉别人这个文档是属于谁的。xhtml是html向xml过渡的产物,这里他也提供给了我们一个命名空间。
看下面的例子，我们命名一个名称为webjx_com的前缀，http://www.webjx.com是用来说明命名空间的url。xmlns是指xhtml namespace。
有意思的是我们甚至可以用中文来做标记(用中文可能会出现编码问题)。这样的文档看起来真的是一目了然。
下面我们定义一个标记叫做“新闻标题”格式因该是“webjx_com:新闻标题”
这里放内容
然后用CSS定义他 ，格式:
webjx_com:新闻标题 {}
需要注意的是我们自定义的标记默认属性，有点象a、span等内联元素。
下面是我写的一个基本布局，(兼容IE5、6、7 FF2 OP9)是不是很有意思，象XML，其实本来自定义标记就是用在xml上地。大家赶紧自己来试一下吧，因为很多东西都是自己从实践中摸索出来的。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
源代码网推荐<html xmlns:webjx_com="http://www.webjx.com">
源代码网推荐<style>
源代码网推荐* {
源代码网推荐 padding:0;
源代码网推荐 margin:0
源代码网推荐 }
源代码网推荐body{
源代码网推荐 text-align:center;
源代码网推荐 }
源代码网推荐webjx_com:页面上部 {
源代码网推荐 position:relative;
源代码网推荐 display:block;
源代码网推荐 margin:0 auto;
源代码网推荐 width:700px;
源代码网推荐 height:150px;
源代码网推荐 border-bottom:3px solid #000;
源代码网推荐 background:#3D6DB5;
源代码网推荐 }
源代码网推荐webjx_com:主体部分 {
源代码网推荐 display:block;
源代码网推荐 margin:0 auto;
源代码网推荐 width:700px;
源代码网推荐 text-align:left;
源代码网推荐 background:#eee
源代码网推荐 }
源代码网推荐webjx_com:主体部分 webjx_com:主体左侧 {
源代码网推荐 display:block;
源代码网推荐 width:220px;
源代码网推荐 height:500px;
源代码网推荐 border-right:1px solid #000;
源代码网推荐 background:#f3f3f3
源代码网推荐 }
源代码网推荐webjx_com:新闻标题 {
源代码网推荐 display:block;
源代码网推荐 padding-left:5px;
源代码网推荐 height:25px;
源代码网推荐 line-height:25px;
源代码网推荐 background:#ccc
源代码网推荐 }
源代码网推荐webjx_com:新闻列表 {
源代码网推荐 display:block;
源代码网推荐 list-style:none;
height:160px;
源代码网推荐 background:#eee
源代码网推荐 }
源代码网推荐webjx_com:页面下部 {
源代码网推荐 display:block;
源代码网推荐 margin:0 auto;
源代码网推荐 padding-top:6px;
源代码网推荐 width:700px;
源代码网推荐 height:30px;
源代码网推荐 background:#3D6DB5
源代码网推荐 }
源代码网推荐webjx_com:站点标志 {
源代码网推荐 position:absolute;
源代码网推荐 top:10px;
源代码网推荐 left:10px;
源代码网推荐 padding-top:2px;
源代码网推荐 display:block;
源代码网推荐 width:240px;
源代码网推荐 height:60px;
源代码网推荐 }
源代码网推荐webjx_com:导航菜单 {
源代码网推荐 position:absolute;
源代码网推荐 top:124px;
源代码网推荐 left:300px;
源代码网推荐 display:block;
源代码网推荐 }
源代码网推荐webjx_com:导航菜单 a {
源代码网推荐 float:left;
源代码网推荐 margin-left:5px;
源代码网推荐 width:88px;
源代码网推荐 height:25px;
源代码网推荐 font:12px/25px 宋体;
源代码网推荐 color:white;
源代码网推荐 text-decoration:none;
源代码网推荐 border:1px solid #000;
源代码网推荐 border-bottom:0;
源代码网推荐 }
源代码网推荐webjx_com:导航菜单 a:hover {
源代码网推荐 border:1px solid #fff;
源代码网推荐 border-bottom:0;
源代码网推荐 }
源代码网推荐webjx_com:页面 {
源代码网推荐 border:1px solid #f00;
源代码网推荐 }
源代码网推荐</style>
源代码网推荐</head>
<body>
源代码网推荐<webjx_com:页面上部>
源代码网推荐<webjx_com:站点标志><img src="http://www.zzchn.com/images/logo.gif" alt="webjx.com" title="网页教学网" /></webjx_com:站点标志>
源代码网推荐<webjx_com:导航菜单>
源代码网推荐<a href="http://www.webjx.com/">Div+CSS教程</a>
源代码网推荐<a href="http://www.webjx.com/">CSS布局实例</a>
源代码网推荐<a href="http://www.webjx.com/">CSS2.0教程</a>
源代码网推荐<a href="http://www.webjx.com/">XHTML教程</a>
源代码网推荐</webjx_com:导航菜单>
源代码网推荐</webjx_com:页面上部>
<webjx_com:主体部分>
源代码网推荐<webjx_com:主体左侧>
源代码网推荐<webjx_com:新闻标题>webjx.com</webjx_com:新闻标题>
源代码网推荐<webjx_com:新闻列表>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐<li>webjx.com</li>
源代码网推荐</webjx_com:新闻列表>
源代码网推荐</webjx_com:主体左侧>
源代码网推荐</webjx_com:主体部分>
<webjx_com:页面>webjx.com</webjx_com:页面>
源代码网推荐<webjx_com:页面>webjx.com</webjx_com:页面>
源代码网推荐<webjx_com:页面>webjx.com</webjx_com:页面>
<webjx_com:页面下部>webjx.com</webjx_com:页面下部>
</body>
源代码网推荐</html>
源代码网供稿. | 
