仿新浪博客古典个人网站模板源码
这是一个仿新浪博客古典风格(花开若相惜,花落莫相离)css3+html5的单页模板 。。
1、html页面代码
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>花开花落—唯美古典个人博客模板(bokequ.com)</title>
<meta name="keywords" content="古典网站模板,个人网站模板,个人博客模板,博客模板,css3,html5" />
<meta name="description" content="这是一个古典风格的css3 html5 博客网站模板" />
<link href="css/styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<article>
<header>
<div class="toptitle">
<h1>花开若相惜,花落莫相离。</h1>
<p class="byline">——无名</p>
</div>
<object id="swftitlebar" data="images/79514.swf" width="100%" height="220" type="application/x-shockwave-flash">
<param name="allowScriptAccess" value="always">
<param name="allownetworking" value="all">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="menu" value="false">
<param name="scale" value="noScale">
<param name="salign" value="1">
</object> <div class="blognavInfo">
<span><a href="http://www.bokequ.com/blog/1/">首页</a></span>
<span><a class="on" href="#">博文目录</a></span>
<span><a href="#">图片</a></span>
<span class="last"><a href="#">关于我</a></span></div>
<p class="sign">收我南窗梦一帘,人间故事密封缄。迎将冷淡到江南。 身逐空花归净界,愿随清月落寒潭。红尘隔断两无堪。</p>
</header>
<div class="leftbox">
<div class="vcard box">
<h2>个人资料</h2>
<img src="images/180.jpg" class="photo">
<p class="fn">姓名：MAOLAI</p>
<p class="nickname">网名：草戊水来</p>
<p class="url">主页：www.bokequ.com</p>
<p class="address">现居：广州天河</p>
<p class="role">职业：网站运营</p>
</div>
<div class="blogclass box">
<h2>博客分类</h2>
<ul>
<li><a href="/wo/">慢生活(3)</a></li>
<li><a href="/wo/">散文/诗歌(25)</a></li>
<li><a href="/wo/">经典美文(39)</a></li>
<li><a href="/wo/">随笔(38)</a></li>
<li><a href="/wo/">个人日记(66)</a></li>
</ul>
</div>
<div class="blogclass box">
<h2>文章阅读</h2>
<ul>
<li><a href="/wo/">旧时桥，今时月</a></li>
<li><a href="/wo/">思念，在风夜里沉沦</a></li>
<li><a href="/wo/">人生若初见，清守是清欢</a></li>
<li><a href="/wo/">这个四月，只想遇见你</a></li>
<li><a href="/wo/">等闲时，焚一段书香茶语</a></li>
<li><a href="/wo/">【依窗听雨】</a></li>
<li><a href="/wo/">等闲时，焚一段书香茶语</a></li>
<li><a href="/wo/">爱的春天，我曾来过</a></li>
</ul>
</div>
<div class="friends box">
<h2>最近访客</h2>
<ul>
<li><a href="#"><img src="images/01.jpg" title="风轻云淡"></a></li>
<li><a href="#"><img src="images/s3.jpg" title="往事如烟"></a></li>
<li><a href="#"><img src="images/s0.jpg" title="百里芷"></a></li>
<li><a href="#"><img src="images/s2.jpg" title="梦琪"></a></li>
<li><a href="#"><img src="images/s5.jpg" title="未见面就说再见"></a></li>
<li><a href="#"><img src="images/s6.jpg" title="若雨"></a></li>
<li><a href="#"><img src="images/s7.jpg" title="沈千寻"></a></li>
<li><a href="#"><img src="images/s8.jpg" title="叶筱凌"></a></li>
</ul>
</div>
<div class="viny">
<h2>我的音乐</h2>
<ul>
<dl>
<dt class="art"><img src="images/xing.jpg" alt="我的音乐"></dt>
<dd class="music">
<audio src="http://other.web.nc01.sycdn.kuwo.cn/resource/n2/15/73/2494083152.mp3" autoplay controls></audio>
</dd>
</dl>
</ul>
</div>
</div>
<div class="rightbox box">
<h2>最新博文</h2>
<h3 class="title"><a href="/wo/">梅花吹雨闻笛声
</a></h3>
<ul class="text">
<p>青山绿水间，笛声响起，清澈、悦耳、嘹亮，宛如溪水，潺潺流过沟涧，叮叮咚咚的敲起许多音符，画面虽美，却也只是一副画，而这笛声，真的从画中流出。
</p>
<p>和着水波潋滟的浮沉，剪下一段心情，听那云烟深处，此时的岸此时的景，千流万壑，孤吟寒水中，遥遥回眸不禁问诗人：馀音空中尚飘荡，不知人在否!</p>
<p>彼岸花开，生生相错，唯有这绕耳的笛声还在诉说着凄美故事。碧波湖畔，红桃绿柳，盈盈一水，脉脉无语，不知这样的无奈横亘了多久，笛声轻起，比相思更浓，比忧怨更深，自笛声飘起的那一刻，便记载和传递了千年后物是人非的牵牵绊绊。
</p>
<p class="textimg"><img src="images/text02.jpg"></p>
<p>灯火阑珊，笛声轻绕，逆流而溯，那情那景依然停驻在笛声起时，银汉迢迢，佳期如梦，金风玉露，秋水难断，唯笛声不残，幽幽绕耳。
</p>
<p>笛当是紫竹做，和着梅花的清傲与竹虚柔之韵，缥缥缈缈的清音柔滑如少女的纤手，牵着你穿越溪流，穿越红尘，停留在你记忆中的某个瞬间，直至入心入骨。笛中曲，月下人，月不落，笛岂终，斯境中，这一刻，听的人，歌之人，谁又分得清谁在月外谁又在月中，只看见那细按香盈的手，漾出一脉清流，只那么静静的远远的吹过来，不由人感叹：月下笛吹，吹净遥碧已无声…… ——清风明月</p>
</ul>
<div class="textfoot"> <a href="/">阅读全文</a><a href="/">评论</a><a href="/">转载</a> </div>
<h3 class="title"><a href="/">梦中桥</a></h3>
<ul class="text">
<p>这是一个寂静的夜，雨像雾一样飘散着，落下来。路旁的法国梧桐叶已泛黄，偶有几片落下，很轻，很慢，几分依恋，几分不舍。你和我并行在人行道上，我没有牵你的手，你也没有挽着我，就这麽默默地走着。任细雨打湿我们的发梢。 夜风已冷，我感觉到你的颤抖，脱下外衣给你披上，你没有拒绝，闪着泪花的眼神在我看你的瞬间转移。</p>
<p>一路无语，你我各自低头渐行。我不敢抬头，生怕一抬头就到了路的尽头。可我们已踏上了那座熟悉的桥。桥的那边，就是你的家。已经到了该分手的时候。是啊，今晚是你我最后的夜晚，明天，你将离我而去，开始新的生活。</p>
<p class="textimg"><img src="images/text01.jpg"></p>
<p>你转过身，想脱下披在身上的外衣，扯着衣领的手却停在那里;我想最后一次拥抱你，抬起的手却怎麽也伸不出去。就这样，我们站了很久。你忽然抬起头，说了声谢谢。这句谢谢，不知道包含了什麽，却像利刃一样扎在我的心。这是你第一次对我说这两个字。
</p>
<p>你重重的叹了口气，将外衣递给我。泪光再次从你的眼中闪起。再没说一句话，你转身离去。走的那么果断，那么的义无反顾，甚至没有说一声再见，没有看我已流泪的眼。
</p>
<p>我从梦中醒来，发现已泪湿枕边。我的心变得沉重，开始伤感起来。只不过是一个梦而已，我开始宽慰自己。
。
</p>
<p>从那时起，桥，给我的感觉，就是合与分的终点。不管是牛郎织女相会的鹊桥，还是许仙与白娘子相识的断桥，还有克罗宁和玛拉的断魂蓝桥，到头来都是悲凄的结果。——梦里花开
</p>
</ul>
<div class="textfoot"> <a href="#">阅读全文</a><a href="#">评论</a><a href="#">转载</a> </div>
<div class="pages"><span>1</span><a href="/" hidefocus="">2</a><a href="#" hidefocus="">3</a><a href="#" class="next">下一页>></a></div>
</div>
<div class="blank"></div>
<div class="Copyright">
<ul>
<a href="#">帮助中心</a><a href="#">空间客服</a><a href="#">空间中心</a><a href="#">空间协议</a>
</ul>
<p>Design by MAOLAI博客(bokequ.com)</p>
</div>
</article>
</body>
</html>2、css样式
@charset "gb2312";
/* CSS Document */
* { margin: 0; padding: 0 }
body { font: 12px "宋体", "Arial Narrow", HELVETICA; color: #3F3E3C; line-height: 1.5; background: url(../images/sinabloga.jpg) repeat #B29C77 }
img { border: 0; vertical-align: middle }
p { display: block; }
ul { list-style: none; }
a { color: #865400; text-decoration: none; }
a:hover { text-decoration:underline }
.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }
article{ width:960px;margin:auto;border-left:#b29c77 10px solid; border-right:#b29c77 10px solid; box-shadow: 0px -4px 6px 4px #726758; background:#E3D6C3; overflow:hidden; }
/* header */
header { width: 100%; background:url(../images/sinablogb.jpg) no-repeat center #E3D6C3; height:290px; position:relative}
.toptitle{
position: absolute;
left: 300px;
top: 89px;
}
.toptitle h1{ color:#9E6B25; font: 24px "微软雅黑", "Microsoft YaHei", Arial, Helvetica, sans-serif;}
.byline{ color:#f2e4d1; text-align:right; margin-top:20px; font-size:14px;}
.sign{ text-align:right; margin:15px 70px 0; color:#7C7B77}
.blognavInfo {margin-left:280px;}
.blognavInfo span{font-size:16px;}
/* leftbox */
.leftbox{ padding-left:10px;width:210px; float:left}
.leftbox h2,.rightbox h2{ background:url(../images/tp.jpg) repeat-x ; color:#8B745C; font-size:12px; font-family: "宋体",sans-serif; padding:5px; border:#F7F3EE 1px solid}
.box{ background:#F7F3EE; width:208px; border:#B19C76 1px solid; margin-bottom:10px}
.vcard{ padding-bottom:10px}
.photo{ display:block; margin:10px auto}
.vcard p{ text-indent:2em; color:#917F5F; line-height:24px}
.blogclass ul{ padding:10px 0}
.blogclass ul li{ background:url(../images/dot.gif) no-repeat left center; padding:0 0 0 10px; margin-left:20px}
.friends{ overflow:hidden;padding-bottom:10px; }
.friends ul{ padding-left:8px;}
.friends ul li { display: inline; width: 48px; height: 48px; }
.friends ul li img { width: 66px; height:66px; border: 0; display: block; float: left; }
.friends ul li img:hover { opacity: 0.5 }
/* rightbox */
.rightbox{ float:right; width:720px; margin-right:10px;}
.text{ padding:20px; line-height:24px; text-indent:2em}
.textimg{ text-align:center; text-indent:0}
.text p{ margin-bottom:10px}
h3.title{ font-size:16px; text-align:center;}
.textfoot{ text-align:right; padding:10px; border-bottom: dotted 1px #B19D7A; margin:0 20px 20px}
.textfoot a{ padding-right:10px}
.pages { padding: 0 60px 25px; text-align: right }
.pages span { background: #B29C77; color: #fff; }
.pages a { background: #fff; color: #454545; padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages span { padding: 5px 8px; border: none; margin: 0 0 0 5px; }
.pages a:hover { background: #CCC; }
/* Copyright */
.Copyright { text-align: center; margin: 40px 0 0 }
.Copyright ul a { padding: 0 10px; }
/* music */
.viny .art img { width: 160px; height: 220px; margin: 10px }
.viny dd span { width: 12px; height: 24px; margin-right: 7px; float: left; display: block; }
.icon-song span, .icon-artist span, .icon-album span,
.icon-like span {margin-left:-18px;}
.icon-song span { background-position: 0px 6px }
.icon-artist span { background-position: 0px -17px }
.icon-album span { background-position: 0 -40px }
.music audio { width: 100%; margin-top: 8px }
.viny {background: #F7F3EE;border-radius: 6px;margin-bottom: 22px;}仿新浪博客古典个人博客模板演示www.bokequ.com/blog/8/
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
