/* html部分 */<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<link rel="stylesheet" type="text/css" href="myblog.css">
</head>
<body>
<div id="container">
<div id="globallink">
<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>
</ul>
</div>
<div id="parameter">
<div id="author">
<p class="mypic"><img src="mypic.jpg"></p>
<p>子木永恒的BLOG</p>
</div>
<div id="lcategory">
<h4 class="categroy"><span>我的文章分类</span></h4>
<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>
</ul>
</div>
<div id="lcomment">
<h4 class="comment"><span>最新评论</span></h4>
<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>
</ul>
</div>
<div id="lfriend"></div>
</div>
<div id="main">
<div class="article">
<h3><a href="">从游戏里的江湖截下来的片段</a></h3>
<p class="author">basic @ 2017-05-21 18.45.29</p>
<p class="content">一切啊，都得重新开始！<br>
只不过没有当时那么的逗了，现在升级可快了。<br>
我马上就加了一个帮会，帮会里的人可活跃了，我一上游戏，就挂在YY里面和他们侃天说地，扯嘴皮子一直到吃饭，甚至边吃边扯。感觉和他们聊天可有意思了，原来他们知道那么多啊！我就拜了其中的一个玩了好久的人为师，我还算运气好，这个“师傅”并没有像别人那样不耐烦，还要生活自理啊什么的，我有疑问去问他，他一般都能给我解答，我都快叫他“人生导师”了。<br>
他几乎一整天都在线，只要我找他，他都基本在线。有一次，我问他，“你怎么那么多时间都在游戏啊，你不上班吗？”<br>
他没有直接回答，而是反问我，“你不也一样吗？你不也天天在线？”<br>
我回答说，“我还是学生啊，现在放暑假了哇！”<br>
这次，他的回复有点慢，”都暑假了啊，真羡慕啊！“<br>
我取笑他，“你这是有多老啊，又不是没当过学生，干吗把自己说的那么沧桑。”<br>
“我初中毕业。”<br>
看到这行，我竟不知道怎么回复他了，只能回了句“这样啊……”。<br>
后来聊着聊着，我知道了更多关于他的事情。<br>
我当时还很，嗯，算无知吧，还不知道游戏是可以赚RMB的，他告诉我他其实是一个代练，一天24小时起码有18个小时在线的，只为了完成更多的订单。<br>
我很惶恐，问他我经常这么烦他会不会嫌弃我啊。<br>
他倒是没当回事，就说了句，“有什么关系，朋友嘛！”<br>
我当时还是挺感动的。<br>
或许在游戏里面就是这样的吧，偶然认识，相处之后就像是认识了很久的朋友一样。</p>
<p class="show">浏览[0] 评论[0]</p>
</div>
</div>
<div id="footer">
<p>更新时间：2017-05-21 ©All Rights Reserved</p>
</div>
</div>
</body>
</html>
/* CSS部分*//* 主体部分*/
body{
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #000000;
}
#container{
position: relative;
margin: 1px auto 0px auto;
width: 760px;
text-align:left;
background-color: #FFFFFF;
border-left: 1px dashed #AAAAAA;
border-right: 1px dashed #AAAAAA;
border-bottom: 1px dashed #AAAAAA;
}
/* 导航与banner*/
#globallink{
width: 760px;
height: 163px;
margin: 0px;
padding: 0px;
background: #9ac7ff url(banner.jpg) no-repeat top;
font-size: 12px;
}
#globallink ul{
list-style-type: none;
position: absolute;
width: 417px;
left: 400px;
top: 145px;
padding: 0px;
margin: 0px;
}
#globallink li{
float: left;
text-align: center;
padding: 0px 6px 0px 6px;/* 链接之间的距离*/
}
#globallink a:link,#globallink a:visited{
color: #004a87;
text-decoration: none;
}
#globallink a:hover{
color: #FFFFFF;
text-decoration: underline;
}
/* 左侧列表*/
#parameter{
position: relative;
float: left;
width: 210px;
padding: 0px;
margin: 0px;
}
#parameter div ul{
list-style: none;
margin: 5px 15px 0px 15px;
padding: 0px;
}
#parameter div ul li{
padding: 2px 3px 2px 15px;
border-bottom: 1px dashed #999999;
}
#parameter div ul li a:link;#parameter div ul li a:visited{
color: #000000;
text-decoration: none;
}
#parameter div ul li a:hover{
color: #008cff;
text-decoration: underline;
}
/* 内容部分*/
#main{
float: left;
position: relative;
font-size: 12px;
margin: 0px 20px 5px 20px;
width: 510px;
}
#main div{
position: relative;
margin: 20px 0px 30px 0px;
}
#main div h3{
font-size: 15px;
margin: 0px;
padding: 0px 0px 3px 0px;
border-bottom: 1px dotted #999999;
}
#main div h3 a:link,#main div h3 a:visited{
color: #662900;
text-decoration: none;
}
#main div h3 a:hover{
color: #0072ff;
}
#main p.author{
margin: 0px;
text-align: right;
color: #888888;
padding: 2px 5px 2px 0px;
}
#main p.content{
margin: 0px;
padding: 10px 0px 10px 0px;
}
/* footer脚注*/
#footer{
clear: both;
text-align:center;
background-color: #daeeff;
margin: 0px;
padding: 0px;
color: #004a87;
}
#footer p{
margin: 0px;
padding:2px;
}
效果图：
注：里面的图片和文章内容均来自于网络！
时间： 2024-10-29 10:46:05