博客的自我修养——入门篇（一）（如何搭建本身的博客与基本美化）

工具材料：首先你要有一个博客
主要内容：如何如何搭建本身的博客与基本美化
相关知识：也许。和HTML五、CSS这两个掺点边。
推荐连接：
http://www.w3school.com.cn/  W3School | 据说是前端设计师要常常翻例子的地方。
http://www.cnblogs.com/asxinyu/p/Bolg_Category_BasicSetting_1.html   大神A | 学习参考（右下角的点赞系统就是抄这个大神的）
https://www.cnblogs.com/ECJTUACM-873284962/p/9345611.html   大神B | 啊，太强了，是大佬，我死了，左下角的小可爱一万个想要www

---

皮肤与控件的选择

首先，没有美化以前个人网页是这个样子：

选用我本身喜欢的超级简洁风格，鼠标放在标签上面还有滑动，老实说本身已经挺喜欢了

 

---

 

 

自定义背景图片

可是，对不起，我喜欢二次元=。=

 

 

先加个背景（管理->设置->页面定制CSS代码）

 

body {
    background:url("http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg");
    background-position:center left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed
}

 

这个就是咱们背景图的代码了，复制上去刷新个人主页看看。

 

 

上面代码你若是不喜欢这个图片，你只须要改一个地方："http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg"，把这个图片的url改为本身喜欢的图片就行了

 

 

 

推荐步骤：创建相册 - 上传本身喜欢的图片（注意大小分辨率）- 从相册点开图片 - 复制该图片的网址 - 替换个人图片地址 - 搞定✔

 

---

主体透明化的好处

可是个人这个很水的博客尚未结束就是由于一件事，模块挡住图片的脸了。。。我接着上代码

 

#home {

    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    width: 80%;
    min-width: 949px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(77, 77, 77, 0.3);
    opacity: 0.85;

}

 

注意最后一行的opacity: 0.85;这个是模块的透明度，表示模块透明程度位85%

 

 

 

基本美化到这里就结束了，关于新的css为何能覆盖皮肤css这些东西，目前原理还一律不知=。=，去网上找到喜欢部件的css直接加上去就行了

 

---

Extra小礼物：自定义字体颜色，模块大小（CSS）

 

 碎碎念：下面开启一点难的东西：网页具体内容的设计：

 

步骤1：使用火狐或google浏览器（其余浏览器我没用过也不太清楚），打开你的首页，按下键盘F12键。

 

步骤2：找到你想替换颜色的模块（并非全部模块均可以本身定义，除非你关掉皮肤自带css本身从新写）

咱们用查找工具找到一篇博客的内容部分：而后他的css和继承css都会显示在右方：

 

 

这里面的数据，10px，这种粉色的东西你均可以本身编辑，圆圈是图片颜色，能够本身选择。

选择了之后，页面的画面也会随着你的最新值更改，可是改了可不是直接保存好了的。

把标准调整到满意后，复制这一块css下来，粘贴到（设置-自定义css代码）框再保存就行了。

 

我这里贴出个人初版css吧：（这里改了字体颜色，调整color应该看的出来吧）

body {

    color: #f66;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;

}

目前是body下面的内容都是能够改的=。=而后带删除线的内容好像改了也没用。

 

 

 

---

个人css分享

我如今已经改出一个我本身还比较满意的风格了，若是喜欢的话

 

页面定制CSS代码：

/*boby调节背景图片*/
body {
    background:url("http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg");
    background-position:center left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed
}

/*这是首页标签，就是博客园、首页、联系那些    a:hover是鼠标移过去的悬浮显示效果*/
#navList a {
    display: block;
    width: 11em;
    height: 22px;
    float: left;
    text-align: center;
    padding-top: 13px;
    font-size: initial;
    font-style: italic;
}
#navList a:hover {
    color: #fa6e6f;
    text-decoration: none;
}

/*Title是你的id:狂霞霞    a:hover是鼠标移过去的悬浮显示效果*/
#blogTitle h1 {
    font-size: 40px;
    font-weight: bold;
    line-height: -0.5em;
}
#blogTitle h1 a:hover {
    color: #f66;
}

/*opacity里面能够调节透明度，可是如何让图片不透明我还不知道，第二个margin top能够剪断上部分的刘海*/
#home {
    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    width: 80%;
    min-width: 949px;
    background-color: #fff;
    padding: 30px;
    margin-top: 10px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(77, 77, 77, 0.3);
    opacity: 0.87;
}

body {
    color: #f66;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
}

/*这个是文章的点赞系统，听说会影响手机版用户的使用，可是我这个辣鸡目前也每人看*/
#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:30px;
  border:2px solid #085;
  padding:10px;
  background-color:#fff;
  opacity:0.3;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  transition-duration: 0.5s;
}

#div_digg:hover{
  opacity:1;
}

博客侧边栏公告（支持HTML代码）

/*头像的连接本身选啦，别和我用同样吧，圆形头像是我本身用ps扣的，而后保存png格式*/

<a href="https://home.cnblogs.com/u/Kxia/"><img src="http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_%E5%A4%B4%E5%83%8F.png" alt="狂霞的头像（没刷出来请按F5或换个浏览器）" width="175px"></a>
<br>

/*XXXX里面的内容我匿了，反正大家也只是改连接对不对*/
B站连接：<a href="https://space.bilibili.com/XXXXXX">  &gt;狂霞霞霞&lt;</a>
<br>
知乎连接：<a href="https://www.zhihu.com/people/XXXXX">  &gt;小狐狸&lt;</a>
<br>

PS：大家本身要先选好SimpleMemory皮肤再贴我代码鸭，大家选其余皮肤的布局就不同了，改得乱七八糟别别别别赖我   =。=