当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-09-06

    本文导语:  今天我们来学习,如何使用有趣的自定义标记来布局页面。有的朋友可能有这样的疑问,自己随便定义的标记浏览器怎么能正确的认识呢? 这里我们就要用到文档的命名空间,那么命名空间又是指什么? 大家知道XML有一个很大...

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

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

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

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

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

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

看下面的例子,我们命名一个名称为blueidea的前缀,http://bbs.blueidea.com是用来说明命名空间的url。xmlns是指xhtml namespace 

代码如下:

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

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

代码如下:
最新更新 
然后用CSS定义他 ,格式:  


blueidea:新闻标题 { 

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

下面是我写的一个基本布局,(兼容IE5、6、7 FF2 OP9)是不是很有意思,象XML,其实本来自定义标记就是用在xml上地。大家赶紧自己来试一下吧,因为很多东西都是自己从实践中摸索出来的。
* { padding:0; margin:0 } body{ text-align:center; } blueidea:页面上部 { position:relative; display:block; margin:0 auto; width:700px; height:150px; border-bottom:3px solid orange; background:black } blueidea:主体部分 { display:block; margin:0 auto; width:700px; text-align:left; background:#eee } blueidea:主体部分 blueidea:主体左侧 { display:block; width:220px; height:500px; border-right:1px solid #ddd; background:#f3f3f3 } blueidea:新闻标题 { display:block; padding-left:5px; height:25px; line-height:25px; background:#ccc } blueidea:新闻列表 { display:block; list-style:none; height:160px; background:#eee } blueidea:页面下部 { display:block; margin:0 auto; width:700px; height:100px; background:black } blueidea:站点标志 { position:absolute; top:20px; left:20px; padding-top:2px; display:block; width:90px; height:31px; background:#eee } blueidea:导航菜单 { position:absolute; top:124px; left:300px; display:block; } blueidea:导航菜单 a { float:left; margin-left:2px; width:60px; height:25px; font:12px/25px 宋体; color:white; text-decoration:none; border:1px solid orange; border-bottom:0; } blueidea:导航菜单 a:hover { border:1px solid #FDE201; border-bottom:0; } blueidea:页面 { border:1px solid #FDE201; } home work contact 最新更新
  • ·aaaaaaaaaaa
  • ·aaaaaaaaaaa
  • ·aaaaaaaaaaa
  • ·aaaaaaaaaaa
  • ·aaaaaaaaaaa
  • ·aaaaaaaaaaa
  • ssssss ssssss ssssss

        
     
     

    您可能感兴趣的文章:

  • php使用strip_tags从字符串中去除html标记
  • 可以在 <% %>里面使用HTML 标记吗?
  • 正确使用带有"g"标记的javascript正则表达式
  • DBA应该知道的一些关于SQL Server跟踪标记的使用
  • 新手问题之一:是不是所有的SWING容器都要使用布局管理器啊?
  • WEB标准网页布局中尽量不要使用的HTML标签
  • 使用JQUERY进行后台页面布局控制DIV实现左右式
  • CSS整体布局声明的一些使用技巧
  • Android中使用include标签和merge标签重复使用布局
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • winform 使用Anchor属性进行界面布局的方法详解
  • android Activity相对布局的使用方法
  • 使用CSS框架布局的缺点和优点小结
  • Java 最重要布局管理器GridBagLayout的使用方法
  • 如何在android中使用html作布局文件
  • 九宫图比较常用的多控件布局(GridView)使用介绍
  • Java布局管理器使用方法
  • ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • HTML 5 <article> 标签定义用法及使用情景举例
  • php定义数组和使用示例(php数组的定义方法)
  • Makefile中的变量先使用后定义的问题
  • 已经定义好了一个数组,使用中能否改变长度?
  • 请问自己定义的对象如何使用Hashtable存取?
  • linux logrotate使用-自定义日志文件名
  • android intent使用定义标题
  • java的应用程序中如何定义一个全局变量,在程序的任何地方都可以修改使用?
  • C语言中宏定义使用的小细节
  • Linux上无法使用root、mysql等系统预定义的用户以ftp连结
  • 使用配置类定义Codeigniter全局变量
  • linux内核怎么定义汇编全局变量及在c文件中使用这个变量?有关0。11下的字符回显
  • zf框架的校验器使用使用示例(自定义校验器和校验器链)
  • Python过滤函数filter()使用自定义函数过滤序列实例
  • 急:unix的shell脚本中,定义了一个函数getDate(),在后面的执行命令参数用要使用这个函数的返回值,应该怎么写?
  • 在linux下使用POSIX多线程库开发应用程序的时候需要定义宏_POSIX_C_SOURCE和_REENTRANT吗?
  • 新手请教Qt下自定义类的使用问题?
  • 移动开发 iis7站长之家
  • 在linux下的终端下使用自定义的系统调用(紧急~~)
  • 请问如何在一个函数内部定义的一个新类中使用函数里声明的变量
  • 使用自定义.jar压缩文档的问题!
  • C++ I/O 成员 tellg():使用输入流读取流指针
  • 在测试memset函数的执行效率时,分为使用Cash和不使用Cash辆种方式,该如何控制是否使用缓存?
  • C++ I/O 成员 tellp():使用输出流读取流指针
  • 求ibm6000的中文使用手册 !从来没用过服务器,现在急需使用它,不知如何使用! 急!!!!!
  • Python不使用print而直接输出二进制字符串
  • 请问:在使用oracle数据库作开发时,是使用pro*c作开发好些,还是使用库函数如oci等好一些啊?或者它们有什么区别或者优缺点啊?
  • Office 2010 Module模式下使用VBA Addressof
  • 急求结果!!假设一个有两个元素的信号量集S,表示了一个磁带驱动器系统,其中进程1使用磁带机A,进程2同时使用磁带机A和B,进程3使用磁带机B。
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • c#中SAPI使用总结——SpVoice的使用方法


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3