一、放豆瓣网首页
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; }