CSS布局及应用

1、网页设计与制作基于计算思维第8章 CSS布局及应用网页设计与制作基于计算思维主要内容n 8.1 网页整体布局n 8.2 网站中的导航n 8.3 首字下沉效果n 8.4 自定义符号列表n 8.5 图文混排n 8.6 全图排版n 8.7 Dreamweaver中的页面组件网页设计与制作基于计算思维8.1 网页整体布局n 固定宽度布局：固定宽度布局的网页大小不会随用户调整浏览器窗口大小而变化。随着用户计算机分辨率的提高，固定宽度布局的网页的流行宽度也在不断发生变化，如950像素、960像素、1000像素、1200像素等。这种布局方式一般通过像素来规划各栏的宽度。n 流动布局：也称为液态布局，网页宽度

2、会随着用户调整浏览器窗口宽度而发生变化，这种布局能够更好地适应大屏幕。这种布局方式一般通过百分比来规划各栏的宽度。n 弹性布局：列宽是以相对与文本大小的度量单位指定的，可以确保在字号增大时整个布局随之扩大。网页设计与制作基于计算思维8.1.1 固定宽度布局n 一列固定宽度居中通过把具有一定宽度的元素的左、右外边距设置为auto，可以使得元素在浏览器中水平居中。网页设计与制作基于计算思维一列固定宽度居中一列固定宽度居中 网页设计与制作基于计算思维n header 的内容n container 的内容n footer 的内容n #header , #container ,#footer margi

3、n:0 auto;网页设计与制作基于计算思维n 两列固定宽度居中使用一个居中的div元素作为容器，将两列分栏的两个div元素放置在容器中，从而实现两列的水平居中显示。header的内容 sidebar的内容 maincontent的内容footer的内容网页设计与制作基于计算思维两列固定宽度居中列固定宽度居中网页设计与制作基于计算思维n #container height: 500px;width: 960px;margin:0 auto 10px;n #sidebar background-color: #0C3;height: 500px;width: 300px;float: left;

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

5、th: 200px;float: left;n #sidebar2 background-color: #0C3;height: 500px;width: 200px;float: right;n #maincontent background-color: #FC3;height: 500px;margin: 0 220px;网页设计与制作基于计算思维8.1.2 流动布局n 一列流动居中通过百分比来设置每栏的宽度，而不是具体的像素，可以创建流动布局的网页。把元素的左、右外边距设置为auto，可以使得元素在浏览器中水平居中。 header 的内容container 的内容 footer 的内容

6、#header , #container ,#footer width:80%;margin:0 auto;网页设计与制作基于计算思维n 两列流动居中与创建两列固定宽度居中的网页方式相同，只是在这种情况下，栏目的宽度是通过百分比来进行设置的。n n sidebar的内容n maincontent的内容n 网页设计与制作基于计算思维n #sidebar background-color: #0C3;height: 500px;width:20%;float: left;n #maincontent width:80%;background-color: #FC3;height: 500px;fl

7、oat: right;网页设计与制作基于计算思维8.2 网站中的导航n 垂直导航利用无序列表从上到下的排列方式形成垂直排列的形式。例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:#

8、c11136;color:#FFFFFF;#nav li a:hoverbackground-color:#990020; color:#ffff00; 网页设计与制作基于计算思维例9：#nav a:link background-color:#36F;border-left: 15px solid #666666;#nav a:hover border-left: 15px solid #F90;网页设计与制作基于计算思维n 水平导航利用float: left属性把列表项浮动起来，从而形成水平导航。首页新闻国内网页设计与制作基于计算思维n ul,limargin:0; padding:0;n

9、 #nav ul list-style-type:none; /* 不显示项目符号 */ 网页设计与制作基于计算思维n #nav width:960px;margin:0 auto;n #nav li float:left;网页设计与制作基于计算思维n #nav li a:linkndisplay:block; /* 区块显示 */nwidth:119px;npadding-top:5px ;npadding-bottom:5px;nmargin-right:1px;ntext-decoration:none;nbackground-color:#c11136;ncolor:#FFFFFF;n

10、text-align:center;n网页设计与制作基于计算思维#nav li a:hover /* 鼠标经过时 */background-color:#990020; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */网页设计与制作基于计算思维n 横向导航-变换背景颜色 11.html首页新闻国内网页设计与制作基于计算思维n #nav ul list-style-type:none;n #nav li float:left;网页设计与制作基于计算思维n #nav li a:link, #nav a:visited color:#000;display:block;t

