项目起因
因为想把自己之前做的东西弄成DD-center那样的网页，所以想学一些前端。对我知道这个理由很扯淡，但是我的确这段时间都在学前端，算是把html和css的基础技能都学了一遍吧，一些静态的网页应该是可以做了，可以开始制造电子垃圾了。接下来就要接着学JavaScript和一些框架（比如jQuery和vue.js之类的）了。但在这之前，先来检验一下我前面的学习成果。
项目设计
作为一个普通的个人博客，首先要有首页、功能页（个人介绍、标签归总等）、文章详情页三个部分。
在首页，我希望有一个包含logo和功能页的侧边栏，一个包含文章标题和内容简介的文章列表栏。
在功能页和详情页，我希望沿用主页的基本设计。对于功能页需要包含一些ui可以跳转到B站等网站中我的个人首页；对于文章页，就正常的沿用我md文件的排版就好。
在想清楚整个网站的构造之后，让我们进入具体的设计。
首页设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vimerio's blog</title>
<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css"/>
</head>
<body>
<div class="side-bar">
</div>
<div class="main">
</div>
</body>
</html>
首先我们设计两个div，分别是side-bar（侧边栏）和main（主要部分即文章列表）。
在接着介绍之前，我提一下normalize.css这个css文件，这是一个比较通用的初始化css文件，包括但不限于取消body的margin等等，可以达到很好的初始化效果，提升效率必备（懒狗必备）。
在设计完第一级的标签之后，我们再设计二级和三级标签。
<div class="side-bar">
<div class="header">
<a class="logo"href="index.html"><img src="./img/678.png"></a>
<div class="intro"><b>WHU SIM freshman</b><br/>
<b> learning field:Data Visualization</b><br />
<b>field:NLP</b></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">#python</a>
<a href="#" class="item">#html</a>
<a href="#" class="item">#tensorflow</a>
</div>
</div>
<div class="main">
<div class="article-list">
<div class="item">
<a href="article.html" class="title">lorem</a>
<div class="status">2020-4-1 |标签：#python</div>
<div class="content">orem</div>
</div>
</div>
</div>
</body>我在侧边栏中设计了导航栏（nav）和标签索引（tag-list），并且在其下用a标签整了一些超链接。
在文章列表中定义了item用来存放单个的文章介绍，并且设置了标题（一个可点击的超链接），状态（如你所见：发布时间，标签）。在这之后，我们就可以开始css的设计了。
body {
background: #454545;
line-height: 1.7;
}
/*
设置整个页面的底色和基本行高（说实话行高1真的太挤了）
*/
.side-bar{
float: left;
width: 20%;
position: fixed;
box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
background-color: #555;
}
/*
我习惯所有div都设置成浮动左，然后侧边栏因为东西比较少就20%的宽度就好；
因为我希望侧边栏无论何时都可以显示出来，让用户看比较长的文章的时候也可以看到，于是就设置成了fixed；
阴影是模仿卡片的设计，这个网页主要都是卡片式设计。
*/
.side-bar >* {
padding: 10px 15px;
}
/*
>*是表达所有子元素的写法，这样可以比较方便的同时设计nav和tag-list。在这里设置了一下他们之间的距离，这样看起来不会那么挤。
*/
.main {
float: right;
width: 80%;
color: #454545;
}
/*
文章列表的浮动、宽度、字体颜色。
*/
img {
width: 220px;
height: 200px;
border-radius: 50%;
}
/*
logo这里就简单整一下长和宽，并且做成圆形（其实是椭圆）
*/
a,body{
color:snow ;
}
/*
要设置多个标签的时候用逗号就可以了。
*/
a {
text-decoration: none;
}
/*
取消下划线
*/
.nav a,.tag-list a {
display: block;
padding: 5px;
color: #888;
-webkit-transition: color 200ms;
-moz-transition:color 200ms ;
-ms-transition:color 200ms ;
-o-transition:color 200ms ;
transition: color 200ms;
}
/*
这里做了一下字体颜色渐变，这样看起来就没那么突兀。
可以用transition+tab快速打出上面的东西
*/
.nav a:hover,
.tag-list a:hover {
color: snow;
}
/*
设置hover（点击时）的颜色。
*/
.nav a {
font-weight: 700;
}
/*
加粗导航栏字体
*/
.article-list,.article {
margin-right: 30%;
background: #FFFAFA;
padding: 20px 30px;
box-shadow: 0 0 5px 2px rgba(0,0,0,0.2);
}
/*
同样的给文章列表做卡片效果和底色以及间距的设置。
其实说实话底色那么暗卡片挺难看出来的
不过前面弄了复制一下也方便
*/
.title {
font-size:22px;
font-weight: 700;
color: #454545;
}
/*
标题加大加粗改色
*/
.status {
font-size: 13px;
color: #ccc;
}
/*
状态比较不重要，字体小一点颜色浅一点
*/
item >* {
margin: 10px 0;
}
/*
同样的用>*定义所有子元素，设置内上下边距
*/
.article-list.item {
margin-bottom: 25px;
}
/*
底部不要靠太近
*/效果如下：http://q8i78k1ua.bkt.clouddn.com/html.jpg
文章详情页设计
在这里推荐一下我现在用markdown编辑器Typora，清爽免费业界清流（结一下）。这个软件有一个md转html的功能。于是我的文章详情页设计还没有开始就结束了…
导航栏和标签集合
下次再更，下次一定
本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！