DIV布局 - 苏荷酒吧

流体浮动布局

案例1

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
    <h1>这是标题</h1>
</div>
<div class="nav">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>
<div class="main">
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
</div>
<div class="footer">
    <p>版权所有，违版必究</p>
</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    background:#fff;
}
.head{
    width:auto;
    border:1px solid black;
    height:60px;
    line-height:60px;
    background:#ccc;
    margin-bottom:10px;
}
.head h1{
    width:auto;
    font-size:16px;
    text-align:center;
    
}
.nav{
    border:1px solid black;
    width:35%;
    height:400px;
    float:left;
    margin-bottom:10px;
}
.nav ul{
    text-align:center;
    margin:10px;
        line-height:150%;
}
.main{
    border:1px solid black;
    width:60%;
    height:400px;
    float:right;
    margin-bottom:10px;
}
.main p {
    margin:10px;
    text-indent:30px;
    line-height:150%;
    letter-spacing:2px;
}
.footer{
    border:1px solid black;
    clear:both;
    height:60px;
    line-height:60px;
}
.footer p{
    text-align:center;
}

案例1

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
    <h1>这是标题</h1>
</div>
<div class="nav">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>
<div class="main">
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
</div>

<div class="navr">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>    
</div>

<div class="footer">
    <p>版权所有，违版必究</p>
</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    background:#fff;
}
.head{
    width:auto;
    border:1px solid black;
    height:60px;
    line-height:60px;
    background:#ccc;
    margin-bottom:10px;
}
.head h1{
    width:auto;
    font-size:16px;
    text-align:center;
    
}
.nav{
    border:1px solid black;
    width:15%;
    height:400px;
    float:left;
    margin-bottom:10px;
}
.nav ul{
    text-align:center;
    margin:10px;
    line-height:150%;
}
.main{
    border:1px solid black;
    width:65%;
    height:400px;
    float:left;
    margin-bottom:10px;
    margin-left:2.5%;
}
.main p {
    margin:10px;
    text-indent:30px;
    line-height:150%;
    letter-spacing:2px;

}

.navr{
    border:1px solid black;
    text-align:center;
    height:400px;
    width:15%;
    float:right;
    
}
.footer{
    border:1px solid black;
    clear:both;
    height:60px;
    line-height:60px;
}
.footer p{
    text-align:center;
}

案例3

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
    <h1>这是标题</h1>
</div>
<div class="nav">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>

<div class="navr">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>    
</div>

<div class="main">
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
</div>



<div class="footer">
    <p>版权所有，违版必究</p>
</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    background:#fff;
}
.head{
    width:auto;
    border:1px solid black;
    height:60px;
    line-height:60px;
    background:#ccc;
    margin-bottom:10px;
}
.head h1{
    width:auto;
    font-size:16px;
    text-align:center;
    
}
.nav{
    border:1px solid black;
    width:15%;
    height:400px;
    float:left;
    margin-bottom:10px;
}
.nav ul{
    text-align:center;
    margin:10px;
    line-height:150%;
}
.main{
    border:1px solid black;
    width:65%;
    height:400px;
    margin-bottom:10px;
    margin-left:17%;
}
.main p {
    margin:10px;
    text-indent:30px;
    line-height:150%;
    letter-spacing:2px;

}

.navr{
    border:1px solid black;
    text-align:center;
    height:400px;
    width:15%;
    float:right;
    margin-bottom:10px;
}
.footer{
    border:1px solid black;
    clear:both;
    height:60px;
    line-height:60px;
}
.footer p{
    text-align:center;
}

流体相对布局

案例1

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="head">
    <h1>这是一个标题</h1>
</div>

<div class="main">
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
</div>
<div class="nav">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>


<div class="footer">这是footer</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}

body{
    
    
}

.head{
    border:1px solid black;
    padding:20px;
    width:auto;
    margin-bottom:10px;
}
.head h1{
    text-align:center;
    font-size:10px;
}

