知识大全使用有趣的自定义标记来布局页面

Posted 2022-07-19 知

篇首语：人生要事在于树立一个伟大的目标，并决心实现它。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全使用有趣的自定义标记来布局页面相关的知识，希望对你有一定的参考价值。

　　今天我们来学习如何使用有趣的自定义标记来布局页面有的朋友可能有这样的疑问自己随便定义的标记浏览器怎么能正确的认识呢？

　　这里我们就要用到文档的命名空间那么命名空间又是指什么？

　　大家知道XML有一个很大的特点就是他的可扩展性你可以创建你自己的标记或使用别人创建的标记这里就存在了一个问题即你所定义的标

　　记和别人定义的标识有可能相同但他们各自所表示的意义却不同

　　打一个形象的比喻比如有两个人名字都叫蓝色一个人在经典一个人在天涯如果你要找他们就可以这样说明天涯:蓝色经典:色这样就不会混淆了

　　命名空间的意义就是要告诉别人这个文档是属于谁的 x是向xml过渡的产物这里他也提供给了我们一个命名空间

　　看下面的例子我们命名一个名称为blueidea的前缀是用来说明命名空间的url xmlns是指x namespace

　　< xmlns:blueidea= >

　　有意思的是我们甚至可以用中文来做标记(用中文可能会出现编码问题) 这样的文档看起来真的是一目了然

　　下面我们定义一个标记叫做新闻标题格式因该是 blueidea:新闻标题

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

　　然后用CSS定义他格式:

　　blueidea\\:新闻标题

　　需要注意的是我们自定义的标记默认属性有点象a span等内联元素

　　下面是我写的一个基本布局 (兼容IE FF OP )是不是很有意思象XML 其实本来自定义标记就是用在xml上地大家赶紧自己来试一下吧因为很多东西都是自己从实践中摸索出来的

　　运行代码框

　　<!DOCTYPE PUBLIC //W C//DTD XHTML Strict//EN strict dtd >< xmlns:webjx= ><style>* padding: ; margin: body text align:center; webjx\\:页面上部 position:relative; display:block; margin: auto; width: px; height: px; border bottom: px solid orange; background:black webjx\\:主体部分 display:block; margin: auto; width: px; text align:left; background:#eee webjx\\:主体部分 webjx\\:主体左侧 display:block; width: px; height: px; border right: px solid #ddd; background:#f f f webjx\\:新闻标题 display:block; padding left: px; height: px; line height: px; background:#ccc webjx\\:新闻列表 display:block; list style:none;

　　height: px; background:#eee

　　webjx\\:页面下部 display:block; margin: auto; width: px; height: px; background:black webjx\\:站点标志 position:absolute; top: px; left: px; padding top: px; display:block; width: px; height: px; background:#eee webjx\\:导航菜单 position:absolute; top: px; left: px; display:block; webjx\\:导航菜单 a float:left; margin left: px; width: px; height: px; font: px/ px 宋体; color:white; text decoration:none; border: px solid orange; border bottom: ; webjx\\:导航菜单 a:hover border: px solid #FDE ; border bottom: ; 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:主体部分>

cha138/Article/program/Java/Javascript/201311/25455

知识大全 使用有趣的自定义标记来布局页面

知识大全使用有趣的自定义标记来布局页面