|
今天我们来学习如何使用有趣的自定义标记来布局页面有的朋友可能有这样的疑问自己随便定义的标记浏览器怎么能正确的认识呢？ 这里我们就要用到文档的命名空间那么命名空间又是指什么？ 大家知道XML有一个很大的特点就是他的可扩展性你可以创建你自己的标记或使用别人创建的标记这里就存在了一个问题即你所定义的标 记和别人定义的标识有可能相同但他们各自所表示的意义却不同 打一个形象的比喻比如有两个人名字都叫蓝色一个人在经典一个人在天涯如果你要找他们就可以这样说明天涯:蓝色经典:色这样就不会混淆了 命名空间的意义就是要告诉别人这个文档是属于谁的xhtml是html向xml过渡的产物这里他也提供给了我们一个命名空间 看下面的例子我们命名一个名称为blueidea的前缀是用来说明命名空间的urlxmlns是指xhtml namespace <html xmlns:blueidea=> 有意思的是我们甚至可以用中文来做标记(用中文可能会出现编码问题)这样的文档看起来真的是一目了然 下面我们定义一个标记叫做新闻标题格式因该是blueidea:新闻标题 <blueidea:新闻标题>最新更新</blueidea:新闻标题> 然后用CSS定义他 格式: blueidea\:新闻标题 { } 需要注意的是我们自定义的标记默认属性有点象aspan等内联元素 下面是我写的一个基本布局(兼容IE FF OP)是不是很有意思象XML其实本来自定义标记就是用在xml上地大家赶紧自己来试一下吧因为很多东西都是自己从实践中摸索出来的 运行代码框 <!DOCTYPE html PUBLIC //WC//DTD XHTML Strict//EN strictdtd> <html xmlns:webjx=> <style> * { padding:; margin: } body{ textalign:center; } webjx\:页面上部 { position:relative; display:block; margin: auto; width:px; height:px; borderbottom:px solid orange; background:black } webjx\:主体部分 { display:block; margin: auto; width:px; textalign:left; background:#eee } webjx\:主体部分 webjx\:主体左侧 { display:block; width:px; height:px; borderright:px solid #ddd; background:#fff } webjx\:新闻标题 { display:block; paddingleft:px; height:px; lineheight:px; background:#ccc } webjx\:新闻列表 { display:block; liststyle:none; height:px; background:#eee } webjx\:页面下部 { display:block; margin: auto; width:px; height:px; background:black } webjx\:站点标志 { position:absolute; top:px; left:px; paddingtop:px; display:block; width:px; height:px; background:#eee } webjx\:导航菜单 { position:absolute; top:px; left:px; display:block; } webjx\:导航菜单 a { float:left; marginleft:px; width:px; height:px; font:px/px 宋体; color:white; textdecoration:none; border:px solid orange; borderbottom:; } webjx\:导航菜单 a:hover { border:px solid #FDE; borderbottom:; } webjx\:页面 { border:px solid #FDE; } </style> </head> <body> <webjx:页面上部> <webjx:站点标志><img src=_//gif alt=网页教学网/></webjx:站点标志> <webjx:导航菜单> <a #>home</a> <a #>work</a> <a #>contact</a> </webjx:导航菜单> </webjx:页面上部> <webjx:主体部分> <webjx:主体左侧> <webjx:新闻标题>最新更新</webjx:新闻标题> <webjx:新闻列表> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> </webjx:新闻列表> </webjx:主体左侧> </webjx:主体部分> <webjx:页面>ssssss</webjx:页面> <webjx:页面>ssssss</webjx:页面> <webjx:页面>ssssss</webjx:页面> <webjx:页面下部></webjx:页面下部> </body> </html> |
