CSS布局及应用教程

网页设计与制作——基于计算思维第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，可以使得元素在浏览器中水平居中。网页设计与制作——基于计算思维一列固定宽度居中网页设计与制作——基于计算思维divid=headerheader的内容/divdivid=containercontainer的内容/divdivid=footerfooter的内容/div#header,#container,#footer{margin:0auto;}网页设计与制作——基于计算思维两列固定宽度居中使用一个居中的div元素作为容器，将两列分栏的两个div元素放置在容器中，从而实现两列的水平居中显示。divid=headerheader的内容/divdivid=containerdivid=sidebarsidebarbr/的内容/divdivid=maincontentmaincontent的内容/div/divdivid=footerfooter的内容/div网页设计与制作——基于计算思维两列固定宽度居中网页设计与制作——基于计算思维#container{height:500px;width:960px;margin:0auto10px;}#sidebar{background-color:#0C3;height:500px;width:300px;float:left;}#maincontent{background-color:#FC3;height:500px;width:640px;float:right;}网页设计与制作——基于计算思维三列固定宽度居中三列固定宽度居中可以通过浮动定位或绝对定位的方式来实现。网页设计与制作——基于计算思维三列固定宽度居中网页设计与制作——基于计算思维divid=headerheader的内容/divdivid=containerdivid=sidebar1sidebar1br/的内容/divdivid=sidebar2sidebar2br/的内容/divdivid=maincontentmaincontent的内容/div/divdivid=footerfooter的内容/div网页设计与制作——基于计算思维#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:0220px;}网页设计与制作——基于计算思维8.1.2流动布局一列流动居中通过百分比来设置每栏的宽度，而不是具体的像素，可以创建流动布局的网页。把元素的左、右外边距设置为auto，可以使得元素在浏览器中水平居中。divid=headerheader的内容/divdivid=containercontainer的内容/divdivid=footerfooter的内容/div#header,#container,#footer{width:80%;margin:0auto;}网页设计与制作——基于计算思维两列流动居中与创建两列固定宽度居中的网页方式相同，只是在这种情况下，栏目的宽度是通过百分比来进行设置的。divid=containerdivid=sidebarsidebarbr/的内容/divdivid=maincontentmaincontent的内容/div/div网页设计与制作——基于计算思维#sidebar{background-color:#0C3;height:500px;width:20%;float:left;}#maincontent{width:80%;background-color:#FC3;height:500px;float:right;}网页设计与制作——基于计算思维8.2网站中的导航垂直导航利用无序列表从上到下的排列方式形成垂直排列的形式。例8：divid=navulliahref=#首页/a/liliahref=#新闻/a/liliahref=#国内/a/li……/ul/div网页设计与制作——基于计算思维#nav{width:200px;font-family:Arial;}#navul{list-style-type:none;/*不显示项目符号*/}#navli{border-bottom:1pxsolid#ED9F9F;}网页设计与制作——基于计算思维#navlia:link{display:block;padding:5px;text-decoration:none;background-color:#c11136;color:#FFFFFF;}#navlia:hover{background-color:#990020;color:#ffff00;}网页设计与制作——基于计算思维例9：#nava:link{background-color:#36F;border-left:15pxsolid#666666;}#nava:hover{border-left:15pxsolid#F90;}网页设计与制作——基于计算思维水平导航利用float:left属性把列表项浮动起来，从而形成水平导航。divid=navulliahref=#首页/a/liliahref=#新闻/a/liliahref=#国内/a/li……/ul/div网页设计与制作——基于计算思维ul,li{margin:0;padding:0;}#navul{list-style-type:none;/*不显示项目符号*/}网页设计与制作——基于计算思维#nav{width:960px;margin:0auto;}#navli{float:left;}网页设计与制作——基于计算思维#navlia: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;}网页设计与制作——基于计算思维#navlia:hover{/*鼠标经过时*/background-color:#990020;/*改变背景色*/color:#ffff00;/*改变文字颜色*/}网页设计与制作——基于计算思维横向导航-变换背景颜色11.htmldivid=navulliahref=#首页/a/liliahref=#新闻/a/liliahref=#国内/a/li……/ul/div网页设计与制作——基于计算思维#navul{list-style-type:none;}#navli{float:left;}网页设计与制作——基于计算思维#navlia:link,#nava:visited{color:#000;display:block;text-align:center;width:120px;padding-top:5px;padding-bottom:5px;text-decoration:none;border-bottom:4pxsolid#DEDEDE;}网页设计与制作——基于计算思维#navlia:hover{border-bottom:4pxsolid#6184A6;color:#336699;text-decoration:none;}网页设计与制作——基于计算思维例12#navul{list-style-type:none;}#navli{float:left;}#nava:link,#nava:visited{width:120px;height:45px;line-height:45px;/*垂直居中对齐*/text-decoration:none;display:block;color:#FFF;text-align:center;background-image:url(images/nav01.gif);}#nava:hover{background-image:url(images/nav02.gif);}网页设计与制作——基于计算思维固定高度的DIV，垂直居中.v40{height:40px;background:#060}divclass=v40/div.v40{height:40px;background:#0F0;line-height:40px;}网页设计与制作——基于计算思维下拉菜单；例13：divid=navulliahref=#首页/a/liliahref=#电影/aulliahref=#新上映/a/liliahref=#华语/a/liliahref=#欧美/a/liliahref=#日韩/a/liliahref=#电影排行榜/a/li/ul/li……/ul/div网页设计与制作——基于计算思维#nav{width:960px;margin:0auto;}ul,li{margin:0;padding:0;}ul{list-style:none;/*去掉列表符号*/}ulli{float:left;/*水平排列*/position:relative;}网页设计与制作——基于计算思维ulliul{position:absolute;display:none;left:0;}ulli:hoverul{display:block;}网页设计与制作——基于计算思维a:link,a:visited{width:191px;display:block;padding:10px0;text-decoration:none;background-color:#c11136;margin-right:1px;color:#FFF;text-align:center;}a:hover{background-color:#F00;}网页设计与制作——基于计算思维8.3首字下沉效果在CSS布