返回列表 回复 发帖
May5th

超级版主

Rank: 8Rank: 8

UID
80205 
帖子
2760 
威望
344 点 
魅力
320  
◎心币◎
154 ＄ 
推广积分
1075 分 
充值币
0 枚 
性别
男 

社区帅哥奖超级版主奖空间花神奖空间最高人气奖空间创作奖爱心帮助奖酷哥专用章社区最佳懒人奖文学幽默奖最佳活跃奖QQ空间社区周年纪念章（保守价格：1000心币）情人节纪念奖支持奥运金牛座
楼主
打印
tT
发表于 2007-1-15 10:00 | 只看该作者

使用有趣的自定义标记来布局页面

定义标记, 布局页面, 浏览器, 空间, 疑问
今天我们来学习,如何使用有趣的自定义标记来布局页面。有的朋友可能有这样的疑问，自己随便定义的标记浏览器怎么能正确的认识呢？
这里我们就要用到文档的命名空间，那么命名空间又是指什么？
大家知道XML有一个很大的特点就是他的可扩展性。你可以创建你自己的标记或使用别人创建的标记，这里就存在了一个问题，即你所定义的标
记和别人定义的标识有可能相同，但他们各自所表示的意义却不同。
打一个形象的比喻，比如有两个人名字都叫蓝色，一个人在经典，一个人在天涯，如果你要找他们就可以这样说明，天涯:蓝色、经典:色，这样就不会混淆了。
命名空间的意义就是要告诉别人这个文档是属于谁的。xhtml是html向xml过渡的产物,这里他也提供给了我们一个命名空间。
看下面的例子，我们命名一个名称为blueidea的前缀，http://bbs.blueidea.com是用来说明命名空间的url。xmlns是指xhtml namespace
<html xmlns:blueidea="http://bbs.blueidea.com">
有意思的是我们甚至可以用中文来做标记(用中文可能会出现编码问题)。这样的文档看起来真的是一目了然。
下面我们定义一个标记叫做“新闻标题”格式因该是“blueidea:新闻标题”
<blueidea:新闻标题>最新更新</blueidea:新闻标题>
然后用CSS定义他 ，格式:

blueidea\:新闻标题 {
}
需要注意的是我们自定义的标记默认属性，有点象a、span等内联元素。
下面是我写的一个基本布局，(兼容IE5、6、7 FF2 OP9)是不是很有意思，象XML，其实本来自定义标记就是用在xml上地。大家赶紧自己来试一下吧，因为很多东西都是自己从实践中摸索出来的。
运行代码框:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns:blueidea="http://bbs.blueidea.com">
  3. <style>
  4. * {
  5.         padding:0;
  6.         margin:0
  7.         }
  8. body{
  9.         text-align:center;
  10.         }
  11. blueidea\:页面上部 {
  12.         position:relative;
  13.         display:block;
  14.         margin:0 auto;
  15.         width:700px;
  16.         height:150px;
  17.         border-bottom:3px solid orange;
  18.         background:black
  19.         }
  20. blueidea\:主体部分 {
  21.         display:block;
  22.         margin:0 auto;
  23.         width:700px;
  24.         text-align:left;
  25.         background:#eee       
  26.         }
  27. blueidea\:主体部分 blueidea\:主体左侧 {
  28.         display:block;
  29.         width:220px;
  30.         height:500px;
  31.         border-right:1px solid #ddd;
  32.         background:#f3f3f3
  33.         }
  34. blueidea\:新闻标题 {
  35.         display:block;
  36.         padding-left:5px;
  37.         height:25px;
  38.         line-height:25px;
  39.         background:#ccc
  40.         }
  41. blueidea\:新闻列表 {
  42.         display:block;
  43.         list-style:none;

  45.         height:160px;
  46.         background:#eee
  47.         }
  48. blueidea\:页面下部 {
  49.         display:block;
  50.         margin:0 auto;
  51.         width:700px;
  52.         height:100px;
  53.         background:black
  54.         }
  55. blueidea\:站点标志 {
  56.         position:absolute;
  57.         top:20px;
  58.         left:20px;
  59.         padding-top:2px;
  60.         display:block;
  61.         width:90px;
  62.         height:31px;
  63.         background:#eee       
  64.         }
  65. blueidea\:导航菜单 {
  66.         position:absolute;
  67.         top:124px;
  68.         left:300px;
  69.         display:block;
  70.         }
  71. blueidea\:导航菜单 a {
  72.         float:left;
  73.         margin-left:2px;
  74.         width:60px;
  75.         height:25px;
  76.         font:12px/25px 宋体;
  77.         color:white;
  78.         text-decoration:none;
  79.         border:1px solid orange;
  80.         border-bottom:0;
  81.         }
  82. blueidea\:导航菜单 a:hover {
  83.         border:1px solid #FDE201;
  84.         border-bottom:0;
  85.         }
  86. blueidea\:页面 {
  87.         border:1px solid #FDE201;
  88.         }
  89. </style>
  90. </head>
  91. <body>
  92. <blueidea:页面上部>
  93. <blueidea:站点标志><img src="http://bbs.blueidea.com/images/blue/logo.gif" alt="蓝色理想"/></blueidea:站点标志>

  95. <blueidea:导航菜单>
  96. <a href="#">home</a>
  97. <a href="#">work</a>
  98. <a href="#">contact</a>
  99. </blueidea:导航菜单>

  101. </blueidea:页面上部>


  104. <blueidea:主体部分>
  105. <blueidea:主体左侧>

  107. <blueidea:新闻标题>最新更新</blueidea:新闻标题>

  109. <blueidea:新闻列表>
  110. <li>·aaaaaaaaaaa</li>
  111. <li>·aaaaaaaaaaa</li>
  112. <li>·aaaaaaaaaaa</li>
  113. <li>·aaaaaaaaaaa</li>
  114. <li>·aaaaaaaaaaa</li>
  115. <li>·aaaaaaaaaaa</li>
  116. </blueidea:新闻列表>

  118. </blueidea:主体左侧>




  123. </blueidea:主体部分>

  125. <blueidea:页面>ssssss</blueidea:页面>
  126. <blueidea:页面>ssssss</blueidea:页面>
  127. <blueidea:页面>ssssss</blueidea:页面>
  128. <blueidea:页面下部></blueidea:页面下部>
  129. </body>
  130. </html>
复制代码


[ 本帖最后由 magic 于 2007-1-19 07:48 编辑 ]
sss.JPG
收藏 分享 评分
                                                                                                                  
回复 引用

订阅 TOP

返回列表