CSS布局及应用题库.pptVIP

下拉菜单；例13： div id=nav ul lia href=#首页/a/li lia href=#电影/a ul lia href=#新上映/a/li lia href=#华语/a/li lia href=#欧美/a/li lia href=#日韩/a/li lia href=#电影排行榜/a/li /ul /li …… /ul/div #nav{width:960px;margin:0 auto;} ul,li{margin:0; padding:0;} ul {list-style: none; /*去掉列表符号*/} ul li{float:left; /*水平排列*/ position:relative;} ul li ul{position:absolute;display:none;left:0;} ul li:hover ul{display: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:hover{background-color:#F00;} 8.3 首字下沉效果 在CSS布局中，通过设置首字的大小并向左浮动，从而使得首字与其他字符区别；通过右边距控制首字与其他字符的距离。 首字下沉实现方法一 #first{font-size:3em;font-weight:bold; float:left;margin-right:20px;} 1em=16px pspan id=“first”云/span计算 例14 首字下沉实现方法二：通过伪类设置首字样式 #container{width:900px;margin:0 auto;} #container p:first-letter{ font-size:3em; font-weight:bold; float:left; margin-right:20px; } div id=container p class=first云计算……/p /div 8.4 自定义符号列表 默认的无序列表或有序列表的符号较为单一，通过CSS可以形成丰富的自定义符号的列表内容。例16、： ul id=newslist li a href=#基于…/aspan2013-07-15/span /li /ul #newslist{ width:400px; } #newslist a{ float:left; } #newslist span{ font-size:12px; color:#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： div class=building img src=images/gugong2.jpg class=fl/ p故宫…/p /div div class=building img src=images/sydney.jpg class=fr/ p悉尼…/p /div .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; } p{ text-indent:2em; font-size:20px; line-height:30px; } 8.6 全图排版 通过设置图像区块的内边距、边框、外边距，并使得图像区块浮动起来，形成图像的并排效果。当浮动的图像整体宽度达到外围容器区块的宽度时，