页面布局：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>榕树下-彭青博客</title> <link type="text/css" rel="stylesheet" href="./css/blog.css"> </head> <body> <header> <div class="headerbg"> <div class="headtop"></div></div> </header> <div class="box clear"> <div class="conLeft"> <div class="author"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/6.jpg" alt="彭青"></div> <div class="title"><h2>作家标签</h2></div> <div class="tags clear"> <span>双子女</span> <span>小清新</span> <span>文艺范儿</span> <span>感性</span> <span>真实</span> <span>《青春多是无奈》</span> </div> <div class="title"><h2>大家在说...</h2></div> <div class="said"> <ul> <li><p>@彭青sandee 的表现应该是今年#草莓音乐节# 最大黑马，面对暴风沙尘和摇滚舞台的挑战，彭青全程美丽淡定开唱，用这次不寻常的演出经历，树立了一个全新的文青女神形象，也终于让大陆的文青们，终于有了一面旗帜，美丽而充满正能量！</p><span class="thirdParty">——@何小Poppy</span></li> <li><p>很悦耳的标准抒情歌，才华不用怀疑，专辑里面欢快的歌挺多，我还是更喜欢DEMO，最爱的还是《青春多是无奈》和两首公益歌《向往》和《彩虹》，公益歌能写成这样非常成功！可以听出来是内心真的情感所触发的旋律和词，极有传唱性却不失质感，希望她可以走的更远！彭青，加油！</p><span class="thirdParty">——歌迷评价</span></li> <li><p>这张专辑里，我最喜欢的歌曲却是《彩虹》。虽然青春多是无奈，彭青却在末曲里唱出，大大的世界里，太多的坏消息，我努力的也许，改变不了结局，但我也想争取，温暖你无助的心。 </p><span class="thirdParty">——豆瓣歌迷</span></li> <li><p>彭青的创作和声音，我非常喜欢。她的歌，听着舒服。每次坐长途车，少不了她的歌声的陪伴</p><span class="thirdParty">——80后女生</span></li> <li><p>她的音乐流畅清新，里面总带有一种微微的惆怅，又带有一份天真的浪漫。音乐是她的蝴蝶泉、旅行是她的大不同世界、写作是她的四月物语。而她本人，更是洒脱与自然，给人予舒服的感觉，世界对于她有无限多的可能，她对于世界抱有更多的期许与美好。</p><span class="thirdParty">——媒体评价</span></li> </ul> </div> </div> <div class="conRight"> <div class="desc"> <h1>彭青其人</h1> <p>歌手，词曲作者，音乐制作人</p> <p>80后流行女音乐人代表，创作歌手，制作人，DJ，mv导演。18岁创作《蝴蝶泉边》传唱全国，相继与周迅，张靓颖，何洁，冯绍峰等大牌艺人合作，创作《你是我的风景》《这世界唯一的你》《这么近那么远》等歌曲。彭青的个人歌曲小样已累计创造百万人次的网络试听，音乐作品渗透在电视，电影，广播，文学，公益，教育等行业,与Rayban，Lee，Skullcandy，Casio等知名品牌跨领域合作。</p> <div class="desct"> <p>2013推出个人首张创作专辑《青春多是无奈》，上榜即获亚马逊流行唱片销售冠军。</p> </div> </div> <div class="rightcon"> <div class="title"><h2>你来我往</h2></div> <dl> <dt>80后的青春，是精神独立的青春；85后的青春，是个性独立的青春</dt> <dd>彭青，85后，发行2张唱片专辑，《青春多是无奈》和《弄城》，第一张清新励志，第二张思考中带有惆怅。她说过她的《青春多是无奈》是10个故事；《弄城》是六个。比如她的第一首歌《Glowing Sun》是有关对爱情的憧憬：每个女孩，心里都住着一个男神。他如同清晨太阳从海底升起，炫目，耀眼，有距离。她曾带着坚定的信仰走向他。但他并不知道，也没有意识到，她的爱同样炙热。她奔向他，早已沦陷。触摸不到，也要奔向光明。</dd> <dt>由青春到独立思考的不同转变；最终写到情歌里</dt> <dd>离开一个人永远比爱上一个人要艰难， “过去了”这三个字看起来简单坦荡，却藏着最多的难言之隐。我们都在疗伤时候都听过同一句安慰的话－－没关系的，时间可以冲淡一切。“时间可以冲淡一切”，这大概是我听过最扯的谎话了。时间的作用，只是让我们无法计较而已。我唯一的办法就是写情歌。</dd> <dt>有关写情歌时候的状态</dt> <dd> 写情歌最辛苦了，如果投入了真实的感情就会自动开始原音重现，回顾到温暖的记忆当然开心死了，可回顾到那些痛苦的记忆就好像自己用手挖开一个已经结了的伤疤，直愣愣地看着里面连着皮的血肉。我知道，只有把伤口摊开彻底的消毒，才会真正的痊愈，即使要留疤，也比较漂亮一点，所以我逼着自己继续。</dd> <dt>有关《青春多是无奈》</dt> <dd>很多歌曲总会唤醒青春，戳中泪点，带回记忆。青春是拧巴，是忧伤，是带有遗憾的心酸。但青春是最值得怀念的日子。因为有你们。这是彭青《青春多是无奈》诠释的专辑的意义。</dd> <dt>有关文艺范儿和小清新</dt> <dd>文艺和小清新，在这个速度发展越来越快的城市里，越来越显得弥足珍贵，就让我们一同欣赏彭青的音乐。</dd> </dl> </div> <div class="works"> <div class="title"><h2>彭青《青春多是无奈》</h2></div> <h2>《青春多是无奈》</h2> <ul class="clear"> <li><a href="http://www.amazon.cn/gp/product/B00COEZEUG/ref=s9_simh_gw_p15_d4_i1_gs9w?pf_rd_m=A1AJ19PSB66TGU&pf_rd_s=center-2&pf_rd_r=17ZYAQCZS527J8M5625P&pf_rd_t=101&pf_rd_p=171621832&pf_rd_i=899254051"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/2.jpg" alt="青春多是无奈"></a><p>青春多是无奈</p></li> <li><div style='400px;height 200px;line-height:20px;'>致我们洒过狗血流过热泪的青春<br/> 致狠狠爱过的人和狠狠摔碎过的梦<br/> Love hurts<br/> Love heals<br/> 如刀尖上行走的爱 如白日里做梦的爱 想得而不可得的爱<br/> 一一用音乐记录的生命 青春 痛觉 快乐<br/> 致20岁那年的彭青和20岁那年的你们<br/> 彭青《青春多是无奈》</div></li> </ul> <h3>《弄城》</h3> <ul class="clear"> <li><a href="http://music.douban.com/subject/24737552/?qq-pf-to=pcqq.c2c"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/pengqing06.jpg" alt="弄城"></a><p>弄城</p></li> <li><div style='450px;height 200px;line-height:20px;'>有一座城市，里面装着每个人的回忆，进去的人就不想再回来，它的名字叫「弄城」<br/> 这是一张「青春多是无奈」的Plus Album<br/> 如果「青春」是十个故事，<br/> 那「弄城」就是七个梦<br/> 如果「青春」是已经成长的我。<br/> 那「弄城」里留的是不能习惯的痛<br/> 更多黑夜，更多雨水，更多无声静默，<br/> 弄城，my lost world <br/> </div></li> </ul> </div> <div class="title"><h2>彭青照片墙</h2></div> <div class="worksBox clear"> <div class="worksLeft"> <div class="worksTwo clear"> <div class="worksx"><a href="http://v.yinyuetai.com/video/682858"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/21.jpg" alt=""></a></div> <div class="worksxr"><a href="http://v.yinyuetai.com/video/658149"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/9.jpg" alt=""></a></div> </div> <div class="worksC"><a href="http://v.yinyuetai.com/video/708165"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/5.jpg" alt=""></a></div> <div class="worksTwo clear"> <div class="worksx"><a href="http://v.yinyuetai.com/video/691905"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/7.jpg" alt=""></a></div> <div class="worksxr"><a href="http://v.yinyuetai.com/video/119938"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/8.jpg" alt=""></a></div> </div> </div> <div class="worksRight"> <div class="worksRt"><a href="http://music.baidu.com/song/33348350"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/3.jpg" alt=""></a></div> </div> <div class="worksRight"> <div class="worksRt"><a href="http://music.baidu.com/song/51552731#f7da5a37559f260eb560d35c93f1dfd2"><img src="http://i0.rongshuxia.com/files/image2/zhangchi/4.jpg" alt=""></a></div> </div> </div> </div> </div> <div id="footer"> <div class="footer"> <ul class="clear"> <li><a href="http://www.rongshuxia.com/about/addr.html">联系我们</a></li> <li><a href="http://www.rongshuxia.com/about/aboutus.html">关于我们</a></li> <li><a href="http://www.cloudary.com.cn/join_sdl.html">工作机会</a></li> <li><a href="http://www.rongshuxia.com/about/privacy.html">隐私条款</a></li> <li><a href="http://www.rongshuxia.com/about/copyright.html">版权声明</a></li> <li><a href="http://www.rongshuxia.com/about/help.html">帮助中心</a></li> <li><a href="http://www.rongshuxia.com/about/sitemap.html">网站地图</a></li> <li><a href="http://www.rongshuxia.com/guest/feedback.html">我要举报</a></li> </ul> <p>华语文学门户 Copyright © 1997 - 2014 榕树下信息技术有限公司. All Rights Reserved.京公网安备110105006180 沪B2-20080046-12</p> <p>请所有作者发布作品时务必遵守国家互联网信息管理办法规定，我们拒绝任何色情小说，一经发现，即作删除！<br>本站所收录作品、社区话题、书库评论及本站所做之广告均属其个人行为，与本站立场无关</p> <p>盛大文学正积极配合国家最新发布的《关于办理侵犯知识产权刑事案件适用法律若干问题的意见》<br> 采用刑事手段进行严厉打击盗版，目前相关公安机关已经抓获犯罪嫌疑人15名！正告盗版网站立即停止侵权行为！</p> </div> </div> </body> </html>
样式文件：
blog.css
@charset "utf-8"; /* CSS Document - Date: 2014-05-01 - coding: LiangShuGuang - Email: liangshuguang@163.com */ body, ul, ol, p, h1, h2, h3, h4, h5, dl, dd, form, input, textarea, td, th, button { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 'microsoft yahei', tahoma, Arial, 5B8B4F53, 5FAE8F6F96C59ED1 } *[hidefocus], input, textarea, select { outline: 0; } li { list-style: none; vertical-align: top; } table { border-collapse: collapse; } textarea { resize: none; overflow: auto; } img { border: none; vertical-align: top; } input { outline: none; } em { font-style: normal; } a { text-decoration: none; color: #666; } a:hover { text-decoration: underline; color: #518900; } em, strong { font-weight: bold; font-style: normal; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } .clear:after { content: ""; display: block; clear: both; } body { background-color: #f5f5f5; } .headerbg { width: 100%; height: 399px; background: url("http://i0.rongshuxia.com/files/image2/zhangchi/pengqing.png") no-repeat center 0; } .headtop { width: 1000px; height: 399px; margin: 0 auto; } .box { width: 1000px; margin: 0 auto; padding-top: 30px; } .conLeft { float: left; width: 275px; } .author { padding-bottom: 18px; } .author img { width: 275px; height: 231px; overflow: hidden; } .title h2 { height: 50px; line-height: 50px; border-bottom: 2px solid #24211d; font-size: 20px; font-weight: blod; } .tags { padding-bottom: 20px; } .tags span { padding: 0 10px; margin-right: 10px; margin-top: 10px; cursor: pointer; display: inline-block; background-color: #1f1f1f; height: 26px; line-height: 26px; color: #fff; } .said { padding-top: 8px; } .said p { line-height: 22px; } .said li { padding: 22px 0; color: #b2b0b0; line-height: 18px; } .thirdParty { float: right; } .conRight { float: right; width: 660px; } .desc { height: 230px; padding: 0 20px; background-color: #edeeef; } .desc h1 { height: 54px; line-height: 54px; font-size: 20px; font-weight: bold; color: #333; } .desc p { color: #333; line-height: 20px; } .rightcon { padding: 20px 0; } .desct { padding-top: 20px; } .rightcon dl { padding-top: 10px; } .rightcon dt { height: 30px; line-height: 30px; color: #333; font-size: 16px; font-weight: bold; padding-left: 40px; background: url(../images/ioc.jpg) no-repeat; } .rightcon dd { padding: 10px 58px 0 58px; color: #666; line-height: 26px; padding-bottom: 20px; } .works { padding: 0 16px 10px 16px; background-color: #edeeef; } .works h2 { height: 38px; line-height: 38px; padding-top: 10px; } .works ul { width: 660px; overflow: hidden; } .works li a { display: block; } .works li { float: left; padding-right: 20px; } .works li img { width: 110px; height: 148px; overflow: hidden; } .works li p { height: 40px; line-height: 40px; color: #575757; text-align: center; } .works h3 { height: 38px; line-height: 38px; padding-top: 18px; color: #a50404; font-size: 14px; } .worksLeft { float: left; width: 436px; } .worksBox { width: 660px; padding-bottom: 20px; } .worksx { float: left; padding-top: 22px; } .worksx img { width: 210px; height: 150px; overflow: hidden; } .worksRight { float: right; width: 174px; } .worksxr { float: right; padding-top: 22px; } .worksC { padding-top: 22px; } .worksC img { width: 437px; height: 172px; overflow: hidden; } .worksRt { width: 174px; height: 245px; overflow: hidden; padding-top: 22px; } .worksRt img { width: 174px; height: 245px; overflow: hidden; } #footer { border-top: 2px solid #35aa47; } .footer { position: relative; width: 1000px; margin: 0 auto; } .footer li { float: left; padding-right: 10px; line-height: 32px; } .footer p { line-height: 28px; color: #666; }
效果图：
榕树下-彭青博客
http://i0.rongshuxia.com/files/image2/zhangchi//pqindex.html
或参考百度相册