如何让博客变得稍稍好看

  这是第一次写博客玩，也是第一次使用markdown写东西(一边看着语法一边写的来着)，不过进步仍是有滴~
  申请博客之后，赶忙去翻了一下wjj童鞋的博客，发现他的封面是这样的：

  嗯……不得不说，这个网站的确是有一丢丢丑。不过怎么能让它影响好心情呢，因而便去探索了一下。果真，在博客的设置里发现了玄机，这个网站是支持页面定制CSS代码的,也就是说,能够用本身编写的CSS代码私人定制博客风格。果真是一个程序员聚居的区域，本身动手，丰衣足食。

  因而尝试稍稍美化了一下本身的博客，也把过程和你们分享一下。

  首先看看咱们要美化的网站结构是怎样的，在设置中勾选禁用模板默认CSS,保存之后打开博客主页，能够发现变成了这个更丑的样子，此即不通过任何排版,网站自己的样子。

  将禁用模板默认CSS的勾去掉并保存之后，网站就变回了以前所选择的皮肤，其实所谓的选择皮肤，也就是选择对应的已经写好的CSS文件。咱们要作的事情，就是阅读这个CSS文件，并根据本身的审美对它进行部分的重写。

  打开本身博客主页，右键将网页的源码存到本地，能够发现同时保存到本地的有三个css文件，分别是：

• blog-common.css
• bundle-darkgreentrip.css
• bundle-darkgreentrip-mobile.css
  
  

  打开这些文件看看之后发现，除了bundle-darkgreentrip.css之外，其余两个文件的排版都很混乱，因而合理推断这个css文件就是咱们要修改的部分。css文件是用来对html文件中的内容进行排版的，可是它是怎么精确识别每段代码是描述html那个部分的格式的呢？奥秘就在于选择器。打开保存的html文件能够看到，几乎每个块语句都有一个id属性，这就至关于这个块语句的名字，css文件就是依靠这些id选择器来定位描述的内容的。除了id选择器，还有属性选择器、类选择器等等许多，不过这里咱们只要知道id选择器，就大概能找到想要修改的代码在什么位置了。那么，我就开始DIY了~（Ps:我使用的基础代码是一款叫 darkgreentrip的皮肤）

  首先想到的是界面的一片白色实在太空旷了，若是能有一张背景图片就行了。想要修改整个网页的背景，须要更改的是 body的样式，原代码以下：

body {
	color: #000;
	background: #D2D8DE;
    font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size:14px;
	min-height: 101%;
}

  我在图片网站PEXELS上找了一张喜欢的高清图片，获取了它的url，由于图片可能没法铺满整个网页，向下滚动的时候看到未铺满的地方就很难看，所以设置background-attachment属性为fixed，表示页面滚动的时候图片始终固定在屏幕相同位置，又调整了图片的大小和位置，最终修改为了以下的样子：

body {
	color: #000;
	background: rgba(218, 210, 222, 0.67);
    background-image: url(https://images.pexels.com/photos/106567/pexels-photo-106567.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position:0 -150px;
    background-attachment:fixed;
    font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size:14px;
	min-height: 101%;
}

  打开看一下效果，顿时漂亮了很多（必定是图片选的好哈哈哈）
  接下来是菜单栏，黑色的配色比较漂亮，可是挡住了背景图片就不太好了，再有就是菜单栏的棱角显得太死板，因而我调整了菜单栏的透明度和弧度，原来的代码以下：

#navigator {
	background-color: black;
	height: 60px;
	line-height: 60px;
    overflow: hidden;
	clear: both;
}

  修改后的代码以下：

#navigator {
	background-color: rgba(48, 38, 52, 0.68);
	height: 60px;
	line-height: 60px;
	overflow: hidden;
	clear: both;
    border-radius: 6px;
}

  再有就是博客的标题，实在太平凡了，因而我调整了一下标题的字体，并利用text-shadow属性给文字加上了阴影。text-shadow属性的第一个值表示水平位移，第二个值表示垂直位移，正值为偏右或偏下，负值为偏左或偏上，第三个值表示模糊半径，第四个值表示阴影的颜色。text-shadow属性能够接受一个以逗号分割的阴影效果列表，并应用到该元素的文本上。合理利用text-shadow属性，能够作出各类漂亮的效果。text-shadow属性是css3提供的，由此也说明博客定制css代码是支持css3的，提供了更多的可能性。

  修改前的代码为：

#blogTitle h1 {
	font-size: 150%;
	font-weight: bold;
	line-height: 1.5;
	margin-left: 1em;
	margin-top: 10px;
	width: 50%;
	float: left;
}

  修改后的代码为：

#blogTitle h1 {
	font-size: 150%;
	font-weight: bold;
    font-family: "Comic Sans Ms",cursive,sans-serif;
	line-height: 1.5;
	margin-left: 1em;
	margin-top: 10px;
	width: 50%;
	float: left;
    text-shadow: 0 0 10px #255834,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #5cc384,
    0 0 70px #4a8862,
    0 0 80px #44815c,
    0 0 100px #467e5b,
    0 0 150px #275338;
}

  最后微调一下其余的字体颜色以及连接不一样状态的颜色。将修改后代码粘贴到设置页面对应的文本框内，保存查看，就能够看到本身的成果啦~

  固然，因为时间有限，我完成的只是对已有css代码的简单修改，实际上根据已有的html文件，从新写一个属于本身的皮肤也不是没有可能；此外，上文已经说到css3是被支持的，css3提供了许多特性，能够作出至关酷炫的特效，之后有空不妨尝试一下；再有就是在页面定制CSS代码的下方，还有侧边栏公告、页首、页脚的html文本框，能够修改html代码增长自定义的模块，往后也要体验一下。