《CSS布局及应用》PPT课件.ppt

网页设计与制作 基于计算思维 第 8章 CSS布局及应用 网页设计与制作 基于计算思维 主要内容 8.1 网页整体布局 8.2 网站中的导航 8.3 首字下沉效果 8.4 自定义符号列表 8.5 图文混排 8.6 全图排版 8.7 Dreamweaver中的页面组件 网页设计与制作 基于计算思维 8.1 网页整体布局 固定宽度布局：固定宽度布局的网页大小不会随用户 调整浏览器窗口大小而变化。随着用户计算机分辨率 的提高，固定宽度布局的网页的流行宽度也在不断发 生变化，如 950像素、 960像素、 1000像素 、 1200像 素等。这种布局方式一般通过像素来规划各栏的宽度。 流动布局：也称为液态布局，网页宽度会随着用户调 整浏览器窗口宽度而发生变化，这种布局能够更好地 适应大屏幕。这种布局方式一般通过百分比来规划各 栏的宽度。 弹性布局：列宽是以相对与文本大小的度量单位指定 的，可以确保在字号增大时整个布局随之扩大。 网页设计与制作 基于计算思维 8.1.1 固定宽度布局 一列固定宽度居中 通过把具有一定宽度的元素的左、右外边距设置为 auto，可以使得元素在浏览器中水平居中。 网页设计与制作 基于计算思维 一列固定宽度居中 网页设计与制作 基于计算思维 header 的内容 container 的内容 footer 的内容 #header , #container ,#footer margin:0 auto; 网页设计与制作 基于计算思维 两列固定宽度居中 使用一个居中的 div元素作为容器，将两列分栏的两 个 div元素放置在容器中，从而实现两列的水平居 中显示。 header的内容 sidebar的内容 maincontent的内容 footer的内容 网页设计与制作 基于计算思维 两 列固定宽度居中 网页设计与制作 基于计算思维 #container height: 500px;width: 960px;margin:0 auto 10px; #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: 0 220px; 网页设计与制作 基于计算思维 8.1.2 流动布局 一列流动居中 通过百分比来设置每栏的宽度，而不是具体的像素， 可以创建流动布局的网页。把元素的左、右外边 距设置为 auto，可以使得元素在浏览器中水平居 中。 header 的内容 container 的内容 footer 的内容 #header , #container ,#footer width:80%;margin:0 auto; 网页设计与制作 基于计算思维 两列流动居中 与创建两列固定宽度居中的网页方式相同，只是在 这种情况下，栏目的宽度是通过百分比来进行设 置的。 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; #nav ul list-style-type:none; /* 不显示项目符号 */ #nav li border-bottom:1px solid #ED9F9F; 网页设计与制作 基于计算思维 #nav li a:linkdisplay:block; padding:5px ; text-decoration:none; background-color:#c11136; color:#FFFFFF; #nav li a:hover background-color:#990020; color:#ffff00; 网页设计与制作 基于计算思维 例 9： #nav a:link background-color:#36F; border-left: 15px solid #666666; #nav a:hover border-left: 15px solid #F90; 网页设计与制作 基于计算思维 水平导航 利用 float: left属性把列表项浮动起来，从而形成水平导航。 首页 新闻 国内 网页设计与制作 基于计算思维 ul,limargin:0; padding:0; #nav ul list-style-type:none; /* 不显示项目符号 */ 网页设计与制作 基于计算思维 #nav width:960px;margin:0 auto; #nav li float:left; 网页设计与制作 基于计算思维 #nav li a: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; 网页设计与制作 基于计算思维 #nav li a:hover /* 鼠标经过时 */background-color:#990020; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */ 网页设计与制作 基于计算思维 横向导航 -变换背景颜色 11.html 首页 新闻 国内 网页设计与制作 基于计算思维 #nav ul list-style-type:none; #nav li float:left; 网页设计与制作 基于计算思维 #nav li a:link, #nav a:visited color:#000;display:block; text-align:center; width:120px; padding-top:5px ;padding-bottom:5px; text-decoration: none; border-bottom: 4px solid #DEDEDE; 网页设计与制作 基于计算思维 #nav li a:hover border-bottom: 4px solid #6184A6;color: #336699; text-decoration: none; 网页设计与制作 基于计算思维 例 12 #nav ul list-style-type:none; #nav lifloat:left; #nav a:link,#nav a:visited width:120px; height:45px; line-height:45px; /* 垂直居中对齐 */ text-decoration:none; display:block; color:#FFF; text-align:center; background-image: url(images/nav01.gif); #nav a:hoverbackground-image:url(images/nav02.gif); 网页设计与制作 基于计算思维 固定高度的 DIV，垂直居中 .v40height:40px; background:#060 .v40height:40px; background: #0F0; line- height:40px; 网页设计与制作 基于计算思维 下拉菜单；例 13： 首页 电影 新上映 华语 欧美 日韩 电影排行榜 网页设计与制作 基于计算思维 #navwidth:960px;margin:0 auto; ul,limargin:0; padding:0; ul list-style: none; /*去掉列表符号 */ ul lifloat:left; /*水平排列 */ position:relative; 网页设计与制作 基于计算思维 ul li ulposition:absolute;display:none;left:0; ul li:hover uldisplay:block; 网页设计与制作 基于计算思维 a:link,a:visited width:191px;display:block; padding:10px 0; text-decoration:none; background-color:#c11136; margin-right:1px;color: #FFF; text-align:center; a:hoverbackground-color:#F00; 网页设计与制作 基于计算思维 8.3 首字下沉效果 在 CSS布局中，通过设置首字的大小并向左浮动， 从而使得首字与其他字符区别；通过右边距控制 首字与其他字符的距离。 网页设计与制作 基于计算思维 首字下沉 实现方法一 #firstfont-size:3em;font-weight:bold; float:left;margin-right:20px; 1em=16px 云 计算 例 14 网页设计与制作 基于计算思维 首字下沉 实现方法二：通过伪类设置首字样式 #containerwidth:900px;margin:0 auto; #container p:first-letter font-size:3em; font-weight:bold; float:left; margin-right:20px; 云计算 网页设计与制作 基于计算思维 8.4 自定义符号列表 默认的无序列表或有序列表的符号较为单一，通 过 CSS可以形成丰富的自定义符号的列表内容。 例 16、： 网页设计与制作 基于计算思维 基于 2013 -07-15 #newslist width:400px; 网页设计与制作 基于计算思维 #newslist a float:left; #newslist span font-size:12px; color:#999; float:right; 网页设计与制作 基于计算思维 #newslist a:link color:#000; text-decoration:none; #newslist li 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:1px dashed #666; .building img border:1px solid #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:0 auto; background-color:#F3F2F3; .pic img float: left; height: 208px; width: 208px; padding: 10px; border: 1px solid #B2B2B2; margin: 0 5px 5px; background-color:#FFF; 网页设计与制作 基于计算思维 在一行显示 例 20： .pic img:hover border: 1px solid #0F0; background-color:#0F0; 网页设计与制作 基于计算思维 改进 网页设计与制作 基于计算思维 #container width:960px; margin:0 auto; background-color:#F3F2F3; #container img float: left; height: 208px; width: 208px; padding: 10px; border: 1px solid #B2B2B2; margin: 0 5px 5px; background-color:#FFF; #container width:960px; margin:0 auto; background-color:#F3F2F3; .pic img float: left; height: 208px; width: 208px; padding: 10px; border: 1px solid #B2B2B2; margin: 0 5px 5px; background-color:#FFF; 网页设计与制作 基于计算思维 spry构件 Spry构件是一个页面元素，通过启用用户交互来提 供更丰富的用户体验。 Spry构件由以下几个部分组成： 构件结构：用来定义构件结构组成的 HTML代码块。 构件行为：用来控制构件如何响应用户启动事件的 JavaScript。 构件样式：用来指定构件外观的 CSS。 网页设计与制作 基于计算思维 插入 spry构件 选择“插入” “ Spry”菜单命令，在弹出的子菜 单中选择要插入的 Spry构件即可，如图所示。 网页设计与制作 基于计算思维 8.7 Dreamweaver中的页面组件 8.7.1 Spry菜单栏 p190 01.html 网页设计与制作 基于计算思维 8.7 Dreamweaver中的页面组件 8.7.2 Spry选项卡式面板 02.html 网页设计与制作 基于计算思维 8.7 Dreamweaver中的页面组件 8.7.3 Spry折叠式面板 03.html 网页设计与制作 基于计算思维 小结 网页整体布局 网站中的导航 首字下沉效果 自定义符号列表 图文混排 全图排版 Dreamweaver中的页面组件