本章内容的是CSS的重要内容。
float: left/right/none
设定为none是，左右皆不环绕。
s08_01.htm 【CSS】 img.left { float: left; margin-right: 0.8em; margin-bottom: 0.5em } img.right { float: right; margin-left: 0.8em; margin-bottom: 0.5em } p { clear: both; line-height: 1.4 } 【HTML】 <p> <img src="fish1.jpg" class="left" width="155" height="120" alt=""> 据《美国新闻与世界报道》周刊报道，5030计划是在美国国防部长拉姆斯菲尔德的指示下， 在过去两个月中，是由美军太平洋司令部司令托马斯·法戈将军和五角大楼高级规划人员 负责起草的。计划草案中提到，让ＲＣ－135侦察机逼近朝鲜领空，迫使朝鲜频繁出动拦 截机，从而消耗本来就十分匮乏的燃料；美国指挥官突然进行一次连续数周的军事演习， 迫使朝鲜人躲进掩体，把储藏的食品、水及其他宝贵资源消耗殆尽。 </p> <p> <img src="fish2.jpg" class="right" width="155" height="120" alt=""> 美国媒体认为，伊拉克战争让美国国防部鹰派官员尝到了甜头，他们急不可耐地将伊战的 一些经验和教训列入对朝作战计划，制定了新的5030计划。</p>
clear: left/right/both/none
left: 左环绕解除
right: 右环绕解除
both: 左右环绕皆解除
none: 左右环绕皆不解除
s08_02.htm 【CSS】 img.left { float: left; margin-right: 0.8em; margin-bottom: 0.5em } img.right { float: right; margin-left: 0.8em; margin-bottom: 0.5em } p { clear: both; line-height: 1.4 } 【HTML】 <p> <img src="fish1.jpg" class="left" width="155" height="120" alt=""> 据《武汉晚报》7月23日报道，今年湖北省高考文科状元周迅因为不符合今年 高考报名条件而落榜了。 </p> <p> 新浪科技讯 2003年8月1日上午9：30，由北京市质量技术监督局、北京市出入 境检验检疫局、海淀区人民政府主办的"国家强制认证执法检查授旗意识暨电子 信息类产品3C认证推介会"在海龙大厦隆重举行。 </p> <p> <img src="fish2.jpg" class="right" width="155" height="120" alt=""> 中国大陆的谎言社会化问题十分严重，就像垂垂老矣的行将朽木者，就像死不下台、 贪权恋栈的屠夫，以绞杀自由的全面逞能和人权的悲鸣为力。 </p> <p> 据透露，刘金宝现已承认侵吞了公款达二千五百万元，借批贷款收取近八百万元 的回扣。他还交代了给江绵恒的"贷款"都是违规违法的。据说，迄今为止他供出 的最有价值的消息是：国际清算银行去年12月发现的无人认账的20多亿外流美金 是JiangZeMing十六大前为自己准备后路而转移至海外的。 </p>
margin-left: auto; margin: auto margin: auto margin: 上下marin的值 auto margin: 上marin的值 auto 下marin的值
s08_03.htm 【CSS】 h1, p { margin-left: auto; margin-right: auto; padding: 20px; width: 150px; } table { margin: auto } h1, p, table { color: #ffffff; background: #ff6600 } 【HTML】 <h1>这是h1元素</h1> <p>这是p元素</p> <table border="3" cellpadding="6"> <tr><th>Head</th><th>Head</th><th>Head</th></tr> <tr><td>数据</td><td>数据</td><td>数据</td></tr> </table>
position: absolute 表示绝对位置 top: 距离 上边距离 bottom: 距离 下边距离 left: 距离 左边距离 right: 距离 右边距离
s08_04.htm 【CSS】 body { color: #000000; background: #ffffff url(grid.gif) } p { position: absolute; top: 150px; left: 250px; width: 150px; height: 50px; margin: 0; padding: 25px; font-weight: bold; color: #ffffff; background: #ff3300 } 【HTML】 <h1>绝对配置</h1> <p> 离顶部150px<br> 离左边250px </p>
position: relation 表示相对位置 top: 距离 上边距离 bottom: 距离 下边距离 left: 距离 左边距离 right: 距离 右边距离
s08_05.htm 【CSS】 h1 { font: bold 60px Arial, sans-serif; text-align: center; margin-bottom: 0; color: #99ccff; background-color: #ffffff } p { position: relative; top: -90px; font: bold 30px "华文行楷",Osaka,sans-serif; text-align: center; margin-top: 0; color: #000000; background-color: transparent } 【HTML】 请改变浏览器的高度和宽度来开效果。请改变浏览器的高度 和宽度来开效果。请改变浏览器的高度和宽度来开效果。 <h1>POSITION<br>RELATIVE</h1> <p>从普通的配置位置<br>相对地移动。</p>
position: fixed 表示相对位置 top: 距离 上边距离 bottom: 距离 下边距离 left: 距离 左边距离 right: 距离 右边距离
s08_06.htm 【CSS】 body { margin: 3em 0 1em; color: #000000; background: #ffffff url(grid.gif) } #navi { position: fixed; top: 0; left: 0; width: 100%; height: 1em; margin: 0; padding: 0.5em; text-align: center; color: #ffffff; background: #ffcc00; } h1, p { margin-left: 20px; margin-right: 20px; } 【HTML】 <h1>固定配置</h1> <p> 导航条（背景为黄色的部分）固定在顶部，不受滚动条的影响。（Netscape有效） </p> <div id="navi"> <a href="prev.html">前</a> | <a href="home.html">开头</a> | <a href="next.html">后</a> </div> <p> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> </p>
z-index: 重叠顺序(整数值)
s08_07.htm 【CSS】 #sample1 { position: absolute; z-index: 2; top: 130px; left: 100px; width: 170px; height: 90px; color: #ffffff; background-color: #339933 } #sample2 { position: absolute; z-index: 1; top: 30px; left: 240px; width: 100px; height: 220px; color: #ffffff; background-color: #ff3300 } #sample3 { position: absolute; z-index: 3; top: 180px; left: 150px; width: 180px; height: 50px; color: #ffffff; background-color: #333399 } #sample4 { position: absolute; top: 60px; left: 50px; width: 330px; height: 200px; color: #000000; background-color: #ffcc00 } p { padding: 0.5em } 【HTML】 <p id="sample1"> z-index:2<br>HTML文中的顺序:1 </p> <p id="sample2"> z-index:1<br>HTML文中的顺序:2 </p> <p id="sample3"> z-index:3<br>HTML文中的顺序:3 </p> <p id="sample4"> z-index未指定(0)<br>HTML文中的顺序:4 </p>
display: none 内容不显示，位置也不显示 visibility: hidden 内容不显示，位置保留
s08_08.htm 【CSS】 .none { display: none } .hidden { visibility: hidden } 【HTML】 <p>本段落和表格之间有一未显示的段落，因为设置为display: none所以不显示。 表格中第一行也被设置为display: none，所以不显示。位置也不显示。 </p> <p class="none"> 本段被设置为display: none所以不显示。 </p> <table border="3" cellpadding="4"> <tr class="none"> <th>Head</th><th>Head</th><th>Head</th> </tr> <tr> <td>数据</td><td>数据</td><td>数据</td> </tr> <tr class="hidden"> <td>数据</td><td>数据</td><td>数据</td> </tr> </table> <p class="hidden"> </p> 本段被设置为display: hidden所以不显示。但位置被显示。 <p> 表格和本段落之间有一未显示的段落，因为设置为display: hidden所以不显示。 表格中第三行也被设置为display: hidden，所以不显示。但位置被显示。 </p>
overflow: 表示形式有如下
visible 溢出部分直接显示
hidden 溢出部分不显示
scroll 溢出时显示垂直水平滚动条
auto 溢出时显示垂直滚动条
s08_09.htm 【CSS】 body { margin: 1.5em } #sample1 { overflow: scroll } #sample2 { overflow: auto } #sample3 { overflow: hidden } #sample4 { overflow: visible } p { width: 240px; height: 70px; line-height: 1.5; color: #000000; background: #ffcc00 } em { font-style: normal; font-weight: bold; font-size: middle; color: #ff0000; background: transparent } 【HTML】 <p id="sample1"> 【<em>overflow: scroll</em>】被指定。 overflow属性是指在文字内容大于Box范围的场合下， 设定该属性可以完成你的不同要求。 </p> <p id="sample2"> 【<em>overflow: auto</em>】被指定。 overflow属性是指在文字内容大于Box范围的场合下， 设定该属性可以完成你的不同要求。 </p> <p id="sample3"> 【<em>overflow: hidden</em>】被指定。 overflow属性是指在文字内容大于Box范围的场合下， 设定该属性可以完成你的不同要求。 </p> <p id="sample4"> 【<em>overflow: visible</em>】被指定。 overflow属性是指在文字内容大于Box范围的场合下， 设定该属性可以完成你的不同要求。 </p>