网站建设与网页制作第五章Web2.0标准静态网页的搭建ppt课件.ppt

第五章Web2 0标准静态网页的搭建 网站建设与网页制作 本章内容 网站建设与网页制作 5 1Div CSS布局方法 在XHTML中应用Div CSS标签进行网页布局是目前最新的网页设计特作技术 相对于用表格来进行布局 其有着代码条理分明 代码使用更加灵活 样式结构较为清晰等特点 网站建设与网页制作 5 1Div CSS布局方法 5 1 1div标签的CSS控制方法 1 Div标签的格式 标签内容 div标签第1个div标签第2个div标签第3个div标签第4个div标签 网站建设与网页制作 5 1Div CSS布局方法 5 1 1div标签的CSS控制方法 2 Div标签的特点 不论如何调整浏览器窗口 div标签的内容只占浏览器一行 即默认情况下 一行只能容纳一个div标签 网站建设与网页制作 5 1Div CSS布局方法 5 1 1div标签的CSS控制方法 3 Div标签的CSS控制 通过id选择符对div加入CSS代码 使div拥有各种属性可以控制 网站建设与网页制作 5 1Div CSS布局方法 5 1 1div标签的CSS控制方法 3 Div标签的CSS控制 div标签 no1 no2 background color eee no3 no4 background color 999 width 300px 第1个div标签第2个div标签第3个div标签第4个div标签 网站建设与网页制作 5 1Div CSS布局方法 5 1 2XHTML中的块状元素和内联元素 HTML和XHTML的区别简单来说 XHTML语法上要求更严谨些 XHTML相对HTML的几大区别 XHTML要求正确嵌套XHTML区分大小写XHTML属性值要用双引号XHTML用id属性代替name属性XHTML特殊字符的处理 网站建设与网页制作 5 1Div CSS布局方法 5 1 2XHTML中的块状元素和内联元素 XHTML的布局核心是Div标签 div属于XHTML中的块级元素 XHTML的标签默认为两种元素 块状元素和内联元素 网站建设与网页制作 5 1Div CSS布局方法 5 1 2XHTML中的块状元素和内联元素 1 块状元素 该元素是矩形的 有自己的高度和宽度 默认情况下 在父容器中占据一行 同一行无法容纳其它元素及文本 其它元素将显示在其下一行 网站建设与网页制作 5 1Div CSS布局方法 5 1 2XHTML中的块状元素和内联元素 2 内联元素 内联元素没有固定形状 也无法设置高度和宽度 内联元素的形状由其内含的内容所决定 所以在宽度足够的情况下 一行能容纳多个内联元素 网站建设与网页制作 5 1Div CSS布局方法 5 1 2XHTML中的块状元素和内联元素 块状元素适合于大块区域的排版 所以常用来布局网页 而内联元素适合于局部元素的样式设置 所以常用来设置局部文字样式 网站建设与网页制作 5 1Div CSS布局方法 5 1 3Div元素的样式设置 要使用div进行网页布局 首先要学会使用CSS灵活控制div元素的样式 width属性 设置div宽度 单位为px height属性 设置div高度 单位为px 当单位为百分比时 div元素的宽度和高度为自适应状态 即宽度和高度适应浏览器窗口尺寸而变化 网站建设与网页制作 5 1Div CSS布局方法 5 1 3Div元素的样式设置 设置div样式xhtml body height 100 one background color ccc border 1pxsolid 000 width 200px height 100px two background color ccc border 1pxsolid 000 width 50 height 25 固定DIV的宽度和高度自适应DIV的宽度和高度 网站建设与网页制作 5 1Div CSS布局方法 5 1 3Div元素的样式设置 设置div样式xhtml body height 100 one background color ccc border 1pxsolid 000 width 200px height 100px two background color ccc border 1pxsolid 000 width 50 height 25 网站建设与网页制作 5 1Div CSS布局方法 5 1 4水平居中显示 使Div元素水平居中的方法有多种 常用的方法是用CSS设置div的左右边距 即margin left属性和margin right属性 当设置div左外边距和右外边距的值为auto 即自动时 左外边距和右外边距将相等 从而达到div水平居中的效果 网站建设与网页制作 5 1Div CSS布局方法 5 1 4水平居中显示 水平居中xhtml body height 100 margin 0px padding 0px web width 75 height 100 background color ccc border 1pxsolid 000 margin left auto margin right auto 这里是整个网页的内容 网站建设与网页制作 5 1Div CSS布局方法 5 1 5div的浮动 一个Div标签占据一行 怎样才能实现布局并列两块区域呢 块状元素有个很重要的 float 属性 可以使多个块状元素并列于一行 float 属性也被称为浮动属性 对前面的div元素设置浮动属性后 当前面的div元素留有足够的空白宽度时 后面的div元素将会自动浮上来 和前面的div元素并列在一行 网站建设与网页制作 5 1Div CSS布局方法 5 1 5div的浮动 float 属性的取值 inherit 继承属性 代表继承父容器的属性 none float属性的默认值 代表块状元素不会浮动 left 代表块状元素向左浮动 right 代表块状元素向右浮动 网站建设与网页制作 5 1Div CSS布局方法 5 1 5div的浮动 要使两个div并列于一行的前提是 这一行要有足够的宽度空间来容纳两个div的宽度 网站建设与网页制作 5 1Div CSS布局方法 5 1 5div的浮动 设置div浮动 margin 0px padding 0px first width 150px height 100px background color ccc border 1pxsolid 000 float left second width 180px height 100px background color eee border 1pxsolid 000 float