仿豆瓣網首頁（HTML+CSS)
阿新 • • 發佈：2018-11-14
一、放豆瓣網首頁
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;
}