仿豆瓣（静态web布局）（全）

静态页面布局

页面布局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;
}

仿豆瓣（静态web布局）（全）相关推荐

仿豆瓣首页【web前端项目】
仿豆瓣首页[web前端项目] 下面是我之前做的一个静态页面,特此记录一下: 最需要耐心的是登录区的制作了: 以下是html部分代码: <!DOCTYPE html> <html la ...
《响应式Web设计全流程解析》一1.2　静态设计稿舒适区
本节书摘来异步社区<响应式Web设计全流程解析>一书中的第1章,第1.2节,作者: [美]Stephen Hay 译者: 余果 , 等责编: 赵轩,更多章节内容可以访问云栖社区" ...
Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
〖Web全栈开发③〗—HTTP协议和静态web服务器
HTTP协议和静态web服务器 (一)三次握手和四次挥手 (二)HTTP协议 2.1 HTTP协议的定义 2.2 HTTP协议的组成 (三)搭建python自带静态web服务器 3.1 静态web服务 ...
静态Web开发 JQuery
静态Web开发 JQuery 伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>> JQuery官网: http://jquery.com (下载j ...
Web 的全栈工程师必修课 - 关于 MVC 框架
本章我们将围绕 MVC 这个老而弥坚的架构模式展开方方面面的介绍,对于基于 Web 的全栈工程师来说,它是我们知识森林中心最茂密的一片区域,请继续打起精神,积极学习和思考. 无论是在 Web 全栈还是 ...
vue 仿豆瓣爬坑之旅
最近一直在学vue,想用vue做点东西,在网上找了很多,最后决定仿豆瓣做一个适合pc和移动端的应用.由于平时工作都是做的PC端而且只用Chrome浏览器,不考虑兼容问题,这次想有所突破,考虑一下兼容移 ...
Android仿豆瓣书影音频道推荐表单堆叠列表RecyclerView-LayoutManager
Android仿豆瓣书影音频道推荐表单堆叠列表RecyclerView-LayoutManager 项目地址:https://github.com/CCY0122/FocusLayoutManager ...
搭建Python自带静态Web服务器
学习目标能够知道搭建Python自带Web服务器 1. 静态Web服务器是什么? 可以为发出请求的浏览器提供静态文档的程序. 平时我们浏览百度新闻数据的时候,每天的新闻数据都会发生变化,那访问的这个 ...

仿豆瓣（静态web布局）（全）

静态页面布局

仿豆瓣（静态web布局）（全）相关推荐

最新文章

热门文章