雁起平沙的网络日志

数量金融与R

我的Octopress样式表

| Comments

/sass/custom/_styles.scss里是用户自己定义的样式，我在博客里添加了表格、脚注、提示框等样式，本文作为备忘，博客每次更新本文会自动更新，这也是用octopress博客的好处，我不过是在博客里插入下面两段代码：

1
2
3

{% codeblock (/sass/custom/_styles.scss) %}
	{% render_partial ../sass/custom/_styles.scss raw%}
{% endcodeblock %}
1
2
3

{% codeblock (/sass/custom/_fonts.scss) %}
	{% render_partial ../sass/custom/_fonts.scss raw%}
{% endcodeblock %}

由于本人刚刚学习CSS，所以写的东西难免幼稚，也可能有错的地方，请各位看官多提宝贵意见。

关于sass和scss，请参考《使用scss來加速寫css吧!》和《用強大的compass+sass寫css》

自定义样式

(/sass/custom/_styles.scss) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

/* 自定义的样式 */
p,blockquote,ul,ol{margin-bottom: 0.618em}  /* 调整行距*/

@media only screen and (min-width:992px) {
h1 {
    font-size:2.2em
}
}

blockquote{
	font-family:Arial, 楷体_GB2312, sans-serif;
}

/* 提示框样式 */

.info, .warning{

	border:none;
	padding:0.6em 1.25em 0.6em 48px;
	margin-top:0.25em;

	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
	-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

.info{
	background:#d5e9f6 url(/cn/images/blog/tab_info.gif) no-repeat left top;
}

.warning{
	background:#f9d9d8 url(/cn/images/blog/tab_red.gif) no-repeat left top;
}



/* -----表格样式----- */

.datalist{
    border:1px solid #007eff;
    border-collapse:collapse;
	margin: 20px auto 20px auto;
	
}

.datalist caption{
	font-weight:bold;
	text-align:center;
}

.datalist th{
    border:1px solid #429fff;
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
}

.datalist td{
      border:1px solid #429fff;
      text-align:left;
      padding:4px;
}

.datalist tr:hover{
    background-color:#c4e4fe;
}

/* -------------- */

.none-left-margin{
    padding-left: 0;
}



/* -----侧边栏样式----- */

.blogroll a{
    text-decoration:none;

}

#recent_posts a{
    text-decoration:none;

}

#copyleft a{
    text-decoration:none;
}

#comment_sidebar a{
    text-decoration:none;
}

#comment_sidebar ul{
    padding-left:0;
}

#categories_tag a{
    text-decoration:none;

}



/*--- 关于脚注 ---*/
div.footnotes{
	border-top: 1px dashed grey;
	font-size: 0.8em;
	
}

div.footnotes > ol:before{
	margin-left: -20px;
	content: "脚注： ";
}

.footnotes blockquote{
	font-size: 0.8em;
}

a[rel="footnote"]:after{
	content: "]";
}

a[rel="footnote"]:before{
	content: "[";
}

a[rev="footnote"]:after{
	content: "]";
}

a[rev="footnote"]:before{
	content: "[";
}

/*--- 关于脚注结束 ---*/


pre code{
	color:#DDD;
}


div.showbox{
	margin: 15px auto 15px auto;
	background-color: white;
	border: solid 1px black;
	padding: 10px 10px 5px 10px;

}

div.sharing{
	margin-bottom: 25px;
}

自定义字体样式

(/sass/custom/_styles.scss) 
1
2
3
4
5
6
7
8
9

// Here you can easily change font faces which are used in your site.
// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. your sites's.
// If you love to use Web Fonts, you also need to add some lines to source/_includes/custom/head.html

$sans: Palatino, "Palatino Linotype", Georgia， "Hiragino Sans GB", "文泉驿微米黑", "Microsoft YaHei","SimSun", sans-serif;
$serif: "Baskerville", "文泉驿微米黑", serif;
//$mono:"PT mono", "Courier", "文泉驿微米黑", "Microsoft YaHei", monospace;
$heading-font-family: "Verdana", 楷体_GB2312, sans-serif;
$header-title-font-family: "Futura", sans-serif;

Comments