CSS布局及应用ppt课件.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,#footermargin:0auto;,两列固定宽度居中使用一个居中的div元素作为容器，将两列分栏的两个div元素放置在容器中，从而实现两列的水平居中显示。header的内容sidebar的内容maincontent的内容footer的内容,两列固定宽度居中,#containerheight:500px;width:960px;margin:0auto10px;#sidebarbackground-color:#0C3;height:500px;width:300px;float:left;#maincontentbackground-color:#FC3;height:500px;width:640px;float:right;,三列固定宽度居中三列固定宽度居中可以通过浮动定位或绝对定位的方式来实现。,三列固定宽度居中,header的内容sidebar1的内容sidebar2的内容maincontent的内容footer的内容,#sidebar1background-color:#0C3;height:500px;width:200px;float:left;#sidebar2background-color:#0C3;height:500px;width:200px;float:right;#maincontentbackground-color:#FC3;height:500px;margin:0220px;,8.1.2流动布局,一列流动居中通过百分比来设置每栏的宽度，而不是具体的像素，可以创建流动布局的网页。把元素的左、右外边距设置为auto，可以使得元素在浏览器中水平居中。header的内容container的内容footer的内容#header,#container,#footerwidth:80%;margin:0auto;,两列流动居中与创建两列固定宽度居中的网页方式相同，只是在这种情况下，栏目的宽度是通过百分比来进行设置的。sidebar的内容maincontent的内容,#sidebarbackground-color:#0C3;height:500px;width:20%;float:left;#maincontentwidth:80%;background-color:#FC3;height:500px;float:right;,8.2网站中的导航,垂直导航利用无序列表从上到下的排列方式形成垂直排列的形式。例8：首页新闻国内,#navwidth:200px;font-family:Arial;#navullist-style-type:none;/*不显示项目符号*/#navliborder-bottom:1pxsolid#ED9F9F;,#navlia:linkdisplay:block;padding:5px;text-decoration:none;background-color:#c11136;color:#FFFFFF;#navlia:hoverbackground-color:#990020;color:#ffff00;,例9：#nava:linkbackground-color:#36F;border-left:15pxsolid#666666;#nava:hoverborder-left:15pxsolid#F90;,水平导航利用float:left属性把列表项浮动起来，从而形成水平导航。首页新闻国内,ul,limargin:0;padding:0;#navullist-style-type:none;/*不显示项目符号*/,#navwidth:960px;margin:0auto;#navlifloat:left;,#navlia:linkdisplay: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首页新闻国内,#navullist-style-type:none;#navlifloat:left;,#navlia:link,#nava:visitedcolor:#000;display:block;text-align:center;width:120px;padding-top:5px;padding-bottom:5px;text-decoration:none;border-bottom:4pxsolid#DEDEDE;,#navlia:hoverborder-bottom:4pxsolid#6184A6;color:#336699;text-decoration:none;,例12#navullist-style-type:none;#navlifloat:left;#nava:link,#nava:visitedwidth:120px;height:45px;line-height:45px;/*垂直居中对齐*/text-decoration:none;display:block;color:#FFF;text-align:center;background-image:url(images/nav01.gif);#nava:hoverbackground-image:url(images/nav02.gif);,固定高度的DIV，垂直居中,.v40height:40px;background:#060.v40height:40px;background:#0F0;line-height:40px;,下拉菜单；例13：首页电影新上映华语欧美日韩电影排行榜,#navwidth:960px;margin:0auto;ul,limargin:0;padding:0;ullist-style:none;/*去掉列表符号*/ullifloat:left;/*水平排列*/position:relative;,ulliulposition:absolute;display:none;left:0;ulli:hoveruldisplay:block;,a:link,a:visitedwidth:191px;display:block;padding:10px0;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:0auto;#containerp:first-letterfont-size:3em;font-weight:bold;float:left;margin-right:20px;云计算,8.4自定义符号列表,默认的无序列表或有序列表的符号较为单一，通过CSS可以形成丰富的自定义符号的列表内容。例16、：,基于2013-07-15#newslistwidth:400px;,#newslistafloat:left;#newslistspanfont-size:12px;color:#999;float:right;,#newslista:linkcolor:#000;text-decoration:none;#newslistlilist-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：故宫悉尼,.buildingborder-bottom:1pxdashed#666;.buildingimgborder:1pxsolid#CCC;padding:10px;,.flfloat:left;margin-right:10px;.frfloat:right;margin-left:10px;,ptext-indent:2em;font-size:20px;line-height:30px;,8.6全图排版,通过设置图像区块的内边距、边框、外边距，并使得图像区块浮动起来，形成图像的并排效果。当浮动的图像整体宽度达到外围容器区块的宽度时，下一图像区块将在另一排中显示。,例19：,#containerwidth:960px;margin:0auto;background-color:#F3F2F3;.picimgfloat:left;height:208px;width:208px;padding:10px;border:1pxsolid#B2B2B2;margin:05px5px;background-color:#FFF;,在一行显示,例20：.picimg:hoverborder:1pxsolid#0F0;background-color:#0F0;,改进,#containerwidth:960px;margin:0auto;background-color:#F3F2F3;#containerimgfloat:left;height:208px;width:208px;padding:10px;border:1pxsolid#B2B2B2;margin:05px5px;background-color:#FFF;,#containerwidth:960px;margin:0auto;background-color:#F3F2F3;.picimgfloat:left;height:208px;width:208px;padding:10px;border:1pxsolid#B2B2B2;margin:05px5px;background-color:#FFF;,spry构件,Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。Spry构件由以下几个部分组成：构件结构：用来定义构件结构组成的HTML代码块。构件行为：用来控制构件如何响应用户启动事件的Ja