仿豆瓣（静态web布局）（全）
来源：互联网 发布：故宫淘宝与故宫旗舰店 编辑：程序博客网 时间：2024/06/05 16:26
静态页面布局
- 页面布局HTML
<!DOCTYPE html><!--快捷键“！+Tab”--><html xmlns="http://www.w3.org/1999/xhtml" class="sui-componentWrap"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--最好设置编码方式“gb2312”--><title></title><link rel="stylesheet" href="./css.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><!--用表格方式分别填背景--><!--分别使用a标签--> <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><!--一个a标签 --> <p></p> </div> <div class="hd-app"> <p class="app-title"> 豆瓣 <span>4.0</span> </p> <p class="app-slogan"> <span>我们的精神角落</span> </p> <a href="https://www.douban.com/doubanapp/app?channel=nimingye" class="lnk-app">下载豆瓣 App</a> <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">速度与激情8</a></p> <span class="hd-movie-point">7.1</span> <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.1</span> <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.1</span> <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.1</span> <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.1</span> <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.1</span> <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.1</span> <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.1</span> <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="">豆瓣FM</a> </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">豆瓣FM</a> </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.1</span> </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.1</span> </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.1</span> </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.1</span> </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 Lamar</a></p> <span class="hd-music-point">7.1</span> </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 Artists</a></p> <span class="hd-music-point">7.1</span> </li> <li> <a href=""><img src="./img/s29401381.jpg" height="80" width="80" alt="" /></a> <p class="hd-music-name">7.<a href=""> Async</a></p> <p class="hd-music-name"><a href="">坂本龙一 Sakamoto Ryūichi</a></p> <span class="hd-music-point">7.1</span> </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.1</span> </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">安静的卧室 II</p> </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>流派: 原声 Soundtrack</p></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">chimneycrow</a> <h2><p>流派: 电子 Electronica</p></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 Thoughts</a> <h2><p>流派: 电子 Electronica</p></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>流派: 民谣 Folk</p></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">刘瑞琦&1900</a> <h2><p>流派: 流行 Pop</p></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="">京公网安备11010502000728</a>新出网证(京)字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="">《食品流通许可证》许可证：SP1101051510347287</a></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;}阅读全文
0 0
- 仿豆瓣（静态web布局）（全）
- 仿google拖动布局（原创）
- 基于MEAN的仿豆瓣电影网站开发实战（1）
- 基于MEAN框架的仿豆瓣电影开发实战（2）
- 仿豆瓣音乐人
- 高仿豆瓣客户端
- 仿豆瓣网首页
- 仿计算器布局代码。（应用各种布局）
- WEB前端：rem布局仿淘宝首页
- 仿qq中国象棋（web版）
- Web滑动日期选择器（仿iOS）
- 仿豆瓣图书商城Jsonp
- 仿豆瓣电影星级排名
- React仿豆瓣网项目
- Web测试总结（全）
- Java仿Vista登录窗口（null布局的使用）
- Android高仿360安全卫士--布局篇（一）
- Android高仿360安全卫士--布局篇（2）
- LeetCode:557. Reverse Words in a String III
- python基础学习（2）
- p.net 子页面刷新父页面，页面自动刷新方法汇总
- RelativeLayout中的布局属性
- linux系统启动流程
- 仿豆瓣（静态web布局）（全）
- HDU1003`Max Sum(DP)
- 在asp.net中长内容自动分页的实现
- Vector源码
- 忘记bug,去跑步吧
- Linux下的文件描述符
- leetcode(461) Hamming Distance 简单题
- Java基础面试题
- POJ 3422 Kaka's Matrix Travels 费用流
