DIV+CSS 基础
- 盒子模型：margin(边界)，可被占位；border(边框)；padding(填充)；content(内容)
- 块元素：
- 默认占据一行，前后换行。
- 作为容器，装载块元素和行内元素，被装载元素的位置，会都受到容器的限制。
- 在CSS（display/float/position）作用下，块元素和行内元素无异。
- position可以改变位置受容器的限制：
- top/left/bottom/right 只有在设置了定位属性的元素中有效
- 相对定位（relative）：是相对于自己的原始位置进行位置偏移，偏移后，原始空间仍然会被占据，不以父级作为参考。
- 绝对定位（absolute）：相对于自己父级（必须具有定位属性的）进行位置偏移，偏移后，原始空间不被占用，脱离原有容器。若所有父级都没有定位属性，则选择浏览器作为父级。
- 层级次序：如由于定位（相对或绝对）而引起元素之间的遮掩，则可以通过设置 z-index：###调整层级位置，值越大就越在上层。
- 行内元素：
- 默认不占据一行，行内元素，前后不换行。
- 通常不作为容器，只装载内容。
- float：设置浮动属性时，如本身没有宽高属性时，元素将会自动占据最小的空间；如相邻元素没有使用margin（left/right）属性，相邻元素则会象磁贴一样紧紧地粘上自己。
- 横向与纵向布局：
- 横向五级菜单
<!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" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript"> <![CDATA[ $(document).ready( function() { $("li") .bind("mouseover",function(){$(this).attr("class","normal");}) .bind("mouseout",function(){$(this).romoveAttr("class");}); }); ]]> </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; } a { color: #808080; text-decoration: none; } a:hover { color: #000080; } #menu { width: 360px; } #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; } #menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; } #menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; } #menu ul li ul li ul{ display:none; margin-left:-2px; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li.normal > ul { display:block;} #menu ul li:hover > ul { display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">第一级菜单 1</a></li> <li><a href="#">第一级菜单 2</a> <ul> <li><a href="#">第二级菜单 2－1</a></li> <li><a href="#">第二级菜单 2－2</a> <ul> <li><a href="#">第三级菜单 2－2－1</a> <ul> <li><a href="#">第四级菜单 2－2－1－1</a></li> <li><a href="#">第四级菜单 2－2－1－2</a> <ul> <li><a href="#">第五级菜单 2－2－1－2－1</a></li> <li><a href="#">第五级菜单 2－2－1－2－2</a></li> </ul> </li> <li><a href="#">第四级菜单 2－2－1－3</a></li> </ul> </li> <li><a href="#">第三级菜单 2－2－2</a></li> </ul> </li> <li><a href="#">第二级菜单 2－3</a></li> </ul> </li> </ul> </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" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> <![CDATA[ $(document).ready( function() { $("li") .bind("mouseover",function(){$(this).attr("class","normal");}) .bind("mouseout",function(){$(this).romoveAttr("class");}); }); ]]> </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; } a { color: #808080; text-decoration: none; } a:hover { color: #000080; } #menu { width: 180px; border: 1px solid #ccc; border-bottom:none;} #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; } #menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;} #menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li.normal > ul { display:block;} #menu ul li:hover > ul { display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">第一级菜单 1</a></li> <li><a href="#">第一级菜单 2</a> <ul> <li><a href="#">第二级菜单 2－1</a></li> <li><a href="#">第二级菜单 2－2</a> <ul> <li><a href="#">第三级菜单 2－2－1</a> <ul> <li><a href="#">第四级菜单 2－2－1－1</a></li> <li><a href="#">第四级菜单 2－2－1－2</a> <ul> <li><a href="#">第五级菜单 2－2－1－2－1</a></li> <li><a href="#">第五级菜单 2－2－1－2－2</a></li> </ul> </li> <li><a href="#">第四级菜单 2－2－1－3</a></li> </ul> </li> <li><a href="#">第三级菜单 2－2－2</a></li> </ul> </li> <li><a href="#">第二级菜单 2－3</a></li> </ul> </li> </ul> </div> </body> </html>
-
float 布局
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css">
body{
margin:0;
padding:0;
text-align:center
} #container{ margin:0 auto; width:1024px; height:600px;
text-align:left; background:aqua; } #left{ background:#ccc; float:left; width:10%; height:100%; } #middle{ background:gray; width:80%; margin:0 10%; height:100%; } #right{ background:#ccc; float:right; width:10%; height:100%; } } </style> <title>无标题 1</title> </head> <body> <div id="container"> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </div> </body> </html> -
- 横向五级菜单
