一 、 效果图：

【PHP兴趣部落-03】css+div 搜狐网站简单布局_css

二 、css 代码：

/* ------内容体------ */
body{
    width: 900px;
    height: 800px;
    margin: 0 auto;
    font-size: 12px;
    /*border:1px solid green;*/
}

/* ------顶部------ */
.top{
    width: 900px;
    height: 24px;
    float: left;
    margin-top: 5px;
    /*background: silver;*/
}

/* 登录 */
.login{
    width: 350px;
    height: 22px;
    background: pink;
    float: left;

}

/* 设置首页面 */
.setindex{
    width: 85px;
    height: 22px;
    /*background: red;*/
    float: left;
    margin-left: 100px;
}

/* 超链接 */
.myhref{
    float: right;
    /*background: blue;*/
    margin-right: 10px;
    margin-top: 5px;
}

/* -----logo 部分-------*/
.logo{
    width: 125px;
    height: 56px;
    background: silver;
    float: left;
    margin-top: 3px;
}

/* -----导航 部分-------*/
.navi{
    width: 770px;
    height: 56px;
    background: green;
    float: right;
    margin-left: 5px;
    margin-top: 3px;
}

/* -----总体广告 部分-------*/
.adall{
    width: 900px;
    height: 211px;
    margin-top: 5px;
    float: left;
    border-style:solid;
    border-width:1px;
}

/* 教育 */ 
.adedu{
    width: 120px;
    height: 201px;
    background: green;
    margin: 5px 0 5px 5px;
    float: left;
}

/* 运动 */
.adsport{
    width: 400px;
    height: 201px;
    background: green;
    margin: 5px 0 5px 5px;
    float: left;

}

/* 房地产 */
.adhouse{
    width: 210px;
    height: 201px;
    background: green;
    margin: 5px 0 5px 5px;
    float: left;

}

/* 动漫 */
.adcartoon{
    width: 150px;
    height: 201px;
    text-align: center;
    padding-top: 10px;
    float: right;
    border-left:1px solid #000;
}

三、html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content= "text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="sohu.css" />
</head>

<body>

<!-- top 部分-->
<div class="top">
    <span class="login">登录</span>
    <span class="setindex">设置首页面</span>
    <span class="myhref">超链接</span>
</div>

<!-- logo 部分-->
<div class="logo">
    <img src="http://img.sj33.cn/uploads/allimg/201402/7-14020G14553B5.png" height="56px" width="125px" />
</div>

<!-- 导航 部分-->
<div class="navi">导航栏目</div>

<!-- 广告 部分-->
<div class="adall">
<div class="adedu">教育广告</div>
<div class="adsport">体育广告</div>
<div class="adhouse">房地产广告</div>
<div class="adcartoon">
    <img src="
</div>
</div>


</body>
</html>

Demo地址：Demo