《CSS网页布局》-课件.ppt

CSS网页布局 CSS VS Table Table 布局页面会带来哪些问题？ 使用CSS 排版比Table 有哪些优势？ 用CSS 页面布局能给我们的网页设计带来什么好处？ 表格布局的问题 把格式数据混入你的容。 重新设计现有的站点和内容费力。 难以保持整个站点的视觉的一致性。 降低了对残疾人、手机、PDA 浏览者的亲和力。 CSS 布局的好处 内容和形式分离 改版网站更简单容易 搜索引擎更友好 CSS 布局的基本思想 结构化标记： 所写即所想，所想即所写。 CSS控制HTML页面的方式 行内方式 内嵌方式 链接方式 导入方式 行内方式 直接对HTML 标签适用 style=“ “ 内嵌方式 将CSS 代码写在head/head之间，并且用style/style进行声明 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 2 html xmlns=/1999/xhtml 3 head 4 meta http-equiv=Content-Type content=text/html; charset=gb2312 / 5 title无标题文档/title 6 style type=text/css 7 !-- 8 #div1{width:64px; height:64px; float:left;} 9 #div1 img{width:64px; height:64px;} 10 -- 11 /style 12 /head 13 body 14 div id=div1img src=/index/images/ico/2days.gif //div 15 全国的CSS 爱好者汇聚于此，如果不来，你就OUT 喽~我们的口号是： 16 “分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源” 17 如果您也愿意，就加入我们吧~ 18 /body 19 /html 链接方式 是使用频率最高，最实用的方式，只需要在head/head之间加上 3 head 4 meta http-equiv=Content-Type content=text/html; charset=gb2312 / 5 title无标题文档/title 6 link href=style.css type=text/css rel=stylesheet / 7 /head 8 body 9 div id=div1img src=/index/images/ico/2days.gif //div 10 全国的CSS 爱好者汇聚于此，如果不来，你就OUT 喽~我们的口号是： 11 “分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源” 12 如果您也愿意，就加入我们吧~ 13 /body /html style.css的内容 导入方式 和链接方式比较相似，采用import 方式导入CSS 样式表，在HTML 初始化时，会被导入到HTML 文件中，成为文件的一部分。 四种样式的优先级 CSS选择器 标签选择器 ID选择器 类选择器 标签选择器 ID选择器 类选择器 盒子模型 块状元素和内联元素 浮动 清除浮动 清除浮动 第一步：整体布局与公共CSS定义 第一步：整体布局与公共CSS定义 第二步 布局Logo栏 HTML代码 第二步 布局Logo栏 CSS代码 第三步 布局导航栏Nav HTML代码 第三步 布局导航栏Nav CSS代码 第三步 布局导航栏Nav CSS代码 第四步 布局Banner栏 HTML代码 第四步 布局Banner栏 CSS代码 第五步 布局Content栏 HTML 代码 第五步 布局Content栏 CSS 代码 第六步 布局Footer栏 HTML代码 第六步 布局Footer栏 CSS代码 第七步 布局内容栏左侧 HTML代码 第七步 布局内容栏左侧 CSS代码 第七步 布局Content栏左侧 CSS代码 第七步 布局Content栏左侧 第七步 布局Content栏左侧 HTML代码（下部多一张图片） 第七步 布局Content栏左侧 第七步 布局Content栏左侧 CSS代码 第七步 布局Content栏左侧 CSS代码 第八步布局Content栏右侧 CSS结合Table来使用 第八步布局Content栏右侧 HTML代码(红色标题） 第八步布局Content栏右侧 CSS代码（红色标题） 第八步布局Content栏右侧 HTML