一个简单的个人博客结构

Leave a reply

1、先上效果图：

2、代码参考：
2.1、html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <title>BlogDemo</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="log">王小明</a>
      <div class="intro">百度是一家持续创新的,以“用科技让复杂世界更简单”为使命的高科技公司</div>
    </div>
    <div class="nav">
      <a href="#" class="item">关于我</a>
      <a href="#" class="item">关于我</a>
      <a href="#" class="item">关于我</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item">#关于我</a>
      <a href="#" class="item">#关于我</a>
      <a href="#" class="item">#关于我</a>
    </div>
  </div>
 
 
  <div class="main">
    <div class="article-list">
      <div class="item">
        <div class="title">
          This is a title
        </div>
        <div class="status">
          发布于：2018-01-02 | 阅读：2018 | 标签：#html
        </div>
        <div class="content">
          ①引进某种行为的关系者，组成介词结构，用在主语前面,做状语：关于这一点，我们可以从这一带发现的文物得到说明。——翦伯赞《内蒙访古》
②介词，引进某种事物的关系者，组成介词结构，用在名词或名词性词组前面,做定语（中心词之间一般要加‘的’），或在‘是……的’式中做谓语
例子：他读了几本～政治经济学的书丨今天在厂里开了一个会，是～爱国卫生运用的。
注意：a)表示关涉，用‘关于’不用‘对于‘。如：关于织女星，民间有个美丽的传说。指出对象，用“对于”不用“关于”。如:对于文化遗产，我们必须进行研究分析。兼有两种情况的，可以用“对于”也可用“关于”。如:关于订立公约，大家都很赞成。
b)关于”有提示性质，用“关于”组成的介词结构，可以单独作题目。如:关于人生观/关于杂文。用“对于”组成的介词结构只有跟名词组成偏正词组，才能作题目。如:对于百花齐放政策的认识。[1]
③就……而言。例：关于那个话题就谈到这里。
        </div>
      </div>
      <div class="item">
        <div class="title">
          This is a title
        </div>
        <div class="status">
          发布于：2018-01-02 | 阅读：2018 | 标签：#html
        </div>
        <div class="content">
          ①引进某种行为的关系者，组成介词结构，用在主语前面,做状语：关于这一点，我们可以从这一带发现的文物得到说明。——翦伯赞《内蒙访古》
②介词，引进某种事物的关系者，组成介词结构，用在名词或名词性词组前面,做定语（中心词之间一般要加‘的’），或在‘是……的’式中做谓语
例子：他读了几本～政治经济学的书丨今天在厂里开了一个会，是～爱国卫生运用的。
注意：a)表示关涉，用‘关于’不用‘对于‘。如：关于织女星，民间有个美丽的传说。指出对象，用“对于”不用“关于”。如:对于文化遗产，我们必须进行研究分析。兼有两种情况的，可以用“对于”也可用“关于”。如:关于订立公约，大家都很赞成。
b)关于”有提示性质，用“关于”组成的介词结构，可以单独作题目。如:关于人生观/关于杂文。用“对于”组成的介词结构只有跟名词组成偏正词组，才能作题目。如:对于百花齐放政策的认识。[1]
③就……而言。例：关于那个话题就谈到这里。
        </div>
      </div>
      <div class="item">
        <div class="title">
          This is a title
        </div>
        <div class="status">
          发布于：2018-01-02 | 阅读：2018 | 标签：#html
        </div>
        <div class="content">
          ①引进某种行为的关系者，组成介词结构，用在主语前面,做状语：关于这一点，我们可以从这一带发现的文物得到说明。——翦伯赞《内蒙访古》
②介词，引进某种事物的关系者，组成介词结构，用在名词或名词性词组前面,做定语（中心词之间一般要加‘的’），或在‘是……的’式中做谓语
例子：他读了几本～政治经济学的书丨今天在厂里开了一个会，是～爱国卫生运用的。
注意：a)表示关涉，用‘关于’不用‘对于‘。如：关于织女星，民间有个美丽的传说。指出对象，用“对于”不用“关于”。如:对于文化遗产，我们必须进行研究分析。兼有两种情况的，可以用“对于”也可用“关于”。如:关于订立公约，大家都很赞成。
b)关于”有提示性质，用“关于”组成的介词结构，可以单独作题目。如:关于人生观/关于杂文。用“对于”组成的介词结构只有跟名词组成偏正词组，才能作题目。如:对于百花齐放政策的认识。[1]
③就……而言。例：关于那个话题就谈到这里。
        </div>
      </div>
 
    </div>
 
  </div>
</body>
</html>

2.2、css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

body{
  background: #454545;
  line-height: 1.7;
}
a, body{
  color: #eee;
}
a{
  text-decoration: none;
}
.side-bar{
  float: left;
  width: 20%;
}
 
.side-bar .nav a,
.side-bar .tag-list a{
  display: block;
  padding: 8px;
  color: #777;
  font-weight: 900;
  -webkit-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;
}
 
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
  color: #eee;
}
 
 
.main{
  float: right;
  width: 80%;
  color:#454545;
}
 
.article-list{
background: #fff;
  margin-right: 30%;
  padding: 20px 30px;
  -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);
}
 
.article-list .item .title{
  font-size: 22px;
  font-weight: 700;
}
 
.article-list .item .status{
  font-size: 13px;
  color: #ccc;
}
 
.article-list .item > * {
  margin: 10px 0;
}
 
 
.header .log{
  line-height: 1;
  border: 3px solid #eee;
  padding: 10px 20px;
  font-size: 30px;
  display: inline-block;
  margin-bottom: 10px;
}
 
.side-bar > *{
  padding: 10px 15px;
}

Leave a Reply