CSS布局实战.ppt

CSS布局实战 主讲：朱荣华 CSS布局实战 认识div Div是什么? 如何使用和理解div？ Div的并列与嵌套结构 CSS布局 使用合适的对象来布局 典型三行两列高度自适应布局实例 CSS布局要点 背景控制 基于CSS的导航设计 思考和作业 认识div Div是什么? Div是XHTML所支持的标签，XHTML中指定的专门用于布局设计的容器对象； CSS布局中，div是布局方式的核心对象； Div在使用时是以div…/div这样的形式出现； 如何使用和理解div？ 只需应用div…/div这样的标签形式，将内容放置其中，作用是把内容标识一个区域，内容的表现由CSS来处理； Div最终代码只可能拥有以下两种形式： div id=“id名称”[…]/div div class=“class名称”[…]/div Div本身是块状对象，无任何其他样式和属性，这与样式无关的特性，使的div在设计中拥有巨大的伸缩性，可以根据自己的想法去改变div的样式； 认识div Div的并列与嵌套结构 Div可以进行多层嵌套使用，目的是为了实现更多复杂的页面排版； 例如设计典型三行两列布局，需要产生头部、中部和底部，这也许会产生一个较复杂的div结构； 无论多复杂的布局，都可以使用div之间的并列和嵌套来实现； div id=“h”头部/div div id=“c” div id=“l”左栏/div div id=“r”右栏/div /div div id=“f”底部/div 使用合适的对象来布局 实例分析 div id=“haed” div id=“title”标题/div div id=“nav”导航/div /div； 上述代码没有任何错误，但从网页结构与优化来看是不科学的，完全使用div来构建布局，最终带给我们的可读性并不高。改进后代码如下： div id=“haed” h1标题/h1 ulli导航/li/ul /div； 使用h1标签来作为标题用的元素再合适不过了，而导航条一般由多个导航项组成，ul列表正好满足需求，这样组成新的代码结构具有良好的可读性，CSS样式编写将更直观。 Web标准组织推荐 使用尽可能符合页面中元素意义的标签来标识元素，使网页对象都拥有良好的可读性。 通过进一步CSS的定义，其样式表现能力丝毫不比表格差，而且拥有比表格高出许多的样式控制方法，这也是CSS布局的基本优势。 典型三行两列高度自适应布局实例 什么是浮动? 浮动（float）是CSS布局非常强大的布局功能，也是理解CSS布局的关系问题所在，在CSS中，包括div在内的任何元素都可以以浮动的方式进行显示； 浮动是一种非常先进的布局方式，它能够改变页面中对象的前后流动顺序，这样做的好处是使得内容的排版变得简单及具有良好的伸缩性； 创建第一个div与css DW8中创建div，需要将工具栏切换到布局工具组，通过点击插入div标签图标来插入第一个div； 为div建立相应的id，即标识这个div并建立CSS样式； Id的名称就是以#开始的CSS选择符，如 #haed 布局演示 CSS布局要点 设计一个网页，首先思考的不是网页的布局，而是这个网页的结构。 网页结构的考虑，一般由简单逐步到丰富的过程：整体着手—逐渐饱满—继续细化。 网页的结构需要合理的方案，选用合适的元素组织页面结构，对其标识（CSS选择符）养成良好的命名习惯，使得网页结构的标签代码及样式标识，在下一次改版的时候仍将有用。 这个时候，一个网页的外观并不重要，重要的是规范一个结构基本页，一个良好的XTML结构页面，可以适应任何外观表示。 背景控制 背景是网页设计中常用的一种技术，无论是单纯的背景颜色还是背景图片，都能给页面带来丰富的视觉效果，HTML的各个元素基本上都支持background属性，但形式单一，在标签代码内设置背景属性违背内容与表现的分离。 而CSS对于背景色或背景图片的设置相对于传统控制方式提供了更多的可控选项。（演示） 基于CSS的导航设计 使用CSS布局的形式制作导航 导航是一种列表,包含链接a,理解为导航列表； 使用ul元素来构造导航,运用CSS控制导航； 导航的关键在于a链接对象的样式控制； li {…} 定义导航的排列方式(横向,既浮动为左对齐) li a{…} 定义链接的外观样式(背景色或图,尺寸,块等) li a:hover {…} 定义鼠标移上响应的样式 （制作演示） 思考和作业 如何抛弃表格布局的传统设计方法，使用DIV块元素对页面进行布局，建立外部样式表实施页面内各布局元素的尺寸、