搭建一个博客网站
目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>surpass的博客园</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-head">
<img src="222.jpg" alt="博客头像" title="文人骚客"/>
</div>
<div class="blog-info">
<div>surpass的博客~</div>
<div>你不懂我的沉默，<br>又怎么懂得我的难过</div>
</div>
<div class="blog-link">
<ul><a href="https://www.cnblogs.com/surpass123/" target="_blank">博客园</a></ul>
<ul><a href="https://www.zhihu.com/people/xiaoyuanqujing" target="_blank">小猿取经</a></ul>
<ul><a href="https://www.mzitu.com/" target="_blank">关注福利</a></ul>
</div>
<div class="blog-tag">
<ul><a href="https://github.com/" target="_blank"># Github</a></ul>
<ul><a href="https://www.redhat.com/en/global/china" target="_blank"># RedHat</a></ul>
<ul><a href="https://www.djangoproject.com/" target="_blank"># Django</a></ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-head">
<span class="head-title">斗破苍穹</span>
<span class="head-date">2020/5/24</span>
</div>
<div class="article-body">
<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛</p>
</div>
<hr>
<div class="article-end">
<span># Python</span>
<span># Javascript</span>
</div>
</div>
<div class="article">
<div class="article-head">
<span class="head-title">斗罗大陆</span>
<span class="head-date">2020/5/24</span>
</div>
<div class="article-body">
<p>
圣魂村，如果只是听其名，那么，这绝对是个相当令人惊讶的名字，可实际上，这只不过是法斯诺行省诺丁城南一个只有三百余户的小村而已。之所以名为圣魂，是因为传说中，在百年前这里曾经走出过一位魂圣级别的魂师，从而得名。这也是圣魂村永远的骄傲。</p>
</div>
<hr>
<div class="article-end">
<span># Python</span>
<span># Javascript</span>
</div>
</div>
<div class="article">
<div class="article-head">
<span class="head-title">体尊</span>
<span class="head-date">2020/5/24</span>
</div>
<div class="article-body">
<p>资质平庸的少年雷罡，为了追赶哥哥的步伐，独辟蹊径走上了另类的修仙之路。他不断强化的肉体，没有终极，雷罡得到《五行体修》，开始追求肉体和力量的极致。他说：“在道术与罡气的五行世界,我坚信，肉体才是一切力量之源！”</p>
</div>
<hr>
<div class="article-end">
<span># Python</span>
<span># Javascript</span>
</div>
</div>
<div class="article">
<div class="article-head">
<span class="head-title">冰火魔厨</span>
<span class="head-date">2020/5/24</span>
</div>
<div class="article-body">
<p>七柄绝世神刃。冰雪女神的叹息——晨露刀。火焰之神的咆哮——正阳刀。自由之风的轻吟——傲天刀。大地苏醒的旋律——长生刀。神机百变的六芒——璇玑刀。贯通天地的曙光——圣耀刀。永世地狱的诅咒——噬魔刀。这是七柄神刀，也是七柄拥有着冰、火、风、土、空间、光明、黑暗的魔法杖。最重要的，它们还是主角的——菜刀。</p>
</div>
<hr>
<div class="article-end">
<span># Python</span>
<span># Javascript</span>
</div>
</div>
<div class="article">
<div class="article-head">
<span class="head-title">狂神</span>
<span class="head-date">2020/5/24</span>
</div>
<div class="article-body">
<p>我的祖父是兽人族比蒙军团中最强大的战士之一，在**十年前曾经徒手杀死过一条龙，从而得到了兽人第一勇士、比蒙第一勇士等等光荣的称号，身高达到五米开外，在当时来说整个大陆也少有对手。</p>
</div>
<hr>
<div class="article-end">
<span># Python</span>
<span># Javascript</span>
</div>
</div>
</div>
</body>
</html>
CSS样式表
/*通用CSS样式配置*/
body {
margin: 0;
}
a { /*去除a标签下划线*/
text-decoration: none;
}
ul { /*去除ul标签的点和边距*/
list-style-type: none;
padding: 0;
margin: 10px;
}
/*左侧导航栏配置*/
.blog-left {
background-image: url("背景图片.jpg");
height: 100%;
20%;
position: fixed;
border-right: 2px solid pink;
float: left;
}
.blog-head {
background-color: darkgray;
120px;
height: 120px;
border-radius: 50%;
border: 2px solid hotpink;
margin: 30px auto;
overflow: hidden;
}
.blog-head > img {
100%;
}
.blog-info {
font-family: "Times New Roman";
font-size: 16px;
}
.blog-info > div {
color: hotpink;
margin: 10px auto;
text-align: center;
}
.blog-info > div:hover {
color: gainsboro;
}
.blog-left > .blog-link, .blog-left > .blog-tag {
font-family: "Times New Roman";
font-size: 20px;
text-align: center;
margin: 20px;
}
.blog-left a {
color: red;
}
.blog-left a:hover {
color: lightgrey;
}
/*右侧导航栏配置*/
.blog-right {
height: 1024px;
80%;
background: snow;
float: right;
}
.blog-right > .article {
background-image: url("right-2.jpg");
margin: 10px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.article-head {
border-left: 3px solid red;
text-indent: 1em;
}
.head-title {
font-size: 24px;
font-family: "Arial Black";
}
.head-date {
font-size: 14px;
font-family: "Times New Roman";
float: right;
margin-top: 10px;
margin-right: 10px;
font-weight: bolder;
}
.article-body > p {
text-indent: 1em;
}
.article-end {
text-indent: 1em;
}
