CSS+DIV简单布局

花果山总钻风

于 2015-07-23 00:56:16 发布

阅读量347

点赞数

分类专栏： HTML/CSS/JS

本文链接：https://blog.youkuaiyun.com/dszgf5717/article/details/47013483

版权

HTML/CSS/JS 专栏收录该内容

49 篇文章

订阅专栏

摘自《网页开发手记》

1、效果图：

2、xhtml代码：

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>xhtml+css简单布局</title>
    <style type="text/css">
        *{
            margin: 0px; padding: 0px;
        }
        #all{
            width: 400px;
            height: 300px;
            margin: 0px auto;
            color: #f00;
        }
        #top, #bt{
            height: 50px;
            background-color: #ccc;
            color: #00f;
            font-weight: bold;
        }
        #list{
            width: 25%;
            height: 200px;
            float: left;
            background-color: #ddd;
        }
        #content{
            width: 75%;
            height: 200px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="all">
        <div id="top">顶部</div>
        <div id="mid">
            <div id="list">列表</div>
            <div id="content">内容</div>
        </div>
        <div id="bt">底部</div>
    </div>
</body>
</html>