css布局小结啦啦啦啦啦啦啦啦@慕课网原创_慕课网

css (cascading style sheets)小结

类型：
1. .内联式
  
  p标签举例： <p > </p>
2. 嵌入式
  
  p标签举例：<style type="text/css"> p{color:red;} </style>
3. 外部式
  
  p标签举例：<link herf="text.css" rel="stylesheet" type="text/css" /> p{color:red;}

布局示例

一列居中

<html>
<head>
<style type="text/css">
    *{margin:0;padding:0;}
    #wrap{width:440;margin:0 auto;}
    #header{width:100%;height:200px;border:1px solid red;}
    #mainbody{width:100%;height:200px;border:1px solid blue;}
    #footer{width:100%;height:100px;border:1px solid green;}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="mainbody"></div>
<div id="footer"></div> 
</div>
</body>
</html>

注： #wrap{width:440;margin:0 auto;}中：宽度确定！
2.浮动二列居中.

<html>
<head>
<style>
*{margin:0;padding:0;}
#wrap{background:#00c;margin:0 auto;width:600;}
#header{background:#0000ff;width:100%}
#mainbody{background:#ffff00;width:100%;overflow:hidden;}
.left{width:400px;height:200px;background:#eee;float:left;}
.right{width:190px;height:400px;background:#639;float:right;}
#footer{background:#ff0000;width:100%}
</style>
</head>
<body>
    <div id="wrap">
        <div id="header">头部</div>
        <div id="mainbody">
            <div class="left">left</div>
            <div class="right">right</div>
            主体部分
        </div>
        <div id="footer">版权部分</div>
    </div>
</body>
</html>

注：#mainbody{background:#ffff00;width:100%;overflow:hidden;} 中 overflow：hidden清除浮动；

绝对定位二列居中

<html>
    <head>
    <style>
    *{margin:0;padding:0;}
    #wrap{background:#00c;margin:0 auto;width:600;}
    #header{background:#0000ff;width:100%}
    #mainbody{background:#ffff00;width:100%;overflow:hidden;position:relative;}
    .left{width:30%;height:400px;background:#eee;}
    .right{width:70%;height:300px;background:#639;position:absolute;top:0px;right:0;}
    #footer{background:#ff0000;width:100%}
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">头部</div>
            <div id="mainbody">
                <div class="left">left</div>
                <div class="right">right</div>
                主体部分
            </div>
            <div id="footer">版权部分</div>
        </div>
    </body>
    </html>

注：绝对定位元素的偏移量参考最近的已定位的父层元素

横向菜单

<html>
    <head>    
    <style>
        *{margin:0;padding:0;font-size:18px;}
        ul{list-style:none;height:40px;border-bottom:5px solid #f60;}
         /* 使li标签左浮动*/
        li{float:left;margin-top:10;}
        a{text-decoration:none;display:block;height:30px;line-height:30px;width:80px;background-color:#ccc;margin-right:1px;text-align:center;}
        .on,a:hover{background-color:#f60;color:#fff;height:40;margin-top:-10;line-height:40px;}
    </style>
    </head>
    <body>
        <ul>
            <li><a class="on" href="#">首    页</a></li>
            <li><a href="#">最新动态</a></li>
            <li><a href="#">个人展示</a></li>
            <li><a href="#">留言板</a></li>
            <li><a href="#">联系我</a></li>
        </ul>
    </body>
    </html>

注：使用<ul><li>实现菜单