第4章4CSS高级重点.ppt

ul a:hover ul{visibility:visible;} 对于CSS布局而言，本质就是大大小小的盒子在页面上摆放，我们看到的页面中的内容不是文字，也不是图像，而是一堆盒子。我们要考虑的就是盒子与盒子之间的关系，是标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等。将盒子之间通过各种定位方式排列使之达到想要的效果就是CSS布局基本思想。 如果用CSS对整个网页进行布局，那么基本步骤如下： （1）将页面用div分块； （2）通过CSS设计各块的位置和大小，以及相互关系； （3）在网页的各大div块中插入作为各个栏目框的小块 网页的布局从总体上说可分为固定宽度布局和可变宽度布局两类。所谓固定宽度是指网页的宽度是固定的，如780像素，不会随浏览器大小的改变而改变；而可变宽度是指如果浏览器窗口大小发生变化，网页的宽度也会变化，如将网页宽度设置为85%，表示它的宽度永远是浏览器宽度的85% text-align法： body{text-align：center；mini-width：790px；} #wrapper{margin：0 auto；text-align：left；width：780px；} margin法： #container { margin: 0 auto ; width: 780px; } #container { margin: 0 auto ; width: 85%; } 相对定位法： #container { position: relative; width:780px; left: 50%; margin-left: -390px; } 浮动法（三栏浮动） div id=headerid=header/div div id=container div id=naviid=navi/div div id=contentid=content/div div id=sideid=side/div /div div id=pagefooterid=pagefooter/div 由于栏目框可以重用，所以一般将它们添加类名 .rounded { background: url(images/left-top.gif) top left no-repeat; width:100%; } .rounded h2 { background: url(images/right-top.gif) top right no-repeat; padding:20px 20px 10px; margin:0; } 将每列的宽由固定的值改为百分比就行了 #header,#pagefooter,#container{ margin:0 auto; width：760px; /*删除原来的固定宽度*/ width:85%; /*改为比例宽度*/ } #content{ float:right; width：500px; /*删除原来的固定宽度*/ width:66%; /*改为比例宽度*/ } #side{ float:left; width：260px; /*删除原来的固定宽度*/ width:33%; /*改为比例宽度*/ } #header,#pagefooter,#container{ margin:0 auto; width:85%; } #contentWrap{ margin-right:-300px; float:left; width:100%; } #content{ margin-right:300px; } #side{ float:right; width:300px; } #pagefooter{ clear:both; }z #navi { width: 200px; position: absolute; left: 0px; top: 0px; } #content { right: 0px; top: 0px; margin-right: 200px; margin-left: 200px; } #side { width: 200px; position: absolute; right: 0px; top: 0px; } div id=container div id=innerContainer div id=navi div id=content div id=side 两侧列固定、中间列变宽的1-3-1式布局也是一种常用的布局形式，这种形式的布局通常是把两侧列设置成绝对定位元素，并对它们设置固定宽度。例如左右两列都设置