使用有趣的自定义标记来布局页面
作者:snwebsite 发布时间:2013-11-10 19:07:48
今天我们来学习,如何使用有趣的自定义标记来布局页面。有的朋友可能有这样的疑问,自己随便定义的标记浏览器怎么能正确的认识呢?
这里我们就要用到文档的命名空间,那么命名空间又是指什么?
大家知道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上地。大家赶紧自己来试一下吧,因为很多东西都是自己从实践中摸索出来的。
运行代码框
[Ctrl+A 全部选择 ]


猜你喜欢
- 用python实现文件夹下的成批文件格式转换我们对于文件转换的需求很大,甚至于对于图片的格式,JPG和PNG格式在肉眼看来都没什么差别,但是
- 1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。代码:div{ b
- 温馨提示,只想看图的画直接跳到最后一节拉格朗日方程此前所做的一切三体和太阳系的动画,都是基于牛顿力学的,而且直接对微分进行差分化,从而精度非
- 一、mac下安装MySQL数据库1.下载MySQL数据库下载地址:访问MySQL的官网http://www.mysql.com/downlo
- 在python 中使用datatime库,可以用来获取现在日期和时间一、datetime库简介datetime有五个类:datetime.d
- 一、DSE算法背景介绍1. DES的采用1979年,美国银行协会批准使用1980年,美国国家标准局(ANSI)赞同DES作为私人使用的标准,
- 使用webpack搭建单页面程序十分常见,但在实际开发中我们可能还会有开发多页面程序的需求,因此我研究了一下如何使用webpack搭建多页面
- 前言今天教大家用wrodcloud模块来生成词云,我读取了一篇小说并生成了词云,先看一下效果图:效果图一:效果图二:根据效果图分析的还是比较
- 本文实例讲述了Python操作MySQL简单实现方法。分享给大家供大家参考。具体分析如下:一、安装:安装MySQL安装MySQL不用多说了,
- 一般采用的方法:self.window = Qdialog() # 实例化self.window.show() # 显示界面用这种方法只能打
- 学习要点:SQL之-建库、建表、建约束、关系SQL基本语句大全.txt举得起放得下叫举重,举得起放不下叫负重。头要有勇气,抬头要有底气。学习
- 本文做的是基于opencv将视频帧转成图片输出,由于一个视频包含的帧数过多,经常我们并不是需要它的全部帧转成图片,因此我们希望可以设置每隔多
- #{}会将传入的数据当成一个字符串,会对自动传入的数据加一个双引号order by #{userId} 这里假如us
- 本文实例讲述了Python定义二叉树及4种遍历方法。分享给大家供大家参考,具体如下:Python & BinaryTree1. Bi
- 前言现在在疫情阶段,想找一份不错的工作变得更为困难,很多人会选择去网上看招聘信息。可是招聘信息有一些是错综复杂的。而且不能把全部的信息全部罗
- 环境介绍python3.5.2 64位django 1.10.3apache 2.4 64位windows 10重点在apache上。pyt
- 上篇更新到pygame实现俄罗斯方块游戏(AI篇2) ,原本应该继续做优化,不过考虑到完成游戏完整性,这张就先把对战做好。一、对战的方块管理
- 本文实例为大家分享了pygame实现非图片按钮效果的具体代码,供大家参考,具体内容如下按钮类程序# -*- coding=utf-8 -*-
- 什么是合并多行字符串(连接字符串)呢,例如: SQL> desc test; Name Type Nullable Default C
- 概述:前段时间在跟其他公司DBA交流时谈到了mysql跟PG之间在多表关联查询上的一些区别,相比之下mysql只有一种表连接类型:嵌套循环连