CSS网页布局PPT课件

.,1,CSS网页布局,2,.,CSSVSTable,Table布局页面会带来哪些问题？使用CSS排版比Table有哪些优势？用CSS页面布局能给我们的网页设计带来什么好处？,3,.,表格布局的问题,把格式数据混入你的容。重新设计现有的站点和内容费力。难以保持整个站点的视觉的一致性。降低了对残疾人、手机、PDA浏览者的亲和力。,4,.,CSS布局的好处,内容和形式分离改版网站更简单容易搜索引擎更友好,5,.,CSS布局的基本思想,结构化标记：所写即所想，所想即所写。,6,.,CSS控制HTML页面的方式,行内方式内嵌方式链接方式导入方式,7,.,行内方式,直接对HTML标签适用style=“,8,.,内嵌方式,将CSS代码写在之间，并且用进行声明,9,.,12345无标题文档67,10,.,1112131415全国的CSS爱好者汇聚于此，如果不来，你就OUT喽我们的口号是：16“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”17如果您也愿意，就加入我们吧1819,11,.,链接方式,是使用频率最高，最实用的方式，只需要在之间加上,12,.,345无标题文档678910全国的CSS爱好者汇聚于此，如果不来，你就OUT喽我们的口号是：11“分享自己的欢乐与痛苦，分享自己的经验与心得，分享自己的资料与资源”12如果您也愿意，就加入我们吧13,13,.,style.css的内容,14,.,导入方式,和链接方式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分。,15,.,四种样式的优先级,低,高,行内方式,内嵌方式,链接方式,导入方式,16,.,CSS选择器,标签选择器ID选择器类选择器,17,.,标签选择器,18,.,ID选择器,19,.,类选择器,20,.,盒子模型,21,.,块状元素和内联元素,22,.,浮动,float:left,23,.,24,.,清除浮动,25,.,清除浮动,.clearclear:both;,在HTML中加入：,26,.,27,.,28,.,第一步：整体布局与公共CSS定义,示例网页的HTML代码,29,.,第一步：整体布局与公共CSS定义,示例网页的CSS代码,30,.,第二步布局Logo栏,HTML代码,31,.,第二步布局Logo栏,CSS代码,32,.,第三步布局导航栏Nav,HTML代码,33,.,第三步布局导航栏Nav,CSS代码,34,.,第三步布局导航栏Nav,CSS代码,35,.,第四步布局Banner栏,HTML代码,36,.,第四步布局Banner栏,CSS代码,37,.,第五步布局Content栏,HTML代码,38,.,第五步布局Content栏,CSS代码,39,.,内容栏的具体内容还有待进一步布局。,40,.,第六步布局Footer栏,HTML代码,41,.,第六步布局Footer栏,CSS代码,42,.,43,.,44,.,第七步布局内容栏左侧,HTML代码,45,.,第七步布局内容栏左侧,CSS代码,46,.,第七步布局Content栏左侧,CSS代码,47,.,第七步布局Content栏左侧,效果如下,48,.,第七步布局Content栏左侧,HTML代码（下部多一张图片）,49,.,第七步布局Content栏左侧,预览效果（右部有空白，图片不靠左）,50,.,第七步布局Content栏左侧,CSS代码,51,.,第七步布局Content栏左侧,CSS代码,52,.,第八步布局Content栏右侧,CSS结合Table来使用,53,.,第八步布局Content栏右侧,HTML代码(红色标题）,54,.,第八步布局Content栏右侧,CSS代码（红色标题）,55,.,第八步布局Content栏右侧,HTML代码(第一行）,56,.,第八步布局Content栏右侧,CSS代码（第一行）,57,.,第八步布局Content栏右侧,HTML代码(QQ号码）,58,.,第八步布局Content栏右侧,CSS代码(QQ号码）,59,.,第八步布局Content栏右侧,HTML代码(最后一句话）,60,.,第八步布局Content栏右侧,CSS代码(最后一句话）,61,.,CSS页面布局实例,建立站点结构分析搭建框架切割效果图布局页面头部和导航布局页面侧边栏布局页面主体部分底部和细节调整相对路径和相对于根目录路径文章出处：标准之路(,62,.,建立站点,63,.,64,.,65,.,结构分析,66,.,67,.,6