CSS布局及应用.ppt

第8章CSS布局及应用 主要内容 8 1网页整体布局8 2网站中的导航8 3首字下沉效果8 4自定义符号列表8 5图文混排8 6全图排版8 7Dreamweaver中的页面组件 8 1网页整体布局 固定宽度布局 固定宽度布局的网页大小不会随用户调整浏览器窗口大小而变化 随着用户计算机分辨率的提高 固定宽度布局的网页的流行宽度也在不断发生变化 如950像素 960像素 1000像素 1200像素等 这种布局方式一般通过像素来规划各栏的宽度 流动布局 也称为液态布局 网页宽度会随着用户调整浏览器窗口宽度而发生变化 这种布局能够更好地适应大屏幕 这种布局方式一般通过百分比来规划各栏的宽度 弹性布局 列宽是以相对与文本大小的度量单位指定的 可以确保在字号增大时整个布局随之扩大 8 1 1固定宽度布局 一列固定宽度居中通过把具有一定宽度的元素的左 右外边距设置为auto 可以使得元素在浏览器中水平居中 一列固定宽度居中 header的内容container的内容footer的内容 header container footer margin 0auto 两列固定宽度居中使用一个居中的div元素作为容器 将两列分栏的两个div元素放置在容器中 从而实现两列的水平居中显示 header的内容sidebar的内容maincontent的内容footer的内容 两列固定宽度居中 container height 500px width 960px margin 0auto10px sidebar background color 0C3 height 500px width 300px float left maincontent background color FC3 height 500px width 640px float right 三列固定宽度居中三列固定宽度居中可以通过浮动定位或绝对定位的方式来实现 三列固定宽度居中 header的内容sidebar1的内容sidebar2的内容maincontent的内容footer的内容 sidebar1 background color 0C3 height 500px width 200px float left sidebar2 background color 0C3 height 500px width 200px float right maincontent background color FC3 height 500px margin 0220px 8 1 2流动布局 一列流动居中通过百分比来设置每栏的宽度 而不是具体的像素 可以创建流动布局的网页 把元素的左 右外边距设置为auto 可以使得元素在浏览器中水平居中 header的内容container的内容footer的内容 header container footer width 80 margin 0auto 两列流动居中与创建两列固定宽度居中的网页方式相同 只是在这种情况下 栏目的宽度是通过百分比来进行设置的 sidebar的内容maincontent的内容 sidebar background color 0C3 height 500px width 20 float left maincontent width 80 background color FC3 height 500px float right 8 2网站中的导航 垂直导航利用无序列表从上到下的排列方式形成垂直排列的形式 例8 首页新闻国内 nav width 200px font family Arial navul list style type none 不显示项目符号 navli border bottom 1pxsolid ED9F9F navlia link display block padding 5px text decoration none background color c11136 color FFFFFF navlia hover background color 990020 color ffff00 例9 nava link background color 36F border left 15pxsolid 666666 nava hover border left 15pxsolid F90 水平导航利用float left属性把列表项浮动起来 从而形成水平导航 首页新闻国内 ul li margin 0 padding 0 navul list style type none 不显示项目符号 nav width 960px margin 0auto navli float left navlia link display block 区块显示 width 119px padding top 5px padding bottom 5px margin right 1px text decoration none background color c11136 color FFFFFF text align center navlia hover 鼠标经过时 background color 990020 改变背景色 color ffff00 改变文字颜色 横向导航 变换背景颜色11 html首页新闻国内 navul list style type none navli float left navlia link nava visited color 000 display block text align center width 120px padding top 5px padding bottom 5px text decoration none border bottom 4pxsolid DEDEDE navlia hover border bottom 4pxsolid 6184A6 color 336699 text decoration none 例12 navul list style type none navli float left nava link nava visited width 120px height 45px line height 45px 垂直居中对齐 text decoration none display block color FFF text align center background image url images nav01 gif nava hover background image url images nav02 gif 2020 3 15 31 可编辑 固定高度的DIV 垂直居中 v40 height 40px background 060 v40 height 40px background 0F0 line height 40px 下拉菜单 例13 首页电影新上映华语欧美日韩电影排行榜 nav width 960px margin 0auto ul li margin 0 padding 0 ul list style none 去掉列表符号 ulli float left 水平排列 position relative ulliul position absolute display none left 0 ulli hoverul display block a link a visited width 191px display block padding 10px0 text decoration none background color c11136 margin right 1px color FFF text align center a hover background color F00 8 3首字下沉效果 在CSS布局中 通过设置首字的大小并向左浮动 从而使得首字与其他字符区别 通过右边距控制首字与其他字符的距离 首字下沉实现方法一 first font size 3em font weight bold float left margin right 20px 1em 16px云计算例14 首字下沉实现方法二 通过伪类设置首字样式 container width 900px margin 0auto containerp first letter font size 3em font weight bold float left margin right 20px 云计算 8 4自定义符号列表 默认的无序列表或有序列表的符号较为单一 通过CSS可以形成丰富的自定义符号的列表内容 例16 基于 2013 07 15 newslist width 400px newslista float left newslistspan font size 12px color 999 float right newslista link color 000 text decoration none newslistli list style type none height 28px line height 28px background image url images arrow jpg background repeat no repeat padding left 30px margin bottom 2px 8 5图文混排 在CSS布局中 图文混排的实现原理与首字下沉的实现原理相同 通过设置图像向左或向右浮动 使得文字环绕在图像周围 例18 故宫 悉尼 building border bottom 1pxdashed 666 buildingimg border 1pxsolid CCC padding 10px fl float left margin right 10px fr float right margin left 10px p text indent 2em font size 20px line height 30px 8 6全图排版 通过设置图像区块的内边距 边框 外边距 并使得图像区块浮动起来 形成图像的并排效果 当浮动的图像整体宽度达到外围容器区块的宽度时 下一图像区块将在另一排中显示 例19 container width 960px margin 0auto background color F3F2F3 picimg float left height 208px width 208px padding 10px border 1pxsolid B2B2B2 margin 05px5px background color FFF 在一行显示 例20 picimg hover border 1pxsolid 0F0 background color 0F0 改进 container width 960px margin 0auto background color F3F2F3 containerimg float left height 208px width 208px padding 10px border 1pxsolid B2B2B2 margin 05px5px background color FFF container width 960px margin 0auto background color F3F2F3 picimg float left height 208px width 208px padding 10px border 1pxsolid B2B2B2 margin 05px5px background color FFF spry构件 Spry构件是一个页面元素 通过启用用户交互来提供更丰富的用户体验 Spry构件由以下几个部分组成 构件结构 用来定义构件结构组成的HTML代码块 构件行为 用来控制构件如何响应用户启动事件的JavaScript 构件样式 用来