CSS布局及应用教程

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:

3、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:

4、left; ?#maincontent background-color: #FC3;height: 500px;width: 640px;float: right; 网页设计与制作基于计算思维 ?三列固定宽度居中 三列固定宽度居中可以通过浮动定位或绝对定位的方式来实现。 网页设计与制作基于计算思维 三列固定宽度居中三列固定宽度居中 网页设计与制作基于计算思维 ?header的内容 ? sidebar1的内容 sidebar2的内容 maincontent的内容 ? ?footer的内容 网页设计与制作基于计算思维 ?#sidebar1 background-color: #0C3;heigh

5、t: 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 的内容 containe

6、r 的内容 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: #

7、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-de

8、coration: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属性把列表项浮动起来，从而形成水平导航。 首页

9、新闻 国内 网页设计与制作基于计算思维 ?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

10、: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; 网页设计与制作基于计算思维 ?#n

11、av 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、?例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); 网

13、页设计与制作基于计算思维 固定高度的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; /*水平排列

14、*/ 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:hoverbackgr

15、ound-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-

16、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:#

17、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、实现原理与首字下沉的实现原理相同，通过设置图像向左或向右浮动，使得文字环绕在图像周围。 网页设计与制作基于计算思维 ?例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; ? 网页设计与制

19、作基于计算思维 ?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; h

20、eight: 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; .pic 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 a