通过代码实例跟我学css样式单技术的应用实例第4部分——xhtml页面中的div和span标签的应用及实例

通过代码实例跟我学css样式单技术的应用实例第4部分——xhtml页面中的div和span标签的应用及实例内容摘要：

杨教授工作室，版权所有，盗版必究 ， 10/20 页 10 lia href= 系统注册 /a/li lia href= 找回密码 /a/li lia href= 在线帮助 /a/li /ul /div div id=webpagecontent/div div id=webstateinfo/div div id=webauthorarea/div /body /html 与该页面文件相关的 文件内容 /* 重置菜单栏中的 li 标签的属性的默认值 */ webmenubar ul li { display:inline。 margin:0 10px 0 0。 liststyletype:none。 } webmenubar ul li a { color: 333。 display:block。 float:left。 padding:5px。 } webmenubar ul li a:hover { background:eee。 color:black。 } 要将 li标签 中的 各个 元素水平排列 ，需要对该元素应用 float:left 属性定义项目。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 11/20 页 11 （ 3）在浏览器中的预览的效果 在 Macromedia Dreamweaver 工具中如何 编辑修改和设计 CSS 样式 通过帮助了解每个属性项目的含义 充分应用可视化方式进行设置，简化设计过程 上面的示例的另一种实现方法 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 12/20 页 12 （ 1） HTML 标签 div id=weblogo/div div id=webmenubar span a href= 返回首页 /a/span span a href= 登陆系统 /a/span spana href= 系统注册 /a/span spana href= 找回密码 /a/span spana href= 在线帮助 /a/span /div div id=webpagecontent/div div id=webstateinfo/div div id=webauthorarea/div （ 2）对应的 CSS 项目 webmenubar span a { color: 333。 display:block。 float:left。 padding:5px。 } webmenubar span a:hover { background:eee。 color:red。 } 因此，应用 span标签能够简化 CSS 样式项目的定义。 “ CSS+Div”并不是一定要采用 Div 标签 尽管 DIV 标签是块级元素标签，而 P 标签也是块级元素标 签。 在应用“ CSS+Div”实现页面的结构化时，并不是一定要采用 Div 标签，也可以应用其它的块级元素标签。 例如要分出几个文字内容块，不是一定要用 DIV 才叫 DIV 排版，比如如下的示例： 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 13/20 页 13 div文字块一 /div div文字块二 /div div文字块三 /div 也可以改为如下的实现方式，而且更合适： p文字块一 /p p文字块二 /p p文字块三 /p 理解 Web 表现和结构 （ 内容 ） 相分离 的意义 所有 HTML 和 XHTML 页面就是由“结构 （内容） 、表现和行为”这三方面组成 的。 抽象一点理解，内容是基础层，然后是附加上去结构层和表现层， 最 后再对它们做点“行为”控制。 内容（ Content）由 XHTML 标签中的 div或者其它包装内容的标签定义 （ 1） 内容就是页面实际要传达的真正信息 它主要 包含数据、文档或者图片 、 音乐、视频、文档 等 形式 —— 内容是页 面文档所 要传达的信息。 （ 2）某个页面利用表单包装内容的示例 form name=searchForm action= method=post input type=radio name=radioButtonEvent checked查看所有图书 input type=radio name=radioButtonEvent 精确搜索 input type=radio name=radioButtonEvent 关键字搜索 书名 ： input type=text name=title/td 作者 ： input type=text name=author 出版 社 ： input type=text name=bookconcern 请输入关键字 ： input type=text name=keyword input type=reset value=重新输入 input type=submit value=搜索 /form 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权所有，盗版必究 ， 14/20 页 14 （ 3）该内容在显示时所存在的主要问题 虽然，信息都呈现出来了，但是我们可以发现，这些信息只是很简单的堆砌在一起，阅读的时候觉得很不舒服，这样的话，信息就不能很明确的传达给读者了。 如果将页面内容进行整理 —— 标出它的标题、段落 或者分类显示 等，这样的结构有助于我们认清文字之间的逻辑关系，也使内容更便于阅读和理解 或者操作。 结构（ Structure）由 XHTML 标签中的 div或者其它结构标签定义 （ 1） 结构使内容更加具有逻辑性 和 易用性 在页面 内容中 提供 标题、作者、章、节、段落和列表 或者如下图所示将表单中的控件进行分组显示，其实就是进行结构设计。 再比如 输入框 要 划分为组 （版块或者区域划分），同时 考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。 每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间 ，其实也是结构设计。 （ 2）早期的页面结构设计方式是采用 表格进行布局 form name=searchForm action= method=post input type=radio name=radioButtonEvent che。