.main{
    border:1px solid black;
    padding:10px;
    /*width:60%;*/
    margin-right:34%;
    margin-bottom:10px;
}
.main p{
    text-indent:30px;
    text-height:150%;
    letter-spacing:2px;
}

.nav{
    width:20%;
    padding:10px;
    border:1px solid black;
    position:absolute;
    top:65px;
    right:10px;
    margin-bottom:10px;
    background:red;

}
.nav ul{
    text-align:center;
}
.footer{
    clear:both;
    padding:10px;
    border:1px solid black;
}

案例2

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="head">
    <h1>这是一个标题</h1>
</div>

<div class="main">
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
    <p>你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁</p>
</div>
<div class="nav">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>
<div class="nav2">
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</div>

<div class="footer">这是footer</div>
</body>
</html>

*{
    margin:0;
    padding:0;
}

body{
    
    
}

.head{
    border:1px solid black;
    padding:20px;
    width:auto;
    margin-bottom:10px;
}
.head h1{
    text-align:center;
    font-size:10px;
}

.main{
    border:1px solid black;
    padding:10px;
    /*width:60%;*/
    margin-right:25%;
    margin-left:25%;
    margin-bottom:10px;
}
.main p{
    text-indent:30px;
    text-height:150%;
    letter-spacing:2px;
}

.nav{
    width:20%;
    padding:10px;
    border:1px solid black;
    position:absolute;
    top:65px;
    right:10px;
    margin-bottom:10px;
    background:red;

}
.nav ul{
    text-align:center;
}
.nav2{
    width:20%;
    padding:10px;
    border:1px solid black;
    position:absolute;
    top:65px;
    left:0px;
    margin-bottom:10px;
    background:red;

}
.nav2 ul{
    text-align:center;
}
.footer{
    clear:both;
    padding:10px;
    border:1px solid black;
}

固定浮动布局

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="head">
        <h1>这是一个标题</h1>
    </div>
    <div class="body">
        <div class="nav">左导航</div>
        <div class="main">主内容</div>
    </div>

    <div class="footer">
        <p>博客园@黑兔子</p>
    </div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    text-align:center;
}

.head{
    margin-bottom:10px;
    width:600px;
    height:70px;
    margin:0 auto;
    background:#ccc;
    line-height:70px;
    text-align:center;
    margin-bottom:10px;
}

.head h1{
    height:100%;

}

.footer{
    width:600px;
    text-align:center;
    height:60px;
    line-height:60px;
    background:#ccc;
    margin:0 auto;
    clear:both;
}

.body{
    width:600px;
    margin:0 auto;
    margin-bottom:10px;
}

.nav{
    width:200px;
    height:600px;
    float:left;
    background:red;
    margin-bottom:10px;
}

.main{
    width:400px;
    height:600px;
    float:left;
    background:blue;
    margin-bottom:10px;
}

案例2

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="head">
        <h1>这是一个标题</h1>
    </div>
    <div class="body">
        <div class="nav">左导航</div>
        <div class="main">主内容</div>
        <div class="nav2">右导航</div>
    </div>

    <div class="footer">
        <p>博客园@黑兔子</p>
    </div>
</body>
</html>

*{
    margin:0;
    padding:0;
}
body{
    text-align:center;
}

.head{
    margin-bottom:10px;
    width:600px;
    height:70px;
    margin:0 auto;
    background:#ccc;
    line-height:70px;
    text-align:center;
    margin-bottom:10px;
}

.head h1{
    height:100%;

}

.footer{
    width:600px;
    text-align:center;
    height:60px;
    line-height:60px;
    background:#ccc;
    margin:0 auto;
    clear:both;
}

.body{
    width:600px;
    margin:0 auto;
    margin-bottom:10px;
}

.nav{
    width:150px;
    height:400px;
    float:left;
    background:red;
    margin-bottom:10px;
}

.main{
    width:300px;
    height:400px;
    float:left;
    background:blue;
    margin-bottom:10px;
}

.nav2{
    width:150px;
    height:400px;
    background:green;
    float:left;
}

posted on 2014-09-07 22:28 苏荷酒吧阅读(181) 评论(0) 收藏举报