仿豆瓣（静态web布局）（全）
静态页面布局
- 页面布局HTML
<html xmlns="http://www.w3.org/1999/xhtml" class="sui-componentWrap">
<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 class="header-search" maxlength="60" size="12" placeholder="书籍、电影、音乐、小组、小站、成员" name="q" autocomplete="off" type="text">
<a href=""><p>p>a>
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-local">a>li>
<li><a href="" class="header-fm">a>li>
<li><a href="" class="header-dong">a>li>
<li><a href="" class="header-fair">a>li>
ul>
div>
<div id="hd-reg-backgroud">
<div id="hd-reg">
<div>
<a href="" class="hd-join">加入我们<span>注册span>a>
<p>p>
div>
<div class="hd-app">
<p class="app-title">
豆瓣
<span>4.0span>
p>
<p class="app-slogan">
<span>我们的精神角落span>
p>
<a href="https://www.douban.com/doubanapp/app?channel=nimingye" class="lnk-app">下载豆瓣 Appa>
<div class="app-qr">
<a href="javascript: void 0;" class="lnk-qr" id="expand-qr"><img src="img/icon_qrcode_green.png" width="28" height="28">a>
<div class="app-qr-expand">
<img src="https://img3.doubanio.com/f/sns/1cad523e614ec4ecb6bf91b054436bb79098a958/pics/sns/anony_home/doubanapp_qrcode.png" width="160" height="160">
<p>iOS / Android 扫码直接下载p>
div>
div>
div>
<div>
<form action="">
<input type="text" class="reg-username" value="邮箱/手机号" />
<input type="text" class="reg-password" value="密码" />
<div class="opt">
<a href="https://www.douban.com/accounts/resetpassword">帮助a>
div>
<a href="" class="reg-login">登录豆瓣a>
<a href="" class="reg-zhuce">注册账号a>
<p class="reg-p"><input type="checkbox" class="reg-rember" />记住我p>
form>
div>
div>
div>
<div id="hd-guang1-backgroud">div>
<div id="hd-con">
<div class="con-left">
<h2 class="title">热点内容 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" />a>
<a href="">兔子好萌a>
<span>129张照片span>
li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" />a>
<a href="">兔子好萌a>
<span>129张照片span>
li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" />a>
<a href="">兔子好萌a>
<span>129张照片span>
li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" />a>
<a href="">兔子好萌a>
<span>129张照片span>
li>
ul>
div>
<div class="con-mid">
<ul>
<li>
<a href="">仍然沉默和不再沉默的——王小波十五年忌日访王小波墓a>
<h2>室内滂沱的日记 h2>
<p>《仍然沉默和不再沉默的——王小波十五年忌日访王小波墓》 我只希望我们的灵魂可以...p>
li>
<li>
<a href="">鬼a>
li>
<li>
<a href="">无声狗a>
li>
<li>
<a href="">“我以为我们的感情经得起当面要钱” | 45个关于爱和钱的故事，最后谁赢了？a>
li>
<li>
<a href="">收了那么多官二代，全真派的事业还是失败了a>
li>
<li>
<a href="">いし橋——为何会把一顿寿喜烧吃成修行a>
li>
<li>
<a href="">信号#7：如果有一天我失忆，但愿能被照片唤醒a>
li>
<li>
<a href="">纪念王小波 | “我不要孤独，孤独是丑的，令人作呕的”a>
li>
<li>
<a href="">友邻来信 | 普利策戏剧奖是一个什么水平的奖？a>
li>
<li>
<a href="">情到深处自然萌a>
li>
ul>
div>
<div class="right">
<ul>
<li>
<img src="./img/file-1431585796.jpg" width="268" height="112" alt="" />
li>
ul>
<h2 class="title">线上活动 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul>
<li>
<a href="">来一句王家卫式的话a>
<h2>时间：2月25日 - 5月24日h2>
<h2>1360人参加h2>
li>
<li>
<a href="">给我你的照片，让我为你画张肖像。2017鸡年大吉有奖版吧a>
<h2>时间：2月8日 - 5月7日h2>
<h2>1463人参加h2>
li>
<li>
<a href="">分享至今你读过的最喜欢的书a>
<h2>时间：2月13日 - 4月14日h2>
<h2>1073人参加h2>
li>
ul>
div>
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>
<img class="new" src="./img/new_menu.gif" height="7" width="17" alt="" />
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>
<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="more">更多a>span>)h2>
<ul class="hd-movie-list">
<li>
<a href=""><img src="./img/p2444256500.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name" ><a href="" class="abc">速度与激情8a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2455050536.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">大话西游之大圣...a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2362360950.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">指甲刀人魔a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2454150517.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">爱情冻住了a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2450440807.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">怨灵宿舍之人偶...a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2454730466.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">玩命试爱a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2453176400.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">攻壳机动队a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
<li>
<a href=""><img src="./img/p2448676053.jpg" height="150" width="100" alt="" />a>
<p class="hd-movie-name"><a href="" class="abc">嫌疑人X的献身...a>p>
<span class="hd-movie-point">7.1span>
<a href="" class="movie-choose">选座购票a>
li>
ul>
div>
<div class="right">
<h2 class="title">影片分类 · · · · · · (<span><a href="more">更多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>
<li><a href="">爱情a>li>
<li><a href="">爱情a>li>
ul>
<h2 class="title movie-title">近期热门 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="movie-right-down">
<li>1.<a href="">卑鄙的我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>
<li>7.<a href="">卑鄙的我a>li>
<li>8.<a href="">卑鄙的我a>li>
<li>9.<a href="">卑鄙的我a>li>
<li>10.<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>
<a href="">阅读a>
<img class="new" src="./img/new_menu.gif" height="7" width="17" 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-pic">a>
<a href="" class="left-down-des">豆瓣阅读a>
li>
ul>
div>
<div class="mid">
<h2 class="title">新书速递 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul>
<li>
<a href=""><img src="./img/s29385450.jpg" alt="" />a>
<p><a href="">封锁a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/s29398104.jpg" alt="" />a>
<p><a href="">天上再见a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/s29388806.jpg" alt="" />a>
<p><a href="">银河系科幻电影...a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/s29389296.jpg" alt="" />a>
<p><a href="">让大象飞a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
ul>
<h2 class="title book-title">原创数字作品 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="hd-book-cread">
<li>
<a href=""><img src="./img/32043534.jpg" alt="" />a>
<p><a href="">信仰a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/29805753.jpg" alt="" />a>
<p><a href="">旋转门a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/30170543.jpg" alt="" />a>
<p><a href="">总想对谁说起你..a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
<li>
<a href=""><img src="./img/29617924.jpg" alt="" />a>
<p><a href="">江口和蕙a>p>
<span>小白span>
<a href="" class="book-free-read">免费试读a>
li>
ul>
div>
<div class="right">
<h2 class="title">热门标签 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="hd-book-right">
<li class="right-top"><h2>[文学]h2>li>
<li><a href=""><a href="">小说a>a>li>
<li><a href=""><a href="">随笔a>a>li>
<li class="right-wen"><a href=""><a href="">日本文学a>a>li>
<li><a href=""><a href="">散文a>a>li>
<li><a href=""><a href="">诗歌a>a>li>
<li><a href=""><a href="">童话a>a>li>
<li><a href=""><a href="">名著a>a>li>
<li><a href=""><a href="">港台a>a>li>
<li><a href=""><a href="">更多a>a>li>
ul>
<ul class="hd-book-right">
<li class="right-top"><h2>[文学]h2>li>
<li><a href=""><a href="">小说a>a>li>
<li><a href=""><a href="">随笔a>a>li>
<li class="right-wen"><a href=""><a href="">日本文学a>a>li>
<li><a href=""><a href="">散文a>a>li>
<li><a href=""><a href="">诗歌a>a>li>
<li><a href=""><a href="">童话a>a>li>
<li><a href=""><a href="">名著a>a>li>
<li><a href=""><a href="">港台a>a>li>
<li><a href=""><a href="">更多a>a>li>
ul>
<ul class="hd-book-right">
<li class="right-top"><h2>[文学]h2>li>
<li><a href=""><a href="">小说a>a>li>
<li><a href=""><a href="">随笔a>a>li>
<li class="right-wen"><a href=""><a href="">日本文学a>a>li>
<li><a href=""><a href="">散文a>a>li>
<li><a href=""><a href="">诗歌a>a>li>
<li><a href=""><a href="">童话a>a>li>
<li><a href=""><a href="">名著a>a>li>
<li><a href=""><a href="">港台a>a>li>
<li><a href=""><a href="">更多a>a>li>
ul>
<ul class="hd-book-right">
<li class="right-top"><h2>[文学]h2>li>
<li><a href=""><a href="">小说a>a>li>
<li><a href=""><a href="">随笔a>a>li>
<li class="right-wen"><a href=""><a href="">日本文学a>a>li>
<li><a href=""><a href="">散文a>a>li>
<li><a href=""><a href="">诗歌a>a>li>
<li><a href=""><a href="">童话a>a>li>
<li><a href=""><a href="">名著a>a>li>
<li><a href=""><a href="">港台a>a>li>
<li><a href=""><a href="">更多a>a>li>
ul>
<ul class="hd-book-right">
<li class="right-top"><h2>[文学]h2>li>
<li><a href=""><a href="">小说a>a>li>
<li><a href=""><a href="">随笔a>a>li>
<li class="right-wen"><a href=""><a href="">日本文学a>a>li>
<li><a href=""><a href="">散文a>a>li>
<li><a href=""><a href="">诗歌a>a>li>
<li><a href=""><a href="">童话a>a>li>
<li><a href=""><a href="">名著a>a>li>
<li><a href=""><a href="">港台a>a>li>
<li><a href=""><a href="">更多a>a>li>
ul>
div>
div>
<div id="hd-music-background">
<div id="hd-music">
<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>
<li>
<a href="">乐评a>
li>
<li>
<a href="">豆瓣FMa>
li>
<li>
<a href="">歌单a>
li>
<li>
<a href="">阿比鹿音乐奖a>
li>
ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic FM-pic">a>
<a href="" class="left-down-des">豆瓣FMa>
li>
<li>
<a href="" class="left-down-pic music-pic">a>
<a href="" class="left-down-des">豆瓣音乐人a>
li>
ul>
div>
<div class="mid">
<h2 class="title">豆瓣新碟榜 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="hd-music-list">
<li>
<a href=""><img src="./img/s29418986.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">1.<a href="">实名制a>p>
<p class="hd-music-name"><a href="">好妹妹乐队a>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29400105.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">2.<a href="">山水清音图a>p>
<p class="hd-music-name"><a href="">窦唯 不一样a>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29419942.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">3.<a href="">「时间」十年特辑：歌选 (上)a>p>
<p class="hd-music-name"><a href="">白水a>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29408431.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">4.<a href=""> 间听监a>p>
<p class="hd-music-name"><a href="">窦唯 译乐队a>p>
<span class="hd-music-point">7.1span>
li>
ul>
<ul class="hd-music-list">
<li>
<a href=""><img src="./img/s29423021.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">5.<a href=""> DAMN.a>p>
<p class="hd-music-name"><a href="">Kendrick Lamara>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29413575.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">6.<a href="">Big Little Lies (Music From the HBO Limited Series)a>p>
<p class="hd-music-name"><a href="">Various Artistsa>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29401381.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">7.<a href=""> Asynca>p>
<p class="hd-music-name"><a href="">坂本龙一 Sakamoto Ryūichia>p>
<span class="hd-music-point">7.1span>
li>
<li>
<a href=""><img src="./img/s29419852.jpg" height="80" width="80" alt="" />a>
<p class="hd-music-name">8.<a href=""> 사랑이 잘a>p>
<p class="hd-music-name"><a href="">李知恩 IU 吴赫 Hyukoh혁오a>p>
<span class="hd-music-point">7.1span>
li>
ul>
<h2 class="title">热门歌单 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="hd-music-list">
<li>
<a href=""><img src="./img/12912-2.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">美好的粤语p>
li>
<li>
<a href=""><img src="./img/294606-1.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">安静的卧室 IIp>
li>
<li>
<a href=""><img src="./img/58434-1.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">粤语老歌p>
li>
<li>
<a href=""><img src="./img/1361604-1.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">Fifty Shades of Grey~p>
li>
ul>
<ul class="hd-music-list">
<li>
<a href=""><img src="./img/16696002-1.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">小森林里的合奏乐会p>
li>
<li>
<a href=""><img src="./img/8299408-1.jpg" height="80" width="80" /><img class="pos" src="./img/timeline-player-cover.png" alt="" />a>
<p class="hd-music-p">深夜熬作业复习啃资料p>
li>
ul>
div>
<div class="right">
<h2 class="title">本周流行音乐人 · · · · · · (<span><a href="more">更多a>span>)h2>
<ul class="music-right-ul">
<li>
<em>1.em>
<a href=""><img src="./img/015be928382bc37.jpg" height="48" width="48" alt="" />a>
<a href="" class="music-right-name">白水a>
<h2><p>流派: 原声 Soundtrackp>h2>
<h2><b>27737人关注b>h2>
li>
<li>
<em>2.em>
<a href=""><img src="./img/a7ea13fa023c8c8.jpg" height="48" width="48" alt="" />a>
<a href="" class="music-right-name">chimneycrowa>
<h2><p>流派: 电子 Electronicap>h2>
<h2><b>783人关注b>h2>
li>
<li>
<em>3.em>
<a href=""><img src="./img/28183f924e37a31.jpg" height="48" width="48" alt="" />a>
<a href="" class="music-right-name">Broken Thoughtsa>
<h2><p>流派: 电子 Electronicap>h2>
<h2><b>1128人关注b>h2>
li>
<li>
<em>4.em>
<a href=""><img src="./img/ec0a379e57e1793.jpg" height="48" width="48" alt="" />a>
<a href="" class="music-right-name">贰佰a>
<h2><p>流派: 民谣 Folkp>h2>
<h2><b>31585人关注 b>h2>
li>
<li>
<em>5.em>
<a href=""><img src="./img/2d1f899a3b10439.jpg" height="48" width="48" alt="" />a>
<a href="" class="music-right-name">刘瑞琦&1900a>
<h2><p>流派: 流行 Popp>h2>
<h2><b>23120人关注 b>h2>
li>
ul>
div>
div>
div>
<div id="hd-guang2-backgroud">div>
<div id="line">
<div class="line-left">
<ul>
<li>© 2005－2017 douban.com, all rights reserved 北京豆网科技有限公司li>
<li><a href="">京ICP证090015号 a>京ICP备11027288号 网络视听许可证0110418号 li>
<li>京网文[2015]2026-368号<img src="./img/biaoshi.gif" height="17" width="15" alt="" /><a href="">京公网安备11010502000728a>新出网证(京)字129号li>
<li>违法和不良信息举报电话：4008353331 <img src="./img/file-1423193113.png" height="16" width="108" alt="" />li>
<li><img src="./img/jubao.png" height="11" width="11" alt="" /><a href="">中国互联网举报中心 a>电话：12377<a href="">《食品流通许可证》许可证：SP1101051510347287a>li>
ul>
div>
<div class="line-right">
<ul>
<li><a href="">关于豆瓣a>li>
<li class="line-right-work"><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 class="line-right-ad"><a href="">豆瓣广告a>li>
<p><img src="./img/file-1489464722.jpg" height="63" width="150" alt="" />p>
ul>
div>
div>
body>
html>
2、 CSS样式
/*清零样式*/
*{ margin: 0px;
padding: 0px;
}
body{
font: 12px Helvetica,Arial,sans-serif;/*全文默认字体*/
}
a{
text-decoration: none;
}
img,input{
border: 0px;
}
li{
list-style: none;
}
/*头部*/
#hd-header{
width: 950px;
height: 90px;
margin: 0 auto;
position: relative;/*相对定位*/
}
#hd-header .header-logo{
display: block;/*a标签，此元素将显示为块级元素,此元素前后会带有换行符 */
width:154px;
height:30px;
position:absolute;/*绝对定位*/
background:url(./img/logo_db.png);
left:0px;
top:29px;
}
#hd-header .header-search{
width:270px;/*设置长和高*/
height:30px;
position: absolute;
left:183px;/*设置距离基准线的位置*/
top: 31px;
color:#e4e4e4;
border:1px solid #999;
padding-left: 7px;/*该属性设置元素左内边距的宽度*/
}
#hd-header p{/*搜索小图标的样式*/
width:13px;
height:13px;
background:url(./img/bn_srh_1.png) no-repeat;
position:absolute;
left: 441px;
top: 41px;
}
#hd-header ul{/*定义目录这个盒子的大小*/
width:468px;
height:22px;
position:absolute;
right: 0px;
top: 36px;
}
#hd-header ul li{
float:left;/*左浮动*/
margin-right: 19px;/*下一个单元距离上一个单元右侧距离*/
}
#hd-header ul li a{
display:block;/*a标签，此元素将显示为块级元素,此元素前后会带有换行符 */
width:39px;
height:22px;
}
#hd-header ul li a.header-book{
background:url(./img/anony_nav_logo.png) 0px 0px no-repeat;/*按照背景图片相对位置来实现需要的不同位置的背景*/
}
#hd-header ul li a.header-movie{
background:url(./img/anony_nav_logo.png) -60px 0px no-repeat;
}
#hd-header ul li a.header-music{
background:url(./img/anony_nav_logo.png) -120px 0px no-repeat;
}
#hd-header ul li a.header-group{
background:url(./img/anony_nav_logo.png) -180px 0px no-repeat;
}
#hd-header ul li a.header-local{
background:url(./img/anony_nav_logo.png) -239px 0px no-repeat;
}
#hd-header ul li a.header-fm{
background:url(./img/anony_nav_logo.png) -300px 0px no-repeat;
}
#hd-header ul li a.header-dong{
background:url(./img/anony_nav_logo.png) -359px 0px no-repeat;
}
#hd-header ul li a.header-fair{
width:42px;
background:url(./img/anony_nav_logo.png) -421px 0px no-repeat;
}
/*头部结束*/
/*注册区*/
/*注册区左侧*/
#hd-reg{/*首先定义一个盒子*/
width:950px;
height: 180px;
margin: 35px auto 0;
position: relative;
}
#hd-reg-backgroud{/*定义盒子的背景或颜色*/
background:url(./img/doubanapp4_bg.png);
height:180px;
width:100%;
}
#hd-reg .hd-join{
display: block;
width:120px;
height:37px;
background: #CD4B00;/*块级元素的背景用ps颜色取样*/
border-radius: 1px;/*定义圆角的边框*/
font-size: 14px;/*字体大小*/
color: #fff;/*字体颜色为白色*/
line-height: 37px;
text-align: center;/*居中现实*/
position: absolute;
left: 0px;/*相对基准线位置*/
top: 52px;
}
#hd-reg .hd-join:hover{
background: #ED6752; /*块级元素的触发后的颜色可以使用火狐自带的附件ColorZilla进行取样*/
}
#hd-reg .hd-join span{
font-size: 12px;
margin-left: 2px;/*“注册”两个小字距离前面文字的文字间距*/
}
/*注册区左侧结束*/
/*注册区中部开始*/
#hd-reg .hd-app{
width:161px;
height:100px;
position:absolute;
right: 373px;
top: 34px;
}
#hd-reg .app-title{
right: 373px;
top: 0;
margin: 7px 0;
font-size: 25px;
color: #111;
font-weight: bold;
line-height: 24px;
}
#hd-reg .app-title span{
color: #111;
margin-left: 10px;
font-weight: 100;
}
#hd-reg .app-slogan{
margin: 0 0 16px;
color: #111;
text-align: justify;
letter-spacing: 11px;
}
#hd-reg .app-slogan span{
font-size: 12px;
}
#hd-reg .lnk-app{
display: block;
width:114px;
height:30px;
background: #00B51D;/*块级元素的背景用ps颜色取样*/
border-radius: 2px;/*定义圆角的边框*/
font-size: 14px;/*字体大小*/
color: #fff;/*字体颜色为白色*/
line-height: 31px;
text-align: center;/*居中现实*/
position: absolute;
left: 0px;/*相对基准线位置*/
top: 68px;
}
#hd-reg .app-qr{
display: inline-block;
zoom: 1;
position: absolute;
right: 0px;
top: 68px;
}
#hd-reg .lnk-qr{
display: inline-block;
zoom: 1;
border-radius: 2px;
}
#hd-reg .app-qr-expand{
display: none;
position: absolute;
top: 0;
left: 0;
padding: 20px 20px 5px;
border-radius: 2px;
text-align: center;
font-size: 13px;
color: #666;
background: #fff;
line-height: 13px;
white-space: nowrap;
}
/*注册区中部结束*/
/*注册区右侧开始*/
#hd-reg input{
position: absolute;
width:272px;
height: 30px;
right: 0;
color:#e4e4e4;
padding-left: 8px;
border: 1px solid #DBE5DB;
}
#hd-reg .reg-username{
top:30px;/*#hd-reg后一定要空格加.reg-username*/
}
#hd-reg .reg-password{
top: 65px;
}
#hd-reg .opt{
position: absolute;
width:24px;
height: 12px;
right: 12px;
top: 78px;
}
#hd-reg .opt a{
color:#b8bdc6;
}
#hd-reg .reg-login{
display: block;
width: 134px;
height: 30px;
background:#30a080;
color: #fff;/*字体颜色*/
position: absolute;
right: 146px;
top: 102px;
text-align: center;
line-height: 33px;
}
#hd-reg .reg-login:hover{
background: #1C9439;
}
#hd-reg .reg-zhuce{
display: block;
width: 134px;
height: 30px;
color: #80c7bb;/*字体颜色*/
position: absolute;
right: 0px;
top: 102px;
text-align: center;
line-height: 33px;
border: 1px solid #30A080;
}
#hd-reg p.reg-p{
position: absolute ;
left: 670px;
top: 144px;
width: 84px;
height: 25px;
padding-left: 20px;
line-height: 17px;
}
#hd-reg p.reg-p .reg-rember{
position: absolute;
left: 0px;
top: 2px;
display: block;
width: 15px;
height: 13px;
float: left;
}
/*注册区右侧结束*/
/*广告区域*/
#hd-guang1-backgroud{
width: 950px;
height: 93px;
margin: 35px auto 0;
position: relative;
background: url(./img/2017-04-02T08-55-35.gif);
}
/*广告区域结束*/
/*注册区结束*/
/*内容区域*/
#hd-con{
width: 950px;
height: 524px;
margin: 42px auto 0;
position: relative;
}
#hd-con .more{
color:#796699;
}
#hd-con .con-left{
width: 382px;
height: 524px;
position: absolute;
left: 0;
top: 0;
}
#hd-con .con-left ul{
margin-top: 14px;
}
#hd-con .con-left ul li{
width: 172px;
height:198px;
float: left;
}
#hd-con .con-left ul li span{
color: #999999;
}
#hd-con .con-mid{
width: 301px;
height: 524px;
position: absolute;
left: 382px;
top: 0;
}
#hd-con .con-mid ul{
margin-top: 36px;
}
#hd-con .con-mid ul li{
line-height: 30px;
}
#hd-con .con-mid ul h2{
color: #999;
font-weight: normal;
font-size: 12px;
}
#hd-con .con-mid ul p{
color: #666666;
}
/*内容区域结束*/
/*电影区域*/
#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 .abc{
color: #111;
font: 14px Helvetica,Arial,sans-serif;
}
#hd-movie-background #hd-movie .abc:hover{
color:#fff;
}
#hd-movie-background #hd-movie .movie-choose{
display: block;
width: 69px;
height: 23px;
background: #1c8bd0;
color: #fff;
line-height: 23px;
border-radius: 3px;
margin-top: 6px;
margin:6px auto 0;
}
#hd-movie-background #hd-movie span.hd-movie-point{
width: 42px;
height: 12px;
display: block;
background: url(./img/ic_rating_s.png) 20px -33px no-repeat;
text-align: left;
padding-left: 85px;
color:#E19069;
}
#hd-movie-background #hd-movie ul.hd-movie-list{
margin-top: 16px;
}
#hd-movie-background #hd-movie ul.hd-movie-list li{
margin-bottom: 30px;
overflow: hidden;
}
#hd-movie-background #hd-movie .movie-right-ul{
margin-top: 25px;
float: left;
}
#hd-movie-background #hd-movie .movie-right-ul li{
float: left;
width: 45px;
line-height: 30px;
}
#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: 30px;
line-height: 35px;
width: 264px;
font-size: 14px;
}
#hd-movie-background #hd-movie .movie-right-down li a{
margin-left: 12px;
}
#hd-movie-background #hd-movie .movie-pic{
background: url(./img/app_icons_50_10.jpg) -350px 0px no-repeat;
}
/*电影区域结束*/
/*读书区域*/
#hd-book{
width: 950px;
height: 623px;
margin:38px auto 0px;
position: relative;
}
#hd-book a{
color:#563f2b;
}
#hd-book a:hover{
color: #fff;
}
#hd-book .book-pic{
background: url(./img/app_icons_50_10.jpg) 0px 0px no-repeat;
}
#hd-book ul{
margin-top: 10px;
}
#hd-book ul .book-free-read{
display: block;
width: 68px;
height: 23px;
background: #aaaba8;
text-align: center;
line-height: 23px;
margin: 0 auto;
color:#fff;
border-radius: 2px;
}
#hd-book ul .book-free-read:hover{
background: #999A95;
}
#hd-book .mid p{
margin-top: 5px;
}
#hd-book .mid img{
width: 102px;
height: 142px;
}
#hd-book .book-title{
float: left;
margin-top: 30px;
margin-bottom: 18px;
width: 530px;
}
#hd-book ul .hd-book-cread{
float: left;
top: 0;
}
#hd-book .hd-book-right{
float: left;
margin-top:10px;
border-bottom: 1px solid #eaeaea;
}
#hd-book .hd-book-right li{
float: left;
width: 37px;
line-height:35px;
}
#hd-book .hd-book-right li.right-wen{
width: 60px;
}
#hd-book .hd-book-right li.right-top{
width: 43px;
}
/*读书区域结束*/
/*音乐区域*/
#hd-music-background{
height: 853px;
background:#f7f7f7;
margin-top: 44px;
padding-top: 40px;
}
#hd-music-background #hd-music{
width: 950px;
height: 810px;
margin: 0 auto;
position: relative;
}
#hd-music-background #hd-music .FM-pic{
background: url(./img/app_icons_50_10.jpg) -250px 0px no-repeat;
}
#hd-music-background #hd-music .music-pic{
background: url(./img/app_icons_50_10.jpg) -50px 0px no-repeat;
}
#hd-music-background #hd-music .left-title{
color:#f38c00;
}
#hd-music-background #hd-music a{
color: #555d53;
}
#hd-music-background #hd-music a:hover{
background: #3377AA;
color:#fff;
}
#hd-music-background #hd-music .hd-music-name{
display: block;
text-align: center;
color: #555d53;
}
#hd-music-background #hd-music span.hd-music-point{
width: 42px;
height: 12px;
display: block;
background: url(./img/ic_rating_s.png) 20px -33px no-repeat;
text-align: left;
padding-left: 85px;
color:#E19069;
}
#hd-music-background #hd-music ul.hd-music-list{
margin-top: 6px;
float: left;
}
#hd-music-background #hd-music ul.hd-music-list li{
float: left;
margin-bottom: 50px;
overflow: hidden;
position: relative;
}
#hd-music-background #hd-music ul.hd-music-list img.pos{
position: absolute;
top: 20px;
left: 45px;
}
#hd-music-background #hd-music ul.hd-music-list p.hd-music-p{
color: #111;
margin-top: 18px;
font-size: 13px;
}
#hd-music-background #hd-music .music-right-ul li{
width: 266px;
height: 59px;
position: relative;
margin-top: 20px;
line-height: 14px;
}
#hd-music-background #hd-music .music-right-ul li img{
width: 48px;
height: 48px;
position: absolute;
left: 20px;
top: 0;
}
#hd-music-background #hd-music .music-right-ul li img:hover{
background: url(./img/icic_bg_play.doubanapp4_bg.png);
}
#hd-music-background #hd-music .music-right-ul li em{
left: 0;
top: 4px;
position: absolute;
font-style: normal;
}
#hd-music-background #hd-music .music-right-ul li .music-right-name{
position: absolute;
left: 77px;
top: 4px;
}
#hd-music-background #hd-music .music-right-ul li p{
position: absolute;
left: 77px;
top: 27px;
}
#hd-music-background #hd-music .music-right-ul li b{
font-weight: 400;
position: absolute;
left: 77px;
top: 47px;
}
/*音乐区域结束*/
/*广告区域*/
#hd-guang2-backgroud{
width: 950px;
height: 93px;
margin: 35px auto 35px;
position: relative;
background: url(./img/44f7567b0bd5fd8.jpg.png);
}
/*广告区域结束*/
/*结尾区域*/
#line{
width:950px;
height: 120px;
border-top: 1px dashed #eaeaea;
margin: 0 auto;
position: relative;
}
#line .line-left{
width: 542px;
height: 100px;
top: 20px;
left: 0;
position: absolute;
}
#line .line-left ul li{
color: #999;
line-height: 1.62;
float: left;
}
#line .line-left ul li img{
top: 3px;
position: relative;
}
#line .line-right{
width: 404px;
height: 100px;
top: 20px;
right: 0;
position: absolute;
float: left;
}
#line .line-right ul li{
float: left;
width: 57px;
line-height: 11px;
}
#line .line-right ul li.line-right-work{
width: 70px;
}
#line .line-right ul li.line-right-ad{
width: 48px;
}
#line .line-right ul p{
top: 25px;
position: absolute;
}
/*尾区域结束*/
/*公共样式*/
a{
color: #3377aa;
}
a:hover{/*a标签触发事件的背景和字体颜色*/
background: #3377AA;
color:#fff;
}
h2.title{
font: 15px Arial, Helvetica, sans-serif;
color: #007722;
}
h2.title span{
font-size: 12px;
}
.right{
width: 266px;
position: absolute;
right: 0;
top: 0;
}
.right ul{
width: 266px;
}
.right ul li{
line-height: 30px;
width: 267px;
}
.right ul h2{
color: #999;
font-weight: normal;
font-size: 12px;
}
.left{
width: 121px;
position: absolute;
left: 0;
top: 0;
}
.left .left-title{
font-size: 24px;
color: #175273;
}
.left a:hover{
color: #fff;
}
.left .left-up{
margin-top: 5px;
line-height: 24px;
}
.left ul li{
font-size: 14px;
margin-top: 5px;
}
.left ul li .new{
top: -5px;
position: relative;
}
.left .left-down {
margin-top: 28px;
}
.left .left-down li{
width: 60px;
height: 86px;
}
.left .left-down li a.left-down-pic{
border-radius: 6px;
box-shadow: 3px 3px 3px #999;
display:block;
width: 51px;
height: 51px;
}
.left .left-down li a.left-down-des{
line-height: 25px;
font-size: 12px;
}
.mid{
width: 530px;
position: absolute;
left: 121px;
top: 0;
}
.mid ul li{
width: 130px;
text-align: center;
float: left;
}