我是一个不太会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 }
我只是个菜鸟。而且还是个说不得的妹子。
我经不起批评。不喜勿喷。
如果,你真心指导,我一定毕恭毕敬,虚心受教。
如果,你要是和我一样,也是菜鸟,欢迎一起交流,迷茫的路上可以一起同行。
或者,你有好的学习方法, 希望不吝赐教,万分感激;