直接把模板禁用了,不然一堆问题。
CSS还有很多要学的,可能很多不完善的地方。
?1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ ?2 ????margin: 0; ?3 ????padding:0; ?4 } ?5 body{ ?6 ????width: 1200px; ?7 ????margin: 0 auto; ?8 ????color: #666; ?9 ????background-color: rgb(250, 250, 250); 10 ????font-family: "consolas","微软雅黑",sans-serif; 11 } 12 *::selection{ 13 ????background-color: rgb(214,236,254); 14 } 15 ul{ 16 ????list-style: none; 17 } 18 .clear{ 19 ????clear:both; 20 } 21 #lnkBlogLogo{ 22 ????display: none; 23 } 24 #home{ 25 ????margin: 30px 0 30px 0; 26 ????padding: 40px; 27 ????background-color:rgba(232,232, 232, 0.5); 28 ????border-radius: 5px; 29 ????box-shadow: 0 0 10px 0 rgba(218, 218, 218, 0.397); 30 } 31 #main{ 32 ????background-color:rgba(232,232, 232, 0); 33 } 34 /*【导航】 [start]*/ 35 #header{ 36 ????height: 104px; 37 ????background-color:rgba(232,232, 232, 0); 38 ????border-radius: 5px; 39 } 40 #blogTitle{ 41 ????margin-top: 10px; 42 ????height: 60px; 43 ????border-radius: 5px; 44 } 45 #blogTitle h1{ 46 ????margin: 8px 0 0 20px; 47 } 48 #blogTitle .headermaintitle{ 49 ????color: #888; 50 ????letter-spacing: 1px; 51 } 52 #blogTitle .headermaintitle:hover{ 53 ????color: rgb(74, 82, 109); 54 ?55 } 56 #navigator{ 57 ????height: 50px; 58 ????background-color: rgba(240, 240, 240, 0.5); 59 ????border-radius: 5px; 60 ????box-shadow: 0 0 6px 0 #ddd; 61 } 62 #navList li{ 63 ????float: left; 64 ????margin: 13px 0 0 40px; 65 } 66 #navList li:nth-child(1){ 67 ????margin-left: 20px; 68 } 69 #navList li a{ 70 ????color: rgb(63, 125, 187); 71 ????text-decoration: none; 72 ????font-size: 18px; 73 ????font-weight: bold; 74 } 75 #navList li a:hover{ 76 ????color: #369; 77 } 78 #header .blogStats{ 79 ????float: right; 80 ????margin: 15px 10px 0 0; 81 ????color: #369; 82 ????font-size: 17px; 83 } 84 /*【导航】 [end]*/ 85 ?86 #mainContent{ 87 ????background-color: rgb(252,252,252); 88 ????border-radius: 5px; 89 ????width: 840px; 90 ????float: left; 91 ????margin-top: 20px; 92 ????padding: 10px; 93 ????box-sizing: border-box; 94 ????box-shadow: 0 0 6px 0 #ddd; 95 } 96 ?97 /*【右侧栏】 [start]*/ 98 ?99 /**/100 #blog-calendar .CalTitle{101 ????margin-left: 25px;102 }103 #blog-calendar .CalTitle a{104 ????color: #666;105 ????text-decoration: none;106 ????font-size: 20px;107 ????font-weight: bold;108 ????padding: 3px 5px 3px 5px;109 }110 #blog-calendar .CalTitle a:hover{111 ????background-color: #eee;112 }113 #blog-calendar td{114 ????width: 30px;115 ????height: 25px;116 }117 #blog-calendar .CalTitle td:nth-child(2){118 ????width: 100px;119 }120 #blog-calendar .CalTodayDay{121 ????background-color: rgb(201, 201, 201);122 }123 #blog-calendar .CalTodayDay a{124 ????color: rgb(250, 250, 250);125 ????text-decoration: none;126 }127 #blog-calendar .CalTodayDay u{128 ????text-decoration: none;129 }130 /**/131 132 #sideBar{133 ????width: 260px;134 ????float: right;135 ????border-radius: 5px;136 ????box-sizing: border-box;137 ????margin-top: 20px;138 ????background-color:rgba(232,232, 232, 0);139 ????border-radius: 5px;140 }141 .catListTitle{142 ????color: rgb(36, 114, 192);143 ????padding: 6px;144 ????text-indent: 5px;145 ????background-color:rgba(232,232, 232, 0.5);146 ????border-bottom: 1.2px dashed #ccc;147 ????letter-spacing: 3px;148 149 }150 .newsItem .catListTitle{151 ????margin: 0;152 }153 #profile_block{154 ????margin-left: 20px;155 }156 #profile_block a{157 ????text-decoration: none;158 ????color: #369;159 ????font-size: 16px;160 ????padding: 4px 8px 4px 8px;161 ????border-radius: 3px;162 ????display: inline-block;163 }164 #profile_block a:hover{165 ????background-color: rgb(236, 236, 236);166 }167 .newsItem{168 ????border-bottom: 1.2px dashed #ccc;169 ????padding-bottom: 6px;170 ????box-shadow: 0 0 6px 0 #ddd;171 }172 #blog-calendar{173 ????padding: 10px 20px 10px 20px;174 ????box-shadow: 0 0 6px 0 #ddd;175 }176 .mySearch{177 ????margin-top: 30px;178 ????box-shadow: 0 0 6px 0 #ddd;179 ????padding-bottom: 10px;180 }181 #sidebar_shortcut{182 ????margin-top: 30px;183 ????box-shadow: 0 0 6px 0 #ddd;184 ????padding-bottom: 10px;185 }186 #sidebar_recentposts {187 ????margin-top: 30px;188 ????box-shadow: 0 0 6px 0 #ddd;189 ????padding-bottom: 1px;190 }191 #sidebar_recentposts ul{192 ?????margin: 10px;193 }194 #sidebar_recentposts li a{195 ????text-decoration: none;196 ????color: #369;197 ????font-size: 16.5px;198 ????padding: 4px 8px 4px 8px;199 ????border-radius: 3px;200 ????display: block;201 }202 #sidebar_recentposts li a:hover{203 ????background-color: rgb(236, 236, 236);204 }205 206 #sidebar_toptags {207 ????margin-top: 30px;208 ????box-shadow: 0 0 6px 0 #ddd;209 ????padding-bottom: 10px;210 }211 212 #sidebar_postarchive{213 ????margin-top: 30px;214 ????box-shadow: 0 0 6px 0 #ddd;215 ????padding-bottom: 10px;216 ????background-color: rgb(252, 252, 252);217 }218 #sidebar_postarchive ul{219 ????margin: 10px;220 }221 #sidebar_postarchive li a{222 ???text-decoration: none;223 ???color: #369;224 ???font-size: 16.5px;225 ???padding: 4px 8px 4px 8px;226 ???border-radius: 3px;227 ???display: block;228 }229 #sidebar_postarchive a:hover{230 ????background-color: rgb(236, 236, 236);231 }232 233 234 235 236 237 #sidebar_scorerank {238 ????margin-top: 30px;239 ????box-shadow: 0 0 6px 0 #ddd;240 }241 #sidebar_scorerank,#sidebar_search,#sidebar_toptags,#sidebar_recentposts,#sidebar_shortcut,#blog-calendar,.newsItem{242 ????background-color:rgb(252, 252, 252);243 }244 245 #sidebar_search_box .input_my_zzk{246 ????outline: none;247 ????width: 150px;248 ????height: 25px;249 ????border: 1.1px solid #ccc;250 ????margin: 10px 0 0 10px;251 ????border-radius: 3px;252 }253 #sidebar_search_box .input_my_zzk:focus{254 ????border-color: rgb(126, 185, 253);255 }256 #sidebar_search_box .btn_my_zzk{257 ????outline: none;258 ????border: none;259 ????background-color: rgb(59, 142, 236);260 ????color: #fff;261 ????letter-spacing: 2px;262 ????border-radius: 2px;263 ????height: 28px;264 ????line-height: 31px;265 ????position: relative;266 ????top: 1.3px;267 ????text-align: center;268 ????width: 83px;269 ????font-size: 16px;270 ????box-shadow: 1px 1px 0.5px 0 #aaa;271 ????cursor: pointer;272 }273 #sidebar_search_box .btn_my_zzk:active{274 ????background-color: rgb(30, 125, 233);275 }276 277 278 .catListLink li{279 ????margin: 10px 0 0 27px;280 ????display: inline-block;281 }282 .catListLink li a{283 ????text-decoration: none;284 ????color: #369;285 ????font-size: 16.5px;286 ????padding: 4px 8px 4px 8px;287 ????border-radius: 3px;288 }289 .catListLink li a:hover{290 ????background-color: rgb(236, 236, 236);291 }292 .catListTag ul{293 ????margin: 10px;294 ????border-radius: 5px;295 }296 .catListTag li{297 ????margin: 0;298 }299 .catListTag li::before{300 ????content: "?";301 ????color: #333;302 303 }304 .catListTag li a{305 ????text-decoration: none;306 ????color: #369;307 ????font-size: 16.5px;308 ????padding: 4px 8px 4px 8px;309 ????border-radius: 3px;310 ????display: inline-block;311 }312 .catListTag ?li:hover{313 ????background-color: rgb(236, 236, 236);314 }315 .catListBlogRank{316 ????padding-bottom: 6px;317 }318 .catListBlogRank li{319 ????margin: 6px 0 0 20px;320 }321 /*【右侧栏】 [end]*/322 323 324 325 326 327 328 /*【主体】 [start]*/329 .dayTitle{330 ????padding-bottom: 10px;331 ????border-bottom: 2px solid #ccc;332 ????margin: 20px 0 20px 0;333 ????font-weight: bold;334 ????font-size: 25px;335 }336 .dayTitle a{337 ????color: #369;338 ????text-decoration: none;339 340 }341 .postTitle{342 ????margin-bottom: 6px;343 ????font-weight: bold;344 ????font-size: 20px;345 }346 .postTitle::before{347 ????content: "#";348 ????font-size: 30px;349 ????font-style: italic;350 ????color: rgb(34, 144, 253);351 ????position: relative;352 ???353 }354 .postTitle a{355 ????color: rgb(36, 114, 192);356 ????text-decoration: none;357 }358 .postCon{359 ????padding: 8px;360 ????color: #666;361 ????box-shadow: 0 0 5px 0 #ddd;362 ????background-color: rgb(242, 242, 242);363 ????border-radius: 3px;364 }365 366 .postDesc{367 ????margin-bottom: 20px;368 ????color: #999;369 ????font-size: 17px;370 }371 .postDesc a,.postCon a{372 ????font-size: 17px;373 ????color: rgb(1, 179, 179);374 ????text-decoration: none;375 ????margin-left: 3px;376 }377 .postDesc a:hover,.postCon a:hover{378 ????color: rgb(3, 145, 145);379 ????text-decoration: underline;380 }381 382 383 /*【pager】*/384 #homepage_top_pager{385 ????display: none;386 }387 #mainContent > div > div:nth-child(7){388 ????display: none;389 }390 .topicListFooter{391 ????position: relative;392 ????left: 243px;393 ????width: 563px;394 ????background-color: #eee;395 ????border-radius:5px;396 ????padding: 5px 0 5px 10px;397 }398 .topicListFooter a{399 ????color: #666;400 ????text-decoration: none;401 ????background-color: #ddd;402 ????display: inline-block;403 ????padding: 3px 8px 3px 8px;404 ????border-radius: 4px;405 406 407 }408 409 /**/
Nice ,博客园的CSS 花了半天多终于弄完了
原文地址:https://www.cnblogs.com/bin21st/p/9699855.html