11、ext-align:center;width:120px;padding-top:5px ;padding-bottom:5px;text-decoration: none;border-bottom: 4px solid #DEDEDE; 网页设计与制作基于计算思维n #nav li a:hover n border-bottom: 4px solid #6184A6;color: #336699;n text-decoration: none;网页设计与制作基于计算思维n 例12n #nav ul list-style-type:none;n #nav lifloat:left;n #na

12、v a:link,#nav a:visitednwidth:120px; height:45px;nline-height:45px; /* 垂直居中对齐 */ntext-decoration:none;ndisplay:block; color:#FFF;ntext-align:center;nbackground-image: url(images/nav01.gif);n n #nav a:hoverbackground-image:url(images/nav02.gif);网页设计与制作基于计算思维固定高度的DIV，垂直居中n .v40height:40px; background:

13、#060 n n .v40height:40px; background: #0F0; line-height:40px;网页设计与制作基于计算思维n 下拉菜单；例13：n n 首页n 电影新上映华语欧美日韩电影排行榜n网页设计与制作基于计算思维n #navwidth:960px;margin:0 auto;n ul,limargin:0; padding:0;n ul list-style: none; /*去掉列表符号*/n ul lifloat:left; /*水平排列*/position:relative;网页设计与制作基于计算思维n ul li ulposition:absolute

14、;display:none;left:0;n ul li:hover uldisplay:block;网页设计与制作基于计算思维n a:link,a:visitedwidth:191px;display:block;padding:10px 0;text-decoration:none;background-color:#c11136;margin-right:1px;color: #FFF;text-align:center;n a:hoverbackground-color:#F00;网页设计与制作基于计算思维8.3 首字下沉效果n 在CSS布局中，通过设置首字的大小并向左浮动，从而使得首

15、字与其他字符区别；通过右边距控制首字与其他字符的距离。网页设计与制作基于计算思维首字下沉实现方法一#firstfont-size:3em;font-weight:bold; float:left;margin-right:20px;1em=16px 云计算例14网页设计与制作基于计算思维首字下沉实现方法二：通过伪类设置首字样式n #containerwidth:900px;margin:0 auto;n #container p:first-letternfont-size:3em;nfont-weight:bold;nfloat:left;nmargin-right:20px;n n n 云

16、计算n 网页设计与制作基于计算思维8.4 自定义符号列表n 默认的无序列表或有序列表的符号较为单一，通过CSS可以形成丰富的自定义符号的列表内容。例16、：网页设计与制作基于计算思维n n n 基于2013-07-15n n n #newslist width:400px; 网页设计与制作基于计算思维n #newslist a float:left; n #newslist spannfont-size:12px;ncolor:#999;nfloat:right;n 网页设计与制作基于计算思维n #newslist a:linkcolor:#000; text-decoration:none;

17、 n #newslist linlist-style-type:none;nheight:28px;nline-height:28px;nbackground-image: url(images/arrow.jpg);nbackground-repeat: no-repeat;npadding-left:30px;nmargin-bottom:2px;n 网页设计与制作基于计算思维8.5 图文混排n 在CSS布局中，图文混排的实现原理与首字下沉的实现原理相同，通过设置图像向左或向右浮动，使得文字环绕在图像周围。网页设计与制作基于计算思维n 例18：n 故宫n n 悉尼n 网页设计与制作基于计算

18、思维n .buildingnborder-bottom:1px dashed #666;n n .building imgnborder:1px solid #CCC;npadding:10px;n 网页设计与制作基于计算思维n .flnfloat:left;nmargin-right:10px;n n .frnfloat:right;nmargin-left:10px;n 网页设计与制作基于计算思维n pntext-indent:2em;nfont-size:20px;nline-height:30px;n 网页设计与制作基于计算思维8.6 全图排版n 通过设置图像区块的内边距、边框、外边距

19、，并使得图像区块浮动起来，形成图像的并排效果。当浮动的图像整体宽度达到外围容器区块的宽度时，下一图像区块将在另一排中显示。网页设计与制作基于计算思维n 例19：n 网页设计与制作基于计算思维n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n .pic imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-color:#FFF;

20、n 网页设计与制作基于计算思维在一行显示n 例20：.pic img:hoverborder: 1px solid #0F0;background-color:#0F0;网页设计与制作基于计算思维改进 网页设计与制作基于计算思维n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n #container imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-color:#FFF;n n #containernwidth:960px;nmargin:0 auto;nbackground-color:#F3F2F3;n n .pic imgnfloat: left;nheight: 208px;nwidth: 208px;npadding: 10px;nborder: 1px solid #B2B2B2;n margin: 0 5px 5px;nbackground-