学习完全掌握纯CSS布局网页(2)
发布时间:2008-05-28 17:14:00
使用选择器是件美妙的事
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。
另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。
一个仔细结构化的HTML页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用blockquote标签,只要使用p标签,并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签,margin是表现属性,前者属于HTML,后者属于CSS。(这就是结构于表现的 相分离.)
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中, table就是表格,而不是其他什么(比如被用来布局和定位)。
亲自实践一下结构化
上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:
<div id="navcontainer">
<div id="globalnav">
<ul>a list</ul>
</div>
<div id="subnav">
<ul>another list</ul>
</div>
</div>
嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#navcontainer一个规则让列表居右,再给#globalnav一个规则让列表居左,而给#subnav的list另一个完全不同的表现。
猜你喜欢
- mysql是linux平台下最流行的数据库系统,今天介绍的是mysql的安装及简单的操作方法!groupadd mysql //建立mysq
- 要使数据库具备更强的抵御侵犯的能力,你要采取几步措施。有些措施只是良好的服务器管理的一部分,如拥有SQL Server最新的补丁,其他则包括
- 使用ewebeditor作为后台编辑器时,尤其是一个页面中使用多次该编辑器时,在提交数据时,可能会遇到数据被重复提交的情况。搜索找来一些解决
- 文章主要描述的是SQL Server到DB2连接服务器的正确实现过程,以及对其在实际操作中所要用到的实际操作环境的描述,以下就是对SQL S
- 通常,在完成了一件网页设计后,设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行
- 比如 <div><img .../></div>想通过对这个div设置透明度来达到调整图片的透明度如果不
- 把程序放到一个文件中,然后包含再call就可以了。(JMAIL4.3)<%'警告函数sub w_msg(messag
- 今天网页调试的时候在线订单出现错误:Server 对象 错误 'ASP 0178
- 《色彩解答》系列之一 色彩层次这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。我们在使用色彩的时候不可能把所有的色彩都做得
- 首先.还是看效果.实现对文本域textarea中文字字数的限制。然后.米了...看文件.里面写的很清楚了.下面这个是单独的效果..提示用al
- 系列目录:1. 服务器XMLHTTP(Server XMLHTTP in ASP)基础2. 
- javascript中的数组对象捆绑了强大的方法因此它可以用很简短的代码实现强大的数组操作而这些功能要C或者c++实现的话可能需要花费几倍的
- 对于access数据库的日期时间类型字段存储的日期,直接从数据库中读出显示的效果是带时间的如,2009-06-13 18:00 ,如果只是希
- 上个月,我写了一篇关于微软如何在向jQuery贡献代码的文章,也谈到了在第一批贡献的代码中的一些功能:jQuery模板和数据链接支持.今天,
- 小毅的blog:http://andymao.com/前天网上有个朋友发给我一个页面让我帮她看一下为什么鼠标翻转实现不了。我打开源文件看了一
- 如果MySQL服务器启用了二进制日志,你可以使用mysqlbinlog工具来恢复从指定的时间点开始 (例如,从你最后一次备份)直到现在或另一
- 在IE7还不支持counter 和increment 属性之前,我从来没有用过它们,也从来没有使用过:before 伪元素和content
- 采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值&g
- 内连接(inner join)。 外连接: 全连接(full join)、左连接(left join)、右连接(right join)。 交
- SQL*DBA命令的安全性: 如果您没有SQL*PLUS应用程序,您也可以使用SQL*DBA作SQL查权限相关的命令只能分配给Oracle软