博客园皮肤(假装和别人不一样)

我是一个不太会CSS和HTML的菜鸟(也不能说一点也不懂)。但是我也想拥有一个和别人不一样的皮肤。

这个问题挣扎多遍以后,花了一个上午。我东搬西凑,弄了现在这个页面。

虽然还是丑,虽然审美也不怎么样。但把代码记录下来。

  1 /*公用*/
  2 body {
  3 font-size: 15px;
  4 padding: 0;
  5 margin: 0;
  6 font-family: "微软雅黑";
  7 
  8 }
  9 
 10 /*段落*/
 11 .postBody p, .postCon p {
 12 margin: 7px 0;
 13 line-height: 24px;
 14 }
 15 
 16 a {
 17 color: #464646;
 18 text-decoration: none;
 19 }
 20 
 21 a:hover {
 22 text-decoration: underline;
 23 }
 24 
 25 a:visited, a:hover {
 26 color: #464646;
 27 }
 28 
 29 ul {
 30 list-style: none;
 31 margin: 0;
 32 padding: 0;
 33 }
 34 
 35 image {
 36 border: none;
 37 }
 38 
 39 /*博客标题*/
 40 
 41 #blogTitle,#blogTitle a, #blogTitle h2 {
 42 
 43 font-weight: bold;
 44 color: #CC6500;
 45 float: left;
 46 margin-left: 120px;
 47 margin-top:10px; }
 48 
 49 #blogTitle h2 {
 50 font-size: small; 
 51 letter-spacing:3px;
 52 }
 53 
 54 #blogTitle .title {
 55 height: 100px;
 56 line-height: 100px;
 57 font-size: 36px;
 58 background: #fff url('') no-repeat;
 59 }
 60 
 61 #Header1_HeaderTitle {
 62 font-family: '宋体';
 63 font-size: x-large;
 64 }
 65 
 66 #blogTitle, #blogTitle a:hover {
 67 text-decoration: none;
 68 }
 69 /*子标题*/
 70 .subtitle {
 71 padding-left: 30px;
 72 font-size: 14px;
 73 color: #999;
 74 font-weight: normal;
 75 margin: 10px 0;
 76 }
 77 /*导航栏*/
 78 #navigator {
 79 z-index: 1;
 80 height: 100%;
 81 font-size: 16px;
 82  170PX;
 83 background: #55895B;
 84 text-align: center;
 85 position: fixed;
 86 }
 87 
 88 #navList li {
 89 margin: 0;
 90 line-height: 48px;
 91 }
 92 
 93 #navList li:hover {
 94 background: #6DA47D;
 95 }
 96 
 97 #navList li a {
 98 padding: 0 30px;
 99 text-decoration: none;
