《CSS布局及应用.ppt》由会员分享，可在线阅读，更多相关《CSS布局及应用.ppt（59页珍藏版）》请在三一办公上搜索。
1、第8章 CSS布局及应用,主要内容,8.1 网页整体布局8.2 网站中的导航8.3 首字下沉效果8.4 自定义符号列表8.5 图文混排8.6 全图排版8.7 Dreamweaver中的页面组件,8.1 网页整体布局,固定宽度布局：固定宽度布局的网页大小不会随用户调整浏览器窗口大小而变化。随着用户计算机分辨率的提高，固定宽度布局的网页的流行宽度也在不断发生变化，如950像素、960像素、1000像素、1200像素等。这种布局方式一般通过像素来规划各栏的宽度。流动布局：也称为液态布局，网页宽度会随着用户调整浏览器窗口宽度而发生变化，这种布局能够更好地适应大屏幕。这种布局方式一般通过百分比来规划各栏
2、的宽度。弹性布局：列宽是以相对与文本大小的度量单位指定的，可以确保在字号增大时整个布局随之扩大。,8.1.1 固定宽度布局,一列固定宽度居中通过把具有一定宽度的元素的左、右外边距设置为auto，可以使得元素在浏览器中水平居中。,一列固定宽度居中,header 的内容container 的内容 footer 的内容#header,#container,#footer margin:0 auto;,两列固定宽度居中使用一个居中的div元素作为容器，将两列分栏的两个div元素放置在容器中，从而实现两列的水平居中显示。header的内容 sidebar的内容 maincontent的内容footer的
3、内容,两列固定宽度居中,#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的内
4、容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，可以使得元素在浏览器中水平居中。he
5、ader 的内容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
6、 网站中的导航,垂直导航利用无序列表从上到下的排列方式形成垂直排列的形式。例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:hoverbackground-color:#99002
7、0;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:linkdi
8、splay: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
9、;#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-t
10、ype:none;#nav lifloat:left;#nav a:link,#nav a:visitedwidth: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:
11、#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
12、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
13、:20px;1em=16px 云计算例14,首字下沉实现方法二：通过伪类设置首字样式,#containerwidth:900px;margin:0 auto;#container p:first-letterfont-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 spa
14、nfont-size:12px;color:#999;float:right;,#newslist a:linkcolor:#000;text-decoration:none;#newslist lilist-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布局中，图文混排的实现原理与首字下沉的实现原理相同，通过设置图像向
15、左或向右浮动，使得文字环绕在图像周围。,例18：故宫悉尼,.buildingborder-bottom:1px dashed#666;.building imgborder:1px solid#CCC;padding:10px;,.flfloat:left;margin-right:10px;.frfloat:right;margin-left:10px;,ptext-indent:2em;font-size:20px;line-height:30px;,8.6 全图排版,通过设置图像区块的内边距、边框、外边距，并使得图像区块浮动起来，形成图像的并排效果。当浮动的图像整体宽度达到外围容器区块的
16、宽度时，下一图像区块将在另一排中显示。,例19：,#containerwidth:960px;margin:0 auto;background-color:#F3F2F3;.pic imgfloat:left;height:208px;width:208px;padding:10px;border:1px solid#B2B2B2;margin:0 5px 5px;background-color:#FFF;,在一行显示,例20：.pic img:hoverborder:1px solid#0F0;background-color:#0F0;,改进,#containerwidth:960px;
17、margin:0 auto;background-color:#F3F2F3;#container imgfloat:left;height:208px;width:208px;padding:10px;border:1px solid#B2B2B2;margin:0 5px 5px;background-color:#FFF;,#containerwidth:960px;margin:0 auto;background-color:#F3F2F3;.pic imgfloat:left;height:208px;width:208px;padding:10px;border:1px solid
18、#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中的页面组件,
