自定義博客樣式

　　

　　做爲女生，確定是喜歡美好漂亮的事物，這樣心情也會變好，同時每一個人也但願本身是獨特的，因而我想定製屬於本身的博客樣式，可以將所學的東西應用於實際是一件很開心的事情，因而這篇文章我決定就用於記錄我設計的皮膚吧。不過我沒有學過設計，因此就是憑感受和喜愛吧。不過我打算學一些這方面的，因此也期待本身的設計可以愈來愈好。

 

　1. 田園桌布風（瞎定義的）

 

 

 

代碼部分

 

1. 頁面定製css代碼

 1 #main {
 2  padding: 20px 10%;
 3  background: #bad7df url(http://bpic.588ku.com/back_pic/03/82/05/0057c680eb5a216.jpg!/fh/300/quality/90/unsharp/true/compress/true) repeat;
 4 }
 5 #header {
 6   background: #bad7df url(http://bpic.588ku.com/back_pic/04/74/31/0458a3a1dbd32b2.jpg!/fh/300/quality/90/unsharp/true/compress/true) repeat;
 7 }
 8 #blogTitle {
 9   background: inherit
10 }
11 #navigator {
12   background: #bad7df url(http://bpic.588ku.com/back_pic/04/74/31/0458a3a1dbd32b2.jpg!/fh/300/quality/90/unsharp/true/compress/true)  repeat;
13 }
14 #navList {
15     min-height: 30px;
16     margin: 0 auto;
17     width: 500px;
18     padding-left: 25px;
19    float:none;
20 }
21 #navList a:link, #navList a:visited, #navList a:active {
22     color: #ccc;
23     font-weight: bold;
24     background: #000;
25     font-size: fff;
26 }
27 #navList a:hover {
28   color: #fff;
29 }
30 #blogTitle h1 {
31   width: 100%;
32   text-align: center; 
33   margin-left:4px;
34 }
35 .portrait-wrap {
36     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;
37 }
38 .portrait {
39     width: 100px;
40     margin: 0 auto;
41     border-radius: 50%;
42     overflow: hidden;
43 }
44 body {
45   width: 101%;
46   overflow-x:hidden;
47 }
48 .catListTitle {
49   background: #000;
50 }

 

 

　　2. 頁首HTML代碼

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

 

 

自定義博客樣式方法

　　1. 找到博客的「設置」

2. 按f12，打開控制檯，這裏我用的是谷歌瀏覽器

 

3. 而後咱們就能夠在「設置」中自定義樣式了（不過這須要一些css和html基礎，很簡單的，能夠到 http://www.w3school.com.cn/ 去學習，現查現用也很快的）

4. 最後保存就能夠了