100 line-height: 48px;
101 border: 0;
102 color: #fff;
103 display: -moz-inline-box;
104 display: inline-block;
105 }
106 
107 .blogStats {
108 color: #fff;
109 line-height: 48px;
110  65px;
111 margin-left: 50px;
112 }
113 
114 #main {
115 margin-left: 10px;
116 padding: 20px;
117 }
118 /*左边*/
119 #sideBarMain {
120 padding: 0 10px 0 0;
121 background: #fff;
122 margin: 0 0px 20px 0;
123  80%;
124 font-size: 12px;
125 line-height: 22px;
126 }
127 
128 /*公告*/
129 #profile_block {
130 margin-top: 0px;
131 line-height: 24px;
132 text-align: left;
133 }
134 /*主面板*/
135 #mainContent {
136 margin-left: 200px;
137 margin-top: 100px;
138 padding: 20px;
139 }
140 /*每日文章列表*/
141 .day {
142 background: #fff;
143 padding: 0;
144 margin: 0 0 20px 0;
145 }
146 /*博客标题*/
147 .postTitle a {
148 color: #464646;
149 }
150 
151 .postTitle {
152 padding-bottom: 10px;
153 font-size: 20px;
154 font-weight: bold;
155 color: #464646;
156 background: url('') no-repeat 0 3px;
157 padding-left: 30px;
158 }
159 
160 .dayTitle {
161 display: none;
162 }
163 /*摘要*/
164 .c_b_p_desc {
165 padding: 10px;
166 line-height: 24px;
167 color: #888;
168 }
169 
170 .c_b_p_desc a {
171 color: #888;
172 }
173 
174 .c_b_p_desc a:hover {
175 text-decoration: none;
176 border-bottom- 1px;
177 border-bottom-style: dotted;
178 }
179 /*右侧图片*/
180 .desc_img {
181 margin-left: 10px;
182 border: solid 1px #fff;
183 box-shadow: 0 0 10px #aaa;
184 }
185 /*博文页*/
186 #topics .post {
187 background: #fff;
188 }
189 
190 .postCon {
191 padding: 10px 20px 0 20px;
192 }
193 
194 .postDesc {
195 margin: 0 30px;
196 margin-bottom: 2px;
197 padding: 8px 0px;
198 font-size: 12px;
199 color: #aaa;
200 background: #fff;
201 text-align: right;
202 }
203 
204 .postDesc a {
205 color: #AAA;
206 }
207 
208 .postBody {
209 padding: 0;
210 }
211 /*google搜索框*/
212 #google_q, #q {
213 height: 22px;
214  120px;
215 border: solid 1px #ccc;
216 box-shadow: inset 0 0 3px #ddd;
217 border-radius: 4px;
218 }
219 /*搜索按钮*/
220 .btn_my_zzk {
221 font-family: 'Microsoft Yahei';
222 border: none;
223 height: 26px;
224  60px;
225 padding: 1px;
226 font-size: 14px;
227 cursor: pointer;
228 position: relative;
229 vertical-align: middle;
230 display: inline-block;
231 background: #55895B;
232 border-radius: 4px;
233 color: #fff;
234 }
235 
236 .btn_my_zzk:hover {
237 background: #6DA47D;
238 }
239 /*评论按钮*/
240 
241 #btn_comment_submit {
242 border: none;
243 height: 48px;
244  120px;
245 }
246 /*评论按钮*/
247 .comment_btn {
248 font-family: 'Microsoft Yahei';
249 border: none;
250 height: 48px;
251  120px;
252 font-size: 18px;
253 cursor: pointer;
254 position: relative;
255 vertical-align: middle;
256 display: inline-block;
257 background: #55895B;
258 color: #fff;
259 }
260 
261 #btn_comment_submit:hover {
262 background: #6DA47D;
263 }
264 /*评论标题*/
265 .feedback_area_title {
266 padding: 10px;
267 font-size: 24px;
268 font-weight: bold;
269 color: #55895B;
270 border-bottom: solid 6px #55895B;
271 }
272 
273 .feedbackListSubtitle {
274 font-size: 12px;
275 color: #888;
276 }
277 
278 .feedbackListSubtitle a {
279 color: #888;
280 }
281 
282 .comment_quote {
283 background: #FCFAAC;
284 padding: 15px;
285 border: 1px solid #CCC;
286 }
287 
288 #commentform_title {
289 color: #55895B;
290 background-image: none;
291 background-repeat: no-repeat;
292 margin-bottom: 10px;
293 padding: 10px 20px 10px 10px;
294 font-size: 24px;
295 font-weight: bold;
296 border-bottom: solid 6px #55895B;
297 }
298 /*评论框*/
299 #comment_form {
300 margin: 10px 0;
301 padding: 0;
302 }
303 
304 .commentform {
305 margin: 10px 0;
306 padding: 10px 20px;
307 background: #fff;
308 }
309 /*评论输入域*/
310 #tbCommentBody {
311 font-family: 'MIcrosoft Yahei';
312 margin-top: 10px;
313  940px;
314 max- 940px;
315 min- 940px;
316 background: white;
317 color: #333;
318 border: 2px solid #fff;
319 box-shadow: inset 0 0 8px #aaa;
320 padding: 10px;
321 height: 120px;
322 font-size: 14px;
323 min-height: 120px;
324 }
325 /*评论条目*/
326 .feedbackItem {
327 font-size: 14px;
328 line-height: 24px;
329 margin: 10px 0;
330 padding: 20px;
331 background: #F2F2F2;
332 box-shadow: 0 0 5px #aaa;
333 }
334 
335 .feedbackListSubtitle {
336 font-weight: normal;
337 }
338 /*分类页*/
339 .entrylist {
340 padding: 10px 20px;
341 background: #fff;
342 }
343 
344 .entrylistItem {
345 margin: 10px 0;
346 padding: 10px;
347 }
348 
349 .entrylistPosttitle {
350 font-size: 18px;
351 font-weight: bold;
352 background: url('') no-repeat 0 3px;
353 padding-left: 30px;
354 }
355 
356 .entrylistPostSummary {
357 padding: 10px;
358 }
359 
360 .entrylistItemPostDesc {
361 font-size: 12px;
362 color: #999;
363 padding-left: 40px;
364 }
365 /*尾部*/
366 #footer {
367 font-size: 12px;
368 margin: 20px;
369 padding: 12px;
370 text-align: center;
371 /*background: #55895B;*/
372 color: #000000;
373 font-size: 14px;
374 }
375 /*文章内图片*/
376 #cnblogs_post_body p img {
377 margin: 10px;
378 }
379 /*顶一下*/
380 .diggnum {
381 font-size: 28px;
382 color: #6DA47D;
383 font-family: 'Microsoft Yahei';
384 }
385 
386 #div_digg .diggnum {
387 line-height: 100px;
388 }
389 
390 .diggit {
391 float: left;
392  128px;
393 height: 128px;
394 background: url('') no-repeat;
395 background-position: 0 0;
396 text-align: center;
397 cursor: pointer;
398 }
399 
400 .diggit:hover {
401 background-position: -128px 0;
402 }
403 
404 .buryit {
405 display: none;
406 }
407 
408 .diggword {
409 display: none;
410 }
411 
412 #green_channel {
413 text: align:right;
414 background: #6DA47D;
415 padding-left: 20px;
416 font-weight: normal;
417 font-size: 15px;
418  920px;
419 border: none;
420 color: #fff;
421 padding: 20px;
422 border-radius: 4px;
423 }
424 /*最新评论*/
425 #myposts .PostList {
426 font-size: 14px;
427 line-height: 24px;
428 margin: 10px 0;
429 padding: 20px;
430 background: #F2F2F2;
431 box-shadow: 0 0 5px #aaa;
432 }
433 
434 #myposts .postTitl2 a {
435 color: #6DA47D;
436 }
437 /*隐藏 公告 时间 等辅助功能*/
438 .newsItem {
439 display: none;
440 }
441 
442 #sideBarMain {
443 display: none;
444 }
445 
446 #leftcontentcontainer {
447 display: none;
448 }
View Code

 

我只是个菜鸟。而且还是个说不得的妹子。

我经不起批评。不喜勿喷。

如果,你真心指导,我一定毕恭毕敬,虚心受教。

如果,你要是和我一样,也是菜鸟,欢迎一起交流,迷茫的路上可以一起同行。

或者,你有好的学习方法, 希望不吝赐教,万分感激;

原文地址:https://www.cnblogs.com/srx121201/p/7448514.html