CSS布局及应用.ppt

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