自定义博客样式

　　

　　作为女生，肯定是喜欢美好漂亮的事物，这样心情也会变好，同时每个人也希望自己是独特的，于是我想定制属于自己的博客样式，能够将所学的东西应用于实际是一件很开心的事情，于是这篇文章我决定就用于记录我设计的皮肤吧。不过我没有学过设计，所以就是凭感觉和喜好吧。不过我打算学一些这方面的，所以也期待自己的设计能够越来越好。

 

　1. 田园桌布风（瞎定义的）

 

 

 

代码部分

 

1. 页面定制css代码

#main {
 padding: 20px 10%;
 background: #bad7df url(http://bpic.588ku.com/back_pic/03/82/05/0057c680eb5a216.jpg!/fh/300/quality/90/unsharp/true/compress/true) repeat;
}
#header {
  background: #bad7df url(http://bpic.588ku.com/back_pic/04/74/31/0458a3a1dbd32b2.jpg!/fh/300/quality/90/unsharp/true/compress/true) repeat;
}
#blogTitle {
  background: inherit
}
#navigator {
  background: #bad7df url(http://bpic.588ku.com/back_pic/04/74/31/0458a3a1dbd32b2.jpg!/fh/300/quality/90/unsharp/true/compress/true)  repeat;
}
#navList {
    min-height: 30px;
    margin: 0 auto;
    width: 500px;
    padding-left: 25px;
   float:none;
}
#navList a:link, #navList a:visited, #navList a:active {
    color: #ccc;
    font-weight: bold;
    background: #000;
    font-size: fff;
}
#navList a:hover {
  color: #fff;
}
#blogTitle h1 {
  width: 100%;
  text-align: center; 
  margin-left:4px;
}
.portrait-wrap {
    background: #bad7df url(http://bpic.588ku.com/back_pic/04/74/31/0458a3a1dbd32b2.jpg!/fh/300/quality/90/unsharp/true/compress/true) 0 88% repeat;
}
.portrait {
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
body {
  width: 101%;
  overflow-x:hidden;
}
.catListTitle {
  background: #000;
}

 

 

　　2. 页首HTML代码

<div class="portrait-wrap">
   <div class="portrait"> 
     <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3228054756,1363740121&amp;fm=11&amp;gp=0.jpg" width="100px" height="100px">
  </div>
<div></div></div>

 

 

自定义博客样式方法

　　1. 找到博客的“设置”

2. 按f12，打开控制台，这里我用的是谷歌浏览器

 

3. 然后我们就可以在“设置”中自定义样式了（不过这需要一些css和html基础，很简单的，可以到 http://www.w3school.com.cn/ 去学习，现查现用也很快的）

4. 最后保存就可以了