页面模块常用的CSS命名
流体浮动布局：
规格：当视窗变化时跟着变化
采用：浮动布局
兼容：兼容当前主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局</title> <style type="text/css"> *{ margin:0; padding:0; } #header{ border:1px solid #0F0; height:60px; line-height:60px; background-color:#ccc; margin-bottom:10px; } #header h1{ font-size:16px; text-align:center; } #nav{ border:1px solid #0F0; width:20%; height:500px; float:left; margin-bottom:10px; margin-right:2%; } #nav ul{ text-align:center; line-height:50px; list-style:none; } #mian{ border:1px solid #0F0; width:56%; height:500px; float:left; margin-bottom:10px; } #mian p{ padding:10px; text-indent:30px;/*首行缩进*/ line-height:150%; } #navr{ border:1px solid #0F0; width:20%; height:500px; float:right; margin-bottom:10px; } #navr ul{ text-align:center; line-height:50px; list-style:none; } #footer{ border:1px solid #0F0; clear:both; height:60px; } #footer p{ text-align:center; line-height:60px; } </style> </head> <body> <div id="header"> <h1>这里是标题</h1> </div> <div id="nav"> <ul> <li>新闻</li> <li>杂志</li> <li>音乐</li> <li>体育</li> <li>体育</li> </ul> </div> <div id="mian"> <p>3月2日晚,一辆宝马车缓缓开入怀化学院,一名身材高大的年轻男子下车走入女生宿舍。一名舞蹈学院性格温柔、长相甜美、年仅21岁的花季少女，被捅21刀致死，而行凶人竟是自己的男友。</p> <p>据了解，女孩因受不了男友屡屡怀疑自己与别的男子有不正当关系，提出分手，遭到男子不断骚扰。据知情人透露，男子曾经在女孩住处发现有一些情趣用品，还有一种特殊的男士内裤，后他在网上查询得知，是一款能增强男性性功能的某品牌劳恩斯卫裤，故而怀疑女友与其它男子有染。</p> </div> <div id="navr"> <ul> <li>新闻</li> <li>杂志</li> <li>音乐</li> <li>体育</li> <li>体育</li> </ul> </div> <div id="footer"> <p>版权</p> </div> </body> </html>
流体定位布局
规格：当视窗变化时跟着变化
采用：定位布局
兼容：兼容当前主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局</title> <style type="text/css"> *{ margin:0; padding:0; } body{ margin:10px; } #header{ border:1px solid #0F0; padding:15px; margin-bottom:10px; } #header h1{ text-align:center; font-size:16px; } #mian{ border:1px solid #0F0; /*60%;*/ margin-right:40%; padding:10px; margin-bottom:10px; } #nav{ width:30%; border:1px solid #0F0; padding:10px; position:absolute; top:70px; right:10px; } #nav ul{ text-align:center; list-style:none; } #footer{ border:1px solid #0F0; height:50px; } #footer p{ line-height:50px; text-align:center; } </style> </head> <body> <div id="header"> <h1>上标题</h1> </div> <div id="mian"> <p>3月2日晚,一辆宝马车缓缓开入怀化学院,一名身材高大的年轻男子下车走入女生宿舍。一名舞蹈学院性格温柔、长相甜美、年仅21岁的花季少女，被捅21刀致死，而行凶人竟是自己的男友。</p> <p>据了解，女孩因受不了男友屡屡怀疑自己与别的男子有不正当关系，提出分手，遭到男子不断骚扰。据知情人透露，男子曾经在女孩住处发现有一些情趣用品，还有一种特殊的男士内裤，后他在网上查询得知，是一款能增强男性性功能的某品牌劳恩斯卫裤，故而怀疑女友与其它男子有染。</p> </div> <div id="nav"> <ul> <li>新闻</li> <li>杂志</li> <li>音乐</li> <li>体育</li> <li>体育</li> </ul> </div> <div id="footer"> <p>版权</p> </div> </body> </html>
固定浮动布局
规格：固定大小，不能随着视窗改变
采用：浮动布局
兼容：兼容当前主流浏览器
4. 固定定位布局
规格：固定大小，不能随着视窗改变
采用：定位布局
兼容：兼容当前主流浏览器