一、放豆瓣网首页
1.1 douban.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>仿豆瓣首页</title>
<link rel="stylesheet" href="./css.css" />
</head>
<body>
<!-- 顶部 -->
<div id="hd-header">
<a href="" class="header-logo"></a>
<form action="">
<input type="text" class="header-search" value="电影、音乐、书籍"/>
<p></p>
</form>
<ul>
<li><a href="" class="header-book"></a></li>
<li><a href="" class="header-movie"></a></li>
<li><a href="" class="header-music"></a></li>
<li><a href="" class="header-group"></a></li>
<li><a href="" class="header-fm"></a></li>
<li><a href="" class="header-local"></a></li>
</ul>
</div>
<!-- 顶部结束 -->
<!-- 注册区域 -->
<div id="hd-reg-background">
<div id="hd-reg">
<a href="" class="reg-join">加入我们<span>注册</span></a>
<p>发现更多生活</p>
<form action="">
<input type="text" class="reg-username"/>
<input type="text" class="reg-password"/>
<a href="" class="reg-login">登录</a>
<p class="reg-p">
<input type="checkbox" class="reg-rember"/>
<span>记住我</span>
</p>
<a href="" class="reg-forget">忘记密码</a>
</form>
</div>
</div>
<!-- 注册区域结束 -->
<!-- 内容区域 -->
<div id="hd-con">
<div class="con-left">
<h2 class="title">热点内容 · · · · · · </h2>
<ul>
<li>
<a href="" class="con-left-pic"><img src="./images/p1728984586.jpg" alt="" /></a>
<a href="">兔兔好萌</a>
<span>129张照片</span>
</li>
<li>
<a href="" class="con-left-pic"><img src="images/p442708830.jpg" alt="" /></a>
<a href="">兔兔好萌</a>
<span>129张照片</span>
</li>
<li>
<a href="" class="con-left-pic"><img src="images/p742239064.jpg" alt="" /></a>
<a href="">兔兔好萌</a>
<span>129张照片</span>
</li>
<li>
<a href="" class="con-left-pic"><img src="images/p1580889401.jpg" alt="" /></a>
<a href="">兔兔好萌</a>
<span>129张照片</span>
</li>
</ul>
</div>
<div class="con-mid">
<ul>
<li>
<a href="">学英语的段子</a>
<h2>Artful Dodger的日记 </h2>
<p>如果高考真的不考英语了，对我而言未尝不是一件省心事，至少我再也不用扭捏躲闪邮...</p>
</li>
<li>
<a href="">我的藏书保护之4/4 对于书本书衣的破损页面修补</a>
</li>
<li>
<a href="">我依旧相信努力的意义，奋斗的价值！</a>
</li>
<li>
<a href="">让他停留在他想要的姿态里，是一种真实的尊重</a>
</li>
<li>
<a href="">Margaret Howell:来自英国的简约品牌</a>
</li>
<li>
<a href="">【kris文摘】快节奏生活：三个省时工具让你跟“拖延症”说再见</a>
</li>
<li>
<a href="">贫穷不予温柔之名</a>
</li>
<li>
<a href="">老老实实吃草的牛</a>
</li>
</ul>
</div>
<div class="con-right right">
<h2 class="title right-title">
线上活动 · · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul>
<li>
<a href="">程序好好玩，大家要学好</a>
<p>时间：9月12日 - 12月10日 </p>
<b>1026人参加</b>
</li>
<li>
<a href="">这本书我再也读不下去啦！</a>
<p>时间：9月12日 - 12月10日 </p>
<b>1026人参加</b>
</li>
<li>
<a href="">垃圾好好玩，好好玩垃圾！</a>
<p>时间：9月12日 - 12月10日 </p>
<b>1026人参加</b>
</li>
<li>
<a href="">【2013倒计时】我们来念叨念叨那些想去</a>
<p>时间：9月12日 - 12月10日 </p>
<b>1026人参加</b>
</li>
<li>
<a href="">和生命中的他（她）重逢</a>
<p>时间：10月2日 - 12月2日 </p>
<b>1026人参加</b>
</li>
</ul>
<div class="last-ad">
<h2>和我一起</h2>
<a href="" class="last-ad-pic"><img src="./images/992c062504429c4.jpg" alt="" /></a>
<a href="" class="last-ad-ghost"><img src="./images/file-1381401029.png" alt="" /></a>
<a href="" class="last-ad-rainbow"><img src="./images/file-1381401007.png" alt="" /></a>
<a href="" class="last-ad-beghost">你最想成为那种鬼</a>
<p>时间：10/15-10/31 </p>
<span>567人参加 </span>
</div>
</div>
</div>
<!-- 内容区域结束 -->
<!-- 广告区域 -->
<div class="hd-ad">
<a href="" target="_blank"><img src="./images/0b64348aad6d21d.jpg" alt="" /></a>
</div>
<!-- 广告区域结束 -->
<!-- 电影区域 -->
<div id="hd-movie-background">
<div id="hd-movie">
<div class="left">
<a href="" class="left-title">电影</a>
<ul class="left-up">
<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>
<ul class="left-down">
<li>
<a href="" class="left-down-pic movie-pic"></a>
<a href="" class="left-down-des">豆瓣电影</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title">
正在热映 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="hd-movie-list">
<li>
<a href=""><img src="images/p2153376390.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">斯大林格勒</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="images/p2156476151.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">精灵旅社</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="images/p2155198242.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">猎仇者</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="images/p2153758345.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">铁血娇娃</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="images/p2155072056.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">我为相亲狂</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="./images/p2151837713.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">冲锋战警</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
<li>
<a href=""><img src="images/p2156152549.jpg" alt="" /></a>
<p class="hd-movie-name"><a href="">金刚狼2</a></p>
<span class="hd-movie-point">6.1</span>
<a href="" class="movie-choose">选购订票</a>
</li>
</ul>
</div>
<div class="right">
<h2 class="title right-title">
影片分类 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="movie-right-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="">惊悚</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="">德国</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="">日本</a></li>
<li><a href="">美国</a></li>
<li><a href="">战争</a></li>
<li><a href="">短片</a></li>
</ul>
<h2 class="title right-title">
近期热门 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="movie-right-down">
<li>1.<a href="">卑鄙的我2</a></li>
<li>2.<a href="">宠物</a></li>
<li>3.<a href="">爱在午夜降临前</a></li>
<li>4.<a href="">青春派</a></li>
<li>5.<a href="">玩具总动员之惊魂夜</a></li>
<li>6.<a href="">入学考试</a></li>
</ul>
</div>
</div>
</div>
<!-- 电影区域结束 -->
<!-- 读书区域 -->
<div id="hd-book">
<div class="left">
<a href="" class="left-title">读书</a>
<ul class="left-up">
<li><a href="">分类浏览</a></li>
<li class="book-new"><a href="">阅读</a><img src="./images/new_menu.gif" alt="" /></li>
<li><a href="">作者</a></li>
<li><a href="">书评</a></li>
<li><a href="">购书单</a></li>
</ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic book-read"></a>
<a href="" class="left-down-des">豆瓣阅读</a>
</li>
<li>
<a href="" class="left-down-pic book-write"></a>
<a href="" class="left-down-des">豆瓣笔记</a>
</li>
<li>
<a href="" class="left-down-pic book-buy"></a>
<a href="" class="left-down-des">豆瓣购书</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title">
新书速递 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul>
<li>
<a href=""><img src="images/475730.jpg" alt="" /></a>
<p><a href="">高城堡里的人</a></p>
<span>〔美〕菲利普·...</span>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href=""><img src="images/1962909.png" alt="" /></a>
<p><a href="">有限与无限的游...</a></p>
<span>〔美〕菲利普·...</span>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href=""><img src="images/1962364.png" alt="" /></a>
<p><a href="">大繁荣</a></p>
<span>〔美〕菲利普·...</span>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href=""><img src="images/1690362.jpg" alt="" /></a>
<p><a href=""> 没有梦想，何必...</a></p>
<span>〔美〕菲利普·...</span>
<a href="" class="book-free-read">免费试读</a>
</li>
</ul>
<h2 class="title book-num">
原创数字作品 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="book-num-ul">
<li>
<a href="" class="book-num-pic"><img src="images/1899221.jpg" alt="" /></a>
<p><a href="">美国童话</a></p>
<span>〔英〕珀西·比希·雪莱</span>
<b>12.00元</b>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href="" class="book-num-pic"><img src="images/1829611.jpg" alt="" /></a>
<p><a href="">五日谈</a></p>
<span>〔英〕珀西·比希·雪莱</span>
<b>12.00元</b>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href="" class="book-num-pic"><img src="images/1829269.jpg" alt="" /></a>
<p><a href=""> 佛，到底讲了些...</a></p>
<span>〔英〕珀西·比希·雪莱</span>
<b>12.00元</b>
<a href="" class="book-free-read">免费试读</a>
</li>
<li>
<a href="" class="book-num-pic"><img src="./images/80526.jpg" alt="" /></a>
<p><a href="">美好百科 On...</a></p>
<span>〔英〕珀西·比希·雪莱</span>
<b>12.00元</b>
<a href="" class="book-free-read">免费试读</a>
</li>
</ul>
</div>
<div class="right">
<h2 class="title right-title">
热门标签 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul>
<li>
<span>[文学]</span>
<a href="">小说</a>
<a href="">随笔</a>
<a href="">散文</a>
<a href="">日本文学</a>
<a href="">童话</a>
<a href="">诗歌</a>
<a href="">名著</a>
<a href="">港台</a>
<a href="">更多</a>
</li>
<li>
<span>[流行]</span>
<a href="">漫画</a>
<a href="">绘本</a>
<a href="">推理</a>
<a href="">青春</a>
<a href="">言情</a>
<a href="">科幻</a>
<a href="">武侠小说</a>
<a href="">奇幻</a>
<a href="">更多</a>
</li>
<li>
<span>[文化]</span>
<a href="">历史</a>
<a href="">哲学</a>
<a href="">传记</a>
<a href="">设计</a>
<a href="">建筑</a>
<a href="">电影</a>
<a href="">回忆录</a>
<a href="">音乐</a>
<a href="">更多</a>
</li>
</ul>
</div>
</div>
<!-- 读书区域结束 -->
<!-- 广告区域 -->
<div class="hd-ad">
<a href=""><img src="./images/017ae3b58072a9b.jpg" alt="" /></a>
</div>
<!-- 广告区域结束 -->
<!-- 音乐区域 -->
<div id="hd-music-background">
<div id="hd-music">
<div class="left">
<a href="" class="left-title music-title-a">音乐</a>
<ul class="left-up">
<li><a href="">音乐人</a></li>
<li><a href="">排行榜</a></li>
<li><a href="">分类浏览</a></li>
<li><a href="">豆瓣FM</a></li>
</ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic music-fm"></a>
<a href="" class="left-down-des">豆瓣FM</a>
</li>
<li>
<a href="" class="left-down-pic music-people"></a>
<a href="" class="left-down-des">豆瓣音乐人</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title music-title">
豆瓣新碟榜 · · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul>
<li>
<a href=""><img src="images/s27081296.jpg" alt="" /></a>
<p>1.<a href="">殃金咒</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s27057077.jpg" alt="" /></a>
<p>1.<a href=""> 我的小清新</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s27092740.jpg" alt="" /></a>
<p>1.<a href="">Graceland</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="./images/s27066103.jpg" alt="" /></a>
<p>1.<a href="">谈钞票伤感情 谈感情</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s27085316.jpg" alt="" /></a>
<p>1.<a href="">PRISM</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s26965442.jpg" alt="" /></a>
<p>1.<a href="">Moon Landing</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s27048190.jpg" alt="" /></a>
<p>1.<a href="">五月の蠅 / ラストバージン</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
<li>
<a href=""><img src="images/s27063338.jpg" alt="" /></a>
<p>1.<a href=""> LOVE【DVD付初回生産限定盤】</a></p>
<p><a href="">顶楼的马戏团</a></p>
<b>8.6</b>
</li>
</ul>
</div>
<div class="right">
<h2 class="title right-title">
本周流行音乐人.... <span>( <a href="">更多</a> )</span>
</h2>
<ul class="music-right-ul">
<li>
<em>1.</em>
<a href=""><img src="./images/8fc736add65e135.jpg" alt="" /></a>
<a href="" class="music-right-name">Jazzilipper~性感的拖鞋</a>
<p>流派: 说唱 Rap </p>
<b>93574人关注 </b>
</li>
<li>
<em>1.</em>
<a href=""><img src="./images/50fc2407e067c71.jpg" alt="" /></a>
<a href="" class="music-right-name">顶楼的马戏团</a>
<p>流派: 说唱 Rap </p>
<b>374人关注 </b>
</li>
<li>
<em>1.</em>
<a href=""><img src="./images/46151e682929d3e.jpg" alt="" /></a>
<a href="" class="music-right-name">baby formula</a>
<p>流派: 说唱 Rap </p>
<b>2574人关注 </b>
</li>
</ul>
</div>
</div>
</div>
<!-- 音乐区域结束 -->
<!-- 小组区域 -->
<div id="hd-group">
<div class="left">
<a href="" class="left-title music-title-a">小组</a>
<ul class="left-up">
<li><a href="">发现小组</a></li>
<li><a href="">发现话题</a></li>
</ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic group-lit"></a>
<a href="" class="left-down-des">豆瓣小组</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title">
热门小组· · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="group-mid-ul">
<li>
<a href="" class="group-pic"><img src="images/g289842-3.jpg" alt="" /></a>
<a href="" class="group-title">◎变态学英语交流小组◎</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g187430-36.jpg" alt="" /></a>
<a href="" class="group-title">“女权”是权利的权！然后呢？</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g24620-3.jpg" alt="" /></a>
<a href="" class="group-title">伊藤润二</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g62930-1.jpg" alt="" /></a>
<a href="" class="group-title">讨厌男生长指甲</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g273410-4.jpg" alt="" /></a>
<a href="" class="group-title">谜斗篷计划</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g49415-18.jpg" alt="" /></a>
<a href="" class="group-title">詭異的自然</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g298341-1.jpg" alt="" /></a>
<a href="" class="group-title">◎变态学英语交流小组◎</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g142992-3.jpg" alt="" /></a>
<a href="" class="group-title">陪妳渡过大姨妈（MC Help）</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g62993-7.jpg" alt="" /></a>
<a href="" class="group-title">笑点很奇怪</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g51009-3.jpg" alt="" /></a>
<a href="" class="group-title">我念高三了</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g16365-5.jpg" alt="" /></a>
<a href="" class="group-title">不信你没个什么癖！</a>
<span>69002 个成员 </span>
</li>
<li>
<a href="" class="group-pic"><img src="images/g50177-1.jpg" alt="" /></a>
<a href="" class="group-title">英剧！英剧！</a>
<span>69002 个成员 </span>
</li>
</ul>
</div>
<div class="right">
<h2 class="title right-title">
小组分类 · · · ·
</h2>
<ul class="group-right-ul">
<li>
<a href="" class="right-ul-first">兴趣</a>
<p>
<a href="">旅行</a>
<a href="">摄影</a>
<a href="">影视</a>
<a href="">音乐</a>
<a href="">文学</a>
<a href="">游戏</a>
<a href="">动漫</a>
<a href="">运动</a>
<a href="">戏曲</a>
<a href="">桌游</a>
<a href="">怪癖</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">生活»</a>
<p>
<a href="">健康</a>
<a href="">美食</a>
<a href="">宠物</a>
<a href="">美容</a>
<a href="">化妆</a>
<a href="">护肤</a>
<a href="">服饰</a>
<a href="">公益</a>
<a href="">家庭</a>
<a href="">育儿</a>
<a href="">汽车</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">购物»</a>
<p>
<a href="">淘宝</a>
<a href="">二手</a>
<a href="">团购</a>
<a href="">数码</a>
<a href="">品牌</a>
<a href="">文具</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">学术»</a>
<p>
<a href="">人文</a>
<a href="">社科</a>
<a href="">自然</a>
<a href="">建筑</a>
<a href="">国学</a>
<a href="">语言</a>
<a href="">宗教</a>
<a href="">哲学</a>
<a href="">软件</a>
<a href="">旅行</a>
<a href="">硬件</a>
<a href="">互联网</a>
</p>
</li>
</ul>
</div>
</div>
<!-- 小组区域结束 -->
<!-- 同城区域 -->
<div id="hd-local-background">
<div id="hd-local">
<div class="left">
<a href="" class="left-title local-big-a">同城</a>
<ul class="left-up">
<li><a href="">同城活动</a></li>
<li><a href="">主办方</a></li>
<li><a href="">舞台剧</a></li>
</ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic local-a"></a>
<a href="" class="left-down-des">豆瓣同城</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title">
北京 · 本周热门活动· · · · · <span>( <a href="">更多</a> )</span>
</h2>
<ul class="local-mid-ul">
<li>
<a href="" class="local-mid-pic"><img src="images/d5518b419927b90.jpg" alt="" /></a>
<div>
<a href="" class="local-mid-title">“与26所法国高与26所法国高与26所法国高” <span>正在售票</span></a>
<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
<p>266人关注</p>
</div>
</li>
<li>
<a href="" class="local-mid-pic"><img src="images/983709d555bcbc7.jpg" alt="" /></a>
<div>
<a href="" class="local-mid-title">【95折购票】果陀剧场 经典侦探喜剧《步步惊笑》</a>
<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
<p>266人关注</p>
</div>
</li>
<li>
<a href="" class="local-mid-pic"><img src="images/8670db9649f34cf.jpg" alt="" /></a>
<div>
<a href="" class="local-mid-title">“与26所法国高” <span>正在售票</span></a>
<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
<p>266人关注</p>
</div>
</li>
<li>
<a href="" class="local-mid-pic"><img src="images/2623653071f7212.jpg" alt="" /></a>
<div>
<a href="" class="local-mid-title">“与26所法国高” <span>正在售票</span></a>
<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
<p>266人关注</p>
</div>
</li>
</ul>
</div>
<div class="right">
<h2 class="title right-title">
活动标签 · · · ·
</h2>
<ul class="group-right-ul">
<li>
<a href="" class="right-ul-first">音乐»</a>
<p>
<a href="">小型现场</a>
<a href="">音乐会</a>
<a href="">演唱会</a>
<a href="">演唱会</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">戏剧»</a>
<p>
<a href="">话剧</a>
<a href="">音乐剧</a>
<a href="">舞剧</a>
<a href="">歌剧</a>
<a href="">戏曲</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">聚会»</a>
<p>
<a href="">生活</a>
<a href="">摄影</a>
<a href="">外语</a>
<a href="">桌游</a>
<a href="">交友</a>
<a href="">夜店</a>
<a href="">集市</a>
</p>
</li>
<li>
<a href="" class="right-ul-first">电影»</a>
<p>
<a href="">主题放映</a>
<a href="">影展</a>
<a href="">影院活动</a>
</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 同城区域结束 -->
<!-- 广告区域 -->
<div class="hd-ad">
<a href=""><img src="./images/6eb3f13b3b14980.jpg" alt="" /></a>
</div>
<!-- 广告区域结束 -->
<!-- 网页底部 -->
<div id="hd-foot">
<div class="foot-left">
<p> © 2005－2013 douban.com, all rights reserved </p>
<p>京ICP证XXXXXX号 京ICP备XXXXXXX号 网络视听许可证XXXXXXXXXX号 </p>
<p>文网文XXXXXXXXXXX号 <img src="./images/biaoshi.gif" alt="" />京公网安备XXXXXXXX 新出网证(京)字XXXX号</p>
</div>
<div class="foot-right">
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
<a href="">关于豆瓣</a>
</div>
</div>
<!-- 网页底部结束 -->
</body>
</html>
1.2 douban.css
/*清零*/
*{
margin: 0px;
padding: 0px;
}
body{
font:12px/1.62 Helvetica,Arial,sans-serif;
}
a{
text-decoration: none;
}
img,input{
border: none;
border: 1px solid none;
}
li{
list-style: none;
}
/*顶部*/
#hd-header{
width: 950px;
height: 90px;
margin: 0 auto;
position: relative;
}
#hd-header .header-logo{
display: block;
width: 154px;
height: 30px;
background: url(./images/logo_db.png) no-repeat;
position: absolute;
left: 0px;
top: 29px;
}
#hd-header .header-search{
width: 303px;
height: 30px;
border: 1px solid #c3c3c3;
position: absolute;
left: 183px;
top: 31px;
color: #e4e4e4;
padding-left: 7px;
line-height: 30px;
}
#hd-header p{
width: 13px;
height: 13px;
background: url(./images/bn_srh_1.png) no-repeat;
position: absolute;
left: 468px;
top: 42px;
}
#hd-header ul{
width: 402px;
height: 23px;
position: absolute;
right: 0px;
top: 36px;
}
#hd-header ul li {
float: left;
margin-right: 17px;
}
#hd-header ul li a{
display: block;
width: 43px;
height: 23px;
}
#hd-header ul li a.header-book{
background: url(./images/anony_nav_logo4.png) 0px 0px no-repeat;
}
#hd-header ul li a.header-movie{
background: url(./images/anony_nav_logo4.png) -59px 0px no-repeat;
}
#hd-header ul li a.header-music{
background: url(./images/anony_nav_logo4.png) -120px 0px no-repeat;
}
#hd-header ul li a.header-group{
background: url(./images/anony_nav_logo4.png) -179px 0px no-repeat;
}
#hd-header ul li a.header-fm{
width: 81px;
background: url(./images/anony_nav_logo4.png) -239px 0px no-repeat;
}
#hd-header ul li a.header-local{
background: url(./images/anony_nav_logo4.png) -340px 0px no-repeat;
}
/*顶部结束*/
/*注册区域*/
#hd-reg-background{
background: #e8edf1;
height: 88px;
width: 100%;
}
#hd-reg{
width: 950px;
height: 88px;
margin: 0 auto;
position: relative;
}
#hd-reg .reg-join{
display: block;
width: 120px;
height: 37px;
background: #ef7360;
border-radius: 2px;
font-size: 14px;
color: #fff;
line-height: 37px;
text-align: center;
position: absolute;
left: 0px;
top: 20px;
}
#hd-reg .reg-join:hover{
background: #ED6752;
}
#hd-reg .reg-join span{
font-size: 12px;
margin-left: 3px;
}
#hd-reg p{
position: absolute;
left: 138px;
top: 30px;
font-size: 16px;
color: #666666;
}
#hd-reg input{
position: absolute;
width: 158px;
height: 32px;
top: 20px;
line-height: 32px;
}
#hd-reg .reg-username{
right: 250px;
}
#hd-reg .reg-password{
right: 88px;
}
#hd-reg .reg-login{
display: block;
width: 80px;
height: 33px;
background: #3ba354;
color: #fff;
position: absolute;
right: 4px;
top: 20px;
text-align: center;
line-height: 33px;
border-radius: 2px;
font-size: 13px;
}
#hd-reg .reg-login:hover{
background: #1C9439;
}
#hd-reg p.reg-p{
position: absolute;
left: 544px;
top: 62px;
width: 85px;
height: 17px;
padding-left: 17px;
line-height: 17px;
color: #000;
font-size:12px;
}
#hd-reg p.reg-p .reg-rember{
position: absolute;
left: 0px;
top: 2px;
display: block;
width: 13px;
height: 13px;
}
#hd-reg .reg-forget{
position: absolute;
left: 704px;
top: 61px;
}
/*注册区域结束*/
/*内容区域*/
#hd-con{
width: 950px;
height: 546px;
margin: 35px auto 0;
position: relative;
}
#hd-con .con-left{
width: 373px;
height: 546px;
position: absolute;
left: 0px;
top: 0px;
}
#hd-con .con-left ul{
margin-top: 16px;
}
#hd-con .con-left ul li {
width: 171px;
height: 219px;
float: left;
margin-right: 10px;
}
#hd-con .con-left ul li a.con-left-pic:hover{
background: #fff;
}
#hd-con .con-left ul li span{
color: #999999;
}
#hd-con .con-mid{
position: absolute;
left: 380px;
top: 0px;
width: 270px;
height: 546px;
}
#hd-con .con-mid ul{
margin-top: 37px;
}
#hd-con .con-mid ul li{
line-height: 30px;
}
#hd-con .con-mid ul h2{
color: #999;
font-weight: 400;
font-size: 12px;
}
#hd-con .con-mid ul p{
color: #666666;
}
#hd-con .con-right {
height: 546px;
}
#hd-con .con-right p{
color: #999999;
}
#hd-con .con-right b{
display: block;
color: #999;
font-weight: 400;
}
#hd-con .con-right ul{
margin-top: 13px;
}
#hd-con .con-right ul li{
height: 57px;
padding-bottom: 13px;
overflow: hidden;
}
#hd-con .con-right .last-ad{
width: 258px;
height: 118px;
border: 1px solid #eeeeee;
position: absolute;
right: 6px;
bottom: 45px;
}
#hd-con .con-right .last-ad h2{
color: #000;
font-size: 15px;
position: absolute;
left: 19px;
top: 15px;
}
#hd-con .con-right .last-ad a.last-ad-pic{
position: absolute;
left: 19px;
top: 44px;
}
#hd-con .con-right .last-ad a.last-ad-ghost {
display: block;
width: 68px;
height: 28px;
overflow: hidden;
position: absolute;
left: 87px;
top: 11px;
}
#hd-con .con-right .last-ad a.last-ad-ghost:hover{
background: #fff;
}
#hd-con .con-right .last-ad a.last-ad-rainbow{
position: absolute;
right: 0px;
top: 0px;
}
#hd-con .con-right .last-ad a.last-ad-rainbow:hover{
background: #fff;
}
#hd-con .con-right .last-ad a.last-ad-beghost{
position: absolute;
left: 128px;
top: 46px;
}
#hd-con .con-right .last-ad p{
color: #999999;
position: absolute;
left: 128px;
top: 66px;
}
#hd-con .con-right .last-ad span{
color: #999999;
position: absolute;
left: 128px;
top: 80px;
}
/*内容区域结束*/
/*电影区域*/
#hd-movie-background{
height: 631px;
background: #f7f7f7;
margin-top: 44px;
padding-top: 40px;
}
#hd-movie-background #hd-movie{
width: 950px;
height: 631px;
margin: 0 auto;
position: relative;
}
#hd-movie-background #hd-movie .hd-movie-name{
display: block;
text-align: center;
}
#hd-movie-background #hd-movie span.hd-movie-point{
display: block;
width: 47px;
height: 14px;
overflow: hidden;
background: url(./images/midstars.gif) 20px 2px no-repeat;
text-align: left;
padding-left: 80px;
line-height: 16px;
color: #ff4400;
}
#hd-movie-background #hd-movie .movie-choose{
display: block;
width: 68px;
height: 23px;
background: #1c8bd0;
color: #fff;
line-height: 23px;
border-radius: 3px;
margin: 6px auto 0;
}
#hd-movie-background #hd-movie ul.hd-movie-list{
margin-top: 10px;
}
#hd-movie-background #hd-movie ul.hd-movie-list li{
margin-bottom: 40px;
overflow: hidden;
}
#hd-movie-background #hd-movie ul.hd-movie-list li img{
width: 100px;
height: 142px;
}
#hd-movie-background #hd-movie .movie-right-ul{
margin-top: 10px;
float: left;
margin-bottom: 10px;
}
#hd-movie-background #hd-movie .movie-right-ul li{
width: 45px;
float: left;
line-height: 25px;
}
#hd-movie-background #hd-movie .movie-title{
float: left;
margin-top: 20px;
}
#hd-movie-background #hd-movie .movie-right-down{
float: left;
}
#hd-movie-background #hd-movie .movie-right-down li{
border-bottom: 1px solid #eaeaea;
height: 35px;
line-height: 35px;
width: 264px;
}
#hd-movie-background #hd-movie .movie-right-down li a{
margin-left: 12px;
}
#hd-movie-background #hd-movie .movie-pic{
background: url(./images/app_icons_50_6.jpg) -350px 0 no-repeat;
}
/*电影区域结束*/
/*读书区域*/
#hd-book{
width: 950px;
height: 623px;
margin: 38px auto 0px;
position: relative;
}
#hd-book a{
color: #614e3c;
}
#hd-book a:hover{
color: #fff;
}
#hd-book .book-new{
position: relative;
}
#hd-book .book-new img{
position: absolute;
left: 28px;
top: 3px;
}
#hd-book .book-read{
background: url(./images/app_icons_50_6.jpg) no-repeat;
}
#hd-book .book-write{
background: url(./images/app_icons_50_6.jpg) -399px 0px no-repeat;
}
#hd-book .book-buy{
background: url(./images/app_icons_50_6.jpg) -200px 0px no-repeat;
}
#hd-book ul{
margin-top: 20px;
}
#hd-book ul .book-free-read{
display: block;
width: 68px;
height: 23px;
background: #999a95;
text-align: center;
line-height: 23px;
color: #fff;
margin: 0 auto;
border-radius: 2px;
}
#hd-book ul .book-free-read:hover{
background: #878882;
}
#hd-book .mid p{
margin-top: 5px;
}
#hd-book .mid ul li img{
width: 110px;
height: 164px;
}
#hd-book .book-num-ul{
clear: left;
float: left;
width: 520px;
}
#hd-book .book-num-ul a.book-num-pic{
display: block;
width: 100px;
height: 148px;
margin: 0 auto;
}
#hd-book .book-num-ul a.book-num-pic:hover{
background: #fff;
}
#hd-book .book-num-ul a.book-num-pic img{
width: 99px;
height: 149px;
}
#hd-book .book-num-ul b{
font-size: 12px;
color: #666;
font-weight: 400;
}
#hd-book h2.title{
margin-top: 0px;
/* width: 450px;*/
}
#hd-book h2.book-num{
line-height: 23px;
float: left;
margin-top: 10px;
}
#hd-book .right ul li{
border-bottom: 1px solid #eaeaea;
height: 60px;
padding-top: 13px;
}
#hd-book .right ul li span{
float: left;
margin-right: 11px;
color: #999999;
}
#hd-book .right ul li a {
float: left;
margin-right: 11px;
margin-bottom: 5px;
}
/*读书区域结束*/
/*音乐区域*/
#hd-music-background{
height: 464px;
background: #f7f7f7;
padding-top: 40px;
margin-top: 45px;
}
#hd-music-background a{
color: #555d53;
}
#hd-music-background a:hover{
color: #fff;
}
#hd-music-background #hd-music{
width: 950px;
height: 464px;
margin: 0 auto;
position: relative;
}
#hd-music-background #hd-music .music-fm{
background: url(./images/app_icons_50_6.jpg) -250px 0 no-repeat;
}
#hd-music-background #hd-music .music-people{
background: url(./images/app_icons_50_6.jpg) -50px 0 no-repeat;
}
#hd-music-background #hd-music .music-title-a{
color: #f38c6a;
}
#hd-music-background #hd-music .music-title-a:hover{
color: #fff;
}
#hd-music-background #hd-music .music-title a:hover{
color: #fff;
}
#hd-music-background #hd-music .mid ul{
margin-top: 10px;
}
#hd-music-background #hd-music .mid ul li{
margin-bottom: 66px;
}
#hd-music-background #hd-music .mid ul b{
display: block;
width: 81px;
height: 9px;
background: url(./images/midstars.gif) 20px 0 no-repeat;
padding-left: 45px;
color: #fd4400;
line-height: 9px;
font-weight: 400;
padding-top: 2px;
}
#hd-music-background #hd-music .music-title{
width: 350px;
}
#hd-music-background #hd-music .music-right-ul{
margin-top: 10px;
float: left;
width: 266px;
}
#hd-music-background #hd-music .music-right-ul li{
height: 82px;
position: relative;
}
#hd-music-background #hd-music .music-right-ul li img{
width: 48px;
height: 60px;
position: absolute;
left: 19px;
top: 0px;
}
#hd-music-background #hd-music .music-right-ul li em{
position: absolute;
left: 0px;
top: 4px;
font-style: normal;
}
#hd-music-background #hd-music .music-right-ul li .music-right-name{
position: absolute;
left: 77px;
top: 3px;
}
#hd-music-background #hd-music .music-right-ul li p{
position: absolute;
left: 77px;
top: 25px;
color: #999999;
}
#hd-music-background #hd-music .music-right-ul li b{
font-weight: 400;
position: absolute;
left: 77px;
top: 47px;
color: #999999;
}
/*音乐区域结束*/
/*小组区域*/
#hd-group{
width: 950px;
height: 642px;
margin: 40px auto 0;
position: relative;
}
#hd-group a{
color: #017a85;
}
#hd-group a:hover{
color: #fff;
}
#hd-group .group-lit{
background: url(./images/app_icons_50_6.jpg) -500px 0px no-repeat;
}
#hd-group .group-mid-ul li{
width: 265px;
height: 89px;
position: relative;
}
#hd-group .group-mid-ul li a.group-pic{
position: absolute;
left: 0;
top: 0;
}
#hd-group .group-mid-ul li a.group-title{
position: absolute;
left: 64px;
top: 0px;
}
#hd-group .group-mid-ul li{
float: left;
}
#hd-group .group-mid-ul li span{
position: absolute;
left: 64px;
top: 29px;
color: #999999;
}
.group-right-ul{
float: left;
}
.group-right-ul li{
width: 267px;
height: 63px;
margin-top: 16px;
}
.group-right-ul li a.right-ul-first{
font-size: 14px;
color: #333333;
}
.group-right-ul li a.right-ul-first:hover{
color: #fff;
}
.group-right-ul li p a{
float: left;
margin-right: 12px;
}
/*小组区域结束*/
/*同城区域*/
#hd-local-background{
background: #f7f7f7;
height:385px;
padding-top: 40px;
margin-bottom: 29px;
}
#hd-local-background #hd-local{
width: 950px;
height: 345px;
margin: 0 auto;
position: relative;
}
#hd-local-background #hd-local a{
color: #664433;
}
#hd-local-background #hd-local a:hover{
color: #fff;
}
#hd-local-background #hd-local .local-a{
background: url(./images/app_icons_50_6.jpg) -100px 0 no-repeat;
}
#hd-local-background #hd-local .local-big-a{
color: #ee6a03;
}
#hd-local-background #hd-local .local-mid-ul li{
width: 234px;
height: 141px;
position: relative;
margin-right: 28px;
}
#hd-local-background #hd-local .local-mid-ul li .local-mid-pic{
margin-left: 0px;
float: left;
}
#hd-local-background #hd-local .local-mid-ul li div{
float: right;
width: 160px;
}
#hd-local-background #hd-local .local-mid-ul li .local-mid-title{
text-align: left;
margin-left: 0px;
}
#hd-local-background #hd-local .local-mid-ul li .local-mid-title span{
background: #ff8263;
text-align: center;
color: #fff;
padding-left: 3px;
padding-right: 3px;
font-size: 11px;
/*white-space: nowrap;*/
}
#hd-local-background #hd-local .local-mid-ul li p{
margin-top: 3px;
color: #666666;
text-align: left;
}
#hd-local-background #hd-local .local-mid-ul li span{
margin-left: 3px;
margin-top: 3px;
color: #666666;
text-align: left;
padding: 2px;
border-radius: 3px;
}
/*同城区域结束*/
/*网页底部*/
#hd-foot{
width: 950px;
height:88px;
border-top: 1px dashed #dcdcdc;
margin: 35px auto 0;
padding-top: 17px;
}
#hd-foot .foot-left{
width: 460px;
color: #999999;
float: left;
}
#hd-foot .foot-right{
width: 460px;
float: right;
}
#hd-foot .foot-right a{
float: left;
margin-left: 8px;
}
/*网页底部结束*/
/*公共样式*/
a{
color: #3377aa;
}
a:hover{
background: #3377AA;
color: #fff;
}
h2.title{
font: 15px/150% Arial,Helvetica,sans-serif;
color: #007722;
width: 230px;
height: 24px;
}
h2.title span{
color: #666666;
font-size: 12px;
}
h2.right-title{
width: 266px;
float: left;
}
.right{
width: 266px;
position: absolute;
right: 0px;
top: 0px;
}
.hd-ad{
width: 950px;
height: 90px;
margin: 0 auto;
}
.left{
width: 121px;
position: absolute;
left: 0px;
top: 0px;
}
.left .left-title{
font-size: 24px;
color: #2297cc;
}
.left a:hover{
color: #fff;
}
.left .left-up{
margin-top: 5px;
}
.left .left-up li{
font-size: 14px;
line-height: 24px;
}
.left .left-down{
margin-top: 28px;
}
.left .left-down li{
width: 70px;
height: 93px;
}
.left .left-down li a.left-down-pic{
border-radius: 6px;
box-shadow: 3px 3px 3px #999;
display: block;
width: 50px;
height: 50px;
}
.left .left-down li a.left-down-des{
line-height: 25px;
}
.mid{
width: 530px;
position: absolute;
left: 121px;
top: 0px;
}
.mid ul li{
width: 127px;
text-align: center;
float: left;
}