一、豆瓣页面、html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣页面</title>
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<!--顶部导航栏-->
<header>
<!--顶部左侧导航-->
<ul class="left-ul">
<li><a href="#">豆瓣</a></li>
<li><a href="#">读书</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">同城</a></li>
<li><a href="#">小组</a></li>
<li><a href="#">阅读</a></li>
<li><a href="#">F44</a></li>
<li><a href="#">东西</a></li>
<li><a href="#">集市</a></li>
<li><a href="#">更多</a></li>
</ul>
<!--右侧导航-->
<ul class="right-ul">
<li><a href="#">下载豆瓣客户端</a></li>
<li><a href="#">提醒</a></li>
<li><a href="#">豆邮</a></li>
</ul>
</header>
<!--顶部下-->
<div class="banner">
<div class="huamg">
<img src="../img/banner.png" alt="豆瓣网"/>
<ul class="hang">
<li><a href="#">首页</a></li>
<li><a href="#">我的豆瓣</a></li>
<li><a href="#">浏览发现</a></li>
<li><a href="#">移动应用</a></li>
<!--<li><a href="#">游戏</a></li>-->
<li><a href="#">线上活动</a></li>
</ul>
<form action="">
<input type="text" placeholder="搜索你感兴趣内容和人"/>
<button>
<img src="../img/mirror.png" />
</button>
</form>
</div>
</div>
<!--内容区-->
<div class="container">
<!--左半边-->
<div class="left">
<ul class="leftul">
<li><a href="#"><b></b>说句话</a></li>
<li><a href="#"><b></b>发照片</a></li>
<li><a href="#"><b></b>推荐网页</a></li>
<li><a href="#"><b></b>写日记</a></li>
<li><a href="#"><b></b>发布东西</a></li>
</ul>
<p class="set"><a href="#">首页</a></p>
<form action="">
<input type="text" placeholder="分享生活的点点滴"/>
<button class="camera">
<img src="../img/icon2.png" />
</button>
</form>
<!--评论区-->
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h1>Violet日记</h1>
<div class="gray">
<div class="article">
<p><a href="#">怪力八面体-胡夫金子塔</a></p>
<p> 前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="picture">
<img src="../img/p35801459.jpg" alt="文章"/>
</div>
</div>
<p class="time">来自热门精选</p>
</div>
</div>
<!--评论区-->
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h4>李青菜的日记：</h4>
<div class="gray">
<div class="article">
<p><a href="#">金字塔</a></p>
<p>前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨
论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="picture">
<img src="../img/p35801459.jpg" alt="文章的配图"/>
</div>
</div>
<p class="time">1小时前，来自热门精选</p>
</div>
</div>
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h4>wand</h4>
<div class="gray">
<div class="article">
<p><a href="#">怪力八面体-胡夫金字塔</a></p>
<p>前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨
论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="picture">
<img src="../img/p35801459.jpg" alt="文章配图"/>
</div>
</div>
<p class="time">1小时前，来自热门精选</p>
</div>
</div>
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h4>赵志名的日志</h4>
<div class="gray">
<div class="article">
<p><a href="#">怪力八面体-胡夫金字塔</a></p>
<p>前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨
论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="picture">
<img src="../img/p35801459.jpg" alt="文章配图"/>
</div>
</div>
<p class="time">1小时前，来自热门精选</p>
</div>
</div>
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h4>wand</h4>
<div class="gray">
<div class="article">
<p><a href="#">怪力八面体-胡夫金字塔</a></p>
<p>前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨
论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="pinglun">
<img src="../img/p35801459.jpg" alt="文章配图"/>
</div>
</div>
<p class="time">1小时前，来自热门精选</p>
</div>
</div>
<div class="pinglun">
<img src="../img/cat.jpg" alt="头像"/>
<div class="neirong">
<h4>Violet的日记：</h4>
<div class="gray">
<div class="article">
<p><a href="#">怪力八面体-胡夫金字塔</a></p>
<p>前几天看见有人在广播里发了这个，搜了一下似乎
也没人针对这个写文章。今天咱们就来讨
论这个。几天看见有人在广播里发了这个，这几天
看见有人在这儿说这个。今天咱们就来讨
论这个。
</p>
<div class="like"><i></i>喜欢</div>
</div>
<div class="picture">
<img src="../img/p35801459.jpg" alt="文章配图"/>
</div>
</div>
<p class="time">1小时前，来自热门精选</p>
</div>
</div>
</div>
<!--右半边-->
<div class="right">
<div class="happen">
<h2>豆瓣正在发生······</h2>
<p><a href="#">哈利·波特第八部全球同步上架</a></p>
<p><a href="#">China Joy优秀游戏鉴赏</a></p>
</div>
<div class="adver">
<a href="#"><img src="../img/adver.jpg" alt="广告图片"/></a>
</div>
<p class="shenqing"><a href="#">>申请创建小站</a></p>
<div class="erweima">
<img src="../img/index_douban_ad_4.png" alt="二维码"/>
</div>
<div class="hot">
<h2>热门活动······<a href="#">（换一个）</a></h2>
<img src="../img/IMG_1870.JPG" alt="图片"/>
<p><a href="#">给我看看你们的美好工作台吧~</a></p>
<p>时间：6月27日-8月26日</p>
<p>参加：226人参加</p>
<p><a href="#">>更多线上活动</a></p>
</div>
<!--区块6（一拍一）-->
<div class="city">
<h2>豆瓣一拍一······<a href="#">（更多）</a></h2>
<div class="xiamen">
<a href="#">
<img src="../img/xiamen.jpg" alt="图片"/>
</a>
<p><a href="#">很高兴遇见你</a></p>
<p>城市：厦门</p>
<p>价格：2400</p>
</div>
<div class="beijing">
<a href="#">
<img src="../img/beijing.jpg" alt="图片"/>
</a>
<p><a href="#">微套系|至真系列</a></p>
<p>城市：北京</p>
<p>价格：1480</p>
</div>
<p class="open"><a href="#">>已开放17个城市</a></p>
</div>
<!--<!-（灾区儿童）–>-->
<a href="#">
<img src="../img/unicf.jpg" alt="献爱心" class="unicef"/>
</a>
</div>
</div>
<!--下面的底部-->
<footer>
<ul>
<li><a href="#">关于豆瓣·</a></li>
<li><a href="#">在豆瓣的工作</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">免责声明</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">豆瓣广告</a></li>
</ul>
<p>©2005-2016 douban.com,all rights reserved 北京豆网科技有限公司</p>
</footer>
</body>
</html>
二、豆瓣页面、CSS ：
*{
padding: 0;
margin: 0;
/*font-size: 0;*/
}
header{
width:100%;
height: 30px;
background-color: #555753;
}
/*顶部导航栏*/
header li{
list-style: none;
line-height: 30px;
}
.left-ul li{
float: left;
}
.hang{
width:100%;
}
.hang li{
width:20%;
float:left;
}
.right-ul{
float: right;
margin-right: 164px;
}
.right-ul li{
float: left;
}
header a{
text-decoration: none;
font-size: 12px;
padding: 0 12px;
}
header a:link{
color: #ffffff;
}
header a:visited{
color: #ffffff;
}
header a:hover{
font-size: 14px;
color: #565854;
background: 48px 30px #ffffff;
}
/*banner区域*/
.banner{
width:100%;
height: 75px;
background-color: #edf4ed;
}
.banner01{
width: 960px;
height: 75px;
background-color: #edf4ed;
margin: auto;
}
.banner01 img{
clear: both;
display: inline-block;
float: left;
margin: 22px 20px ;
}
.banner01 li{
float: left;
list-style: none;
padding: 0 11px;
}
.banner01 a{
text-decoration: none;
font-size: 16px;
font-weight: 700;
line-height: 75px;
}
.banner01 a:link{
color: #2b963b;
}
.banner01 a:visited{
color: #2b963b;
}
.banner01 a:hover{
font-size: 18px;
color: #b53e27;
}
.banner01 input{
display: inline-block;
float: right;
width: 260px;
height: 28px;
margin: 22.5px 0px;
}
.banner01 button img{
padding-left: 264px;
margin: 0 0;
}
button{
float: right;
width: 30px;
height: 30px;
margin: 22.5px 0;
border: none;
background: none;
}
/*内容区*/
.container{
clear: both;
width: 960px;
margin: auto;
overflow: hidden;
/*height: 1000px;*/
background-color: rgba(255, 169, 40, 0.7);
}
/*左半边*/
.left{
width:600px;
background-color: #ffffff;
height: 100%;
float: left;
padding-top: 50px;
}
/*搜索框上导航*/
.leftul li{
list-style: none;
float: left;
padding-right: 18px;
}
.leftul a{
text-decoration: none;
font-size: 14px;
}
.leftul b{
display: inline-block;
width: 19px;
height: 15px;
background-image: url("../img/icon.png");
}
.leftul li:nth-child(2) b{
background-position: 0 -16px;
}
.leftul li:nth-child(3) b{
background-position: 0 -33px;
}
.leftul li:nth-child(4) b{
background-position: 0 -50px;
}
.leftul li:nth-child(5) b{
background-position: 0 -67px;
}
.leftul a:link{
color: #1b96ff;
}
.leftul a:visited{
color: #1b96ff;
}
.leftul a:hover{
color: #000000;
}
.left p{
float: right;
font-size: 12px;
color: #888888;
}
.set a{
text-decoration: none;
font-size: 12px;
color: #888888;
}
.left .set a:link{
color: #888888;
}
.left .sett a:visited{
color: #888888;
}
.left .set a:hover{
text-decoration: underline;
}
.left input{
display: inline-block;
clear: both;
width: 596px;
height: 28px;
}
/*相机图标*/
.camera{
display: inline-block;
width: 17px;
height: 13px;
border: none;
margin: -20px 0 0 0;
background-image: url("../img/icon2.png");
}
.camera img{
padding: 0px;
margin: 0 0;
}
/*评论区*/
.pinglun{
width: auto;
overflow: hidden;
padding-top: 24px;
/*background-color: #1b96ff;*/
}
.pinglun a{
text-decoration: none;
font-size: 14px;
}
.pinglun a:link{
color: #1b96ff;
}
.pinglun a:visited{
color: #1b96ff;
}
.pinglun a:hover{
color: #000000;
}
.pinglun img{
float: left;
}
/*评论区内容*/
.neirong{
width: 537px;
float: right;
/*background-color: #2b963b;*/
}
h1{
height: 15px;
font-size: 12px;
margin-bottom: 12px;
}
.gray{
width: 515px;
height: 140px;
padding: 17px 0 17px 20px;
float: right;
background-color: #f9f9f9;
}
.article{
width: 338px;
float: left;
}
.article p{
float: none;
}
.article p:nth-child(1){
margin-bottom: 12px;
}
.picture img{
width: 107px;
height: 60px;
float: right;
padding-top: 10px;
padding-right: 24px;
}
.like{
display: inline-block;
width: 52px;
height: 20px;
border: 1px solid #aaaaaa;
margin: 16px 0;
text-align: center;
line-height: 20px;
}
.like i{
display:inline-block;
width: 12px;
height: 11px;
background-image: url("../img/ic_actions.png");
}
.like:hover i{
background-position: 0 -13px;
}
.like:hover{
color: #e03636;
}
.neirong .time{
clear: both;
float: none;
text-align: left;
padding: 10px 0 28px 20px;
font-size: 10px;
border-bottom: 1px solid #aaaaaa;
}
/*右半边*/
.right{
width:260px;
/*background-color: red;*/
height: 100%;
float:right;
}
.happen{
width: 224px;
height: 78px;
background-color: #f2f7f6;
padding: 18px;
margin-top: 50px;
}
/*区块一*/
.happen{
margin-bottom: 20px;
}
.happen h2{
font-size: 16px;
color: #007722;
margin-bottom: 16px;
}
.happen p{
font-size: 12px;
color: #3377aa;
margin-bottom: 14px;
}
.happen p a:hover{
color: #ff5522;
}
/*区块二*/
.adver img{
width: 260px;
margin-bottom: 48px;
}
/*区块三*/
.shenqing{
margin-bottom: 34px;
}
.right p a{
text-decoration: none;
color: #33a0da;
}
.right p a:hover{
color: #ff5522;
}
/*区块四（二维码）*/
.erweima img{
width: 260px;
margin-bottom: 32px;
}
/*区块五（热门活动）*/
.hot{
height: 120px;
margin-bottom: 38px;
/*background-color: #ffffff;*/
}
.hot h2{
font-size: 16px;
color: #007722;
margin-bottom: 16px;
}
.hot h2 a{
text-decoration: none;
font-size: 12px;
color: #33a0da;
}
.hot p{
font-size: 12px;
color: #3377aa;
}
.hot p:nth-child(4){
color: #888;
}
.hot p:nth-child(5){
color: #888;
}
.hot p:nth-child(6){
margin-top: 20px;
}
.hot img{
width: 48px;
float: right;
}
/*区块六*/
.city{
margin-bottom: 20px;
}
.xiamen{
height: 120px;
margin-bottom: 15px;
}
.city h2{
font-size: 16px;
color: #007722;
margin-bottom: 16px;
}
.city h2 a{
text-decoration: none;
font-size: 12px;
color: #33a0da;
}
.city div img{
float: left;
width: 120px;
margin-right: 10px;
}
.beijing{
height: 120px;
margin-bottom: 17px;
}
.xiamen p,.beijing p{
float: left;
color: #888;
font-size: 14px;
}
.city p{
float: left;
}
.open{
margin-bottom: 20px;
}
/*区块七（灾区儿童）*/
.unicef{
clear: both;
width: 260px;
}
/*底部*/
footer{
width: 960px;
height: 45px;
margin: auto;
margin-top: 60px;
border-top: 1px dashed #888888;
}
footer p{
font-size: 12px;
color: #888888;
line-height: 45px;
}
footer ul{
float: right;
}
footer ul li{
float: left;
padding: 0 5px;
}
footer ul li:nth-child(1){
list-style: none;
}
footer a{
text-decoration: none;
line-height: 45px;
font-size: 12px;
color: #33a0da;
}
原文：http://www.cnblogs.com/sics/p/7710788.html