| 博客园自定义页面风格设计 | 您所在的位置：网站首页 › 自定义页设计 › 博客园自定义页面风格设计 |
|
最近好多人问我博客的页面设计模版，时间挺紧张的，赶着搞策划和学习。。。趁着现在放假写写吧~~~ 全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用Simple Memory，可以自适应，方便我们进行页面CSS定制 论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ ①拥有自己的CSS代码我自己是完全禁用掉了模板CSS 然后会发现，blog干净得很，一点样式都没有。 对于我们这种小白来说，从头到尾自己写一份完整的CSS代码是不现实的，这时候我们需要一份代码模板，拿模板来改就比较容易了。 网上会有一些人把自己的CSS代码公开出来，当然实际上你浏览别人的blog的时候，（对于Chrome浏览器）轻按F12，你可以在style那个小栏里找到该网页的CSS代码链接，或者似乎可以写个爬虫啥的来获取，下面是我写的Python爬虫代码，轻松获取~~~ 1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 import urllib2 4 resp=urllib2.urlopen('http://www.cnblogs.com/ECJTUACM-873284962/') 5 html=resp.read() 6 print html我之前的CSS代码： 1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205424 url('https://i.loli.net/2017/08/15/59923c58cc40f.jpg') no-repeat top center fixed; 8 min-width:1200px; 9 } 10 #home { 11 opacity: 0.95; 12 filter: alpha(opacity=95); 13 box-shadow:0 0 10px #000; 14 margin:40px auto; 15 width:1200px; 16 background:#fff; 17 overflow:auto; 18 border:solid 1px #fff; 19 } 20 /*段落*/ 21 .postBody p,.postCon p { 22 margin:7px 0; 23 line-height:24px; 24 } 25 h1 { 26 margin:0; 27 } 28 h3 { 29 font-size:15px; 30 font-weight:bold; 31 } 32 /*超链接*/ 33 a { 34 color:#464646; 35 text-decoration:none; 36 } 37 a:hover { 38 text-decoration:underline; 39 } 40 a:visited,a:hover { 41 color:#464646; 42 } 43 ul { 44 list-style:none; 45 margin:0; 46 padding:0; 47 } 48 image { 49 border:none; 50 } 51 #header { 52 padding:20px; 53 } 54 /*博客标题*/ 55 #blogTitle,#blogTitle a { 56 font-weight:bold; 57 color:#666; 58 } 59 #blogTitle .title { 60 margin-top:10px; 61 height:100px; 62 line-height:100px; 63 font-size:36px; 64 padding-left:120px; 65 background:#fff url('https://i.loli.net/2017/08/02/598187babf39e.gif') no-repeat; 66 } 67 .headermaintitle { 68 }#blogTitle,#blogTitle a:hover { 69 text-decoration:none; 70 } 71 /*子标题*/ 72 .subtitle { 73 padding-left:30px; 74 font-size:14px; 75 color:#999; 76 font-weight:normal; 77 margin:10px 0; 78 } 79 /*导航栏*/ 80 #navigator { 81 font-size:16px; 82 height:48px; 83 background:#FFAAD5; 84 text-align:center; 85 margin-top:20px; 86 margin-bottom:20px; 87 } 88 #navList li { 89 margin:0; 90 line-height:48px; 91 display:inline-block; 92 float:left; 93 } 94 #navList li:hover { 95 background:#6DA47D; 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 .blogStats { 107 height:48px; 108 color:#fff; 109 line-height:48px; 110 } 111 #main { 112 padding:20px; 113 } 114 /*左边*/ 115 #sideBarMain { 116 padding:0 10px 0 0; 117 background:#fff; 118 margin:0 0 20px 0; 119 width:190px; 120 font-size:12px; 121 line-height:22px; 122 } 123 #sideBarMain a { 124 color:#666; 125 } 126 #leftcontentcontainer { 127 color:#666; 128 } 129 .newsItem { 130 color:#666; 131 } 132 /*公告*/ 133 #profile_block { 134 margin-top:0px; 135 line-height:24px; 136 text-align:left; 137 } 138 /*主面板*/ 139 #mainContent { 140 margin-top:0px; 141 padding-top:0px; 142 padding-right:0px; 143 background:#fff; 144 padding-bottom:0px; 145 float:right; 146 width:960px; 147 padding-left:0px; 148 } 149 /*每日文章列表*/ 150 .day { 151 background:#fff; 152 padding:0; 153 margin:0 0 20px 0; 154 } 155 /*博客标题*/ 156 .postTitle a { 157 color:#464646; 158 } 159 .postTitle { 160 padding-bottom:10px; 161 font-size:20px; 162 font-weight:bold; 163 color:#464646; 164 background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px; 165 padding-left:30px; 166 } 167 .dayTitle { 168 display:none; 169 } 170 /*摘要*/ 171 .c_b_p_desc { 172 padding:10px; 173 line-height:24px; 174 color:#888; 175 } 176 .c_b_p_desc a { 177 color:#888; 178 } 179 .c_b_p_desc a:hover { 180 text-decoration:none; 181 border-bottom-width:1px; 182 border-bottom-style:dotted; 183 } 184 /*右侧图片*/ 185 .desc_img { 186 margin-left:10px; 187 border:solid 1px #fff; 188 box-shadow:0 0 10px #aaa; 189 } 190 /*博文页*/ 191 #topics .post { 192 background:#fff; 193 } 194 .postCon { 195 padding:10px 20px 0 20px; 196 } 197 .postDesc { 198 margin:0 30px; 199 margin-bottom:2px; 200 padding:8px 0px; 201 font-size:12px; 202 color:#aaa; 203 background:#fff; 204 text-align:right; 205 } 206 .postDesc a { 207 color:#AAA; 208 } 209 .postBody { 210 padding:0; 211 } 212 /*google搜索框*/ 213 #google_q,#q { 214 height:22px; 215 width:120px; 216 border:solid 1px #ccc; 217 box-shadow:inset 0 0 3px #ddd; 218 border-radius:4px; 219 } 220 /*搜索按钮*/ 221 .btn_my_zzk { 222 font-family:'Microsoft Yahei'; 223 border:none; 224 height:26px; 225 width:60px; 226 padding:1px; 227 font-size:14px; 228 cursor:pointer; 229 position:relative; 230 vertical-align:middle; 231 display:inline-block; 232 background:#FFAAD5; 233 border-radius:4px; 234 color:#fff; 235 } 236 .btn_my_zzk:hover { 237 background:#6DA47D; 238 } 239 /*评论按钮*/ 240 241 #btn_comment_submit { 242 border:none; 243 height:48px; 244 width:120px; 245 } 246 /*评论按钮*/ 247 .comment_btn { 248 font-family:'Microsoft Yahei'; 249 border:none; 250 height:48px; 251 width:120px; 252 font-size:18px; 253 cursor:pointer; 254 position:relative; 255 vertical-align:middle; 256 display:inline-block; 257 background:#FFAAD5; 258 color:#fff; 259 } 260 #btn_comment_submit:hover { 261 background:#6DA47D; 262 } 263 /*评论标题*/ 264 .feedback_area_title { 265 padding:10px; 266 font-size:24px; 267 font-weight:bold; 268 color:#55895B; 269 border-bottom:solid 6px #FFAAD5; 270 } 271 .feedbackListSubtitle { 272 font-size:12px; 273 color:#888; 274 } 275 .feedbackListSubtitle a { 276 color:#888; 277 } 278 .comment_quote { 279 background:#FCFAAC; 280 padding:15px; 281 border:1px solid #CCC; 282 } 283 #commentform_title { 284 color:#55895B; 285 background-image:none; 286 background-repeat:no-repeat; 287 margin-bottom:10px; 288 padding:10px 20px 10px 10px; 289 font-size:24px; 290 font-weight:bold; 291 border-bottom:solid 6px #55895B; 292 } 293 /*评论框*/ 294 #comment_form { 295 margin:10px 0; 296 padding:0; 297 } 298 .commentform { 299 margin:10px 0; 300 padding:10px 20px; 301 background:#fff; 302 } 303 /*评论输入域*/ 304 #tbCommentBody { 305 font-family:'MIcrosoft Yahei'; 306 margin-top:10px; 307 width:940px; 308 max-width:940px; 309 min-width:940px; 310 background:white; 311 color:#333; 312 border:2px solid #fff; 313 box-shadow:inset 0 0 8px #aaa; 314 padding:10px; 315 height:120px; 316 font-size:14px; 317 min-height:120px; 318 } 319 /*评论条目*/ 320 .feedbackItem { 321 font-size:14px; 322 line-height:24px; 323 margin:10px 0; 324 padding:20px; 325 background:#F2F2F2; 326 box-shadow:0 0 5px #aaa; 327 } 328 .feedbackListSubtitle { 329 font-weight:normal; 330 } 331 /*分类页*/ 332 .entrylist { 333 padding:10px 20px; 334 background:#fff; 335 } 336 .entrylistItem { 337 margin:10px 0; 338 padding:10px; 339 } 340 .entrylistPosttitle { 341 font-size:18px; 342 font-weight:bold; 343 background:url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px; 344 padding-left:30px; 345 } 346 .entrylistPostSummary { 347 padding:10px; 348 } 349 .entrylistItemPostDesc { 350 font-size:12px; 351 color:#999; 352 padding-left:40px; 353 } 354 /*尾部*/ 355 #footer { 356 font-size:12px; 357 margin:20px; 358 padding:12px; 359 text-align:center; 360 background:#FFAAD5; 361 color:#DDD; 362 font-size:14px; 363 } 364 /*文章内图片*/ 365 #cnblogs_post_body p img { 366 margin:10px; 367 } 368 /*顶一下*/ 369 .diggnum { 370 font-size:28px; 371 color:#FFFFFF; 372 font-family:'Microsoft Yahei'; 373 } 374 #div_digg .diggnum { 375 line-height:100px; 376 } 377 .diggit { 378 float:left; 379 width:340px; 380 height:256px; 381 background:url('http://images.cnblogs.com/cnblogs_com/zhien-aa/859075/o_215836877z8yhb8xbfydgb.gif') no-repeat; 382 background-position:0 0; 383 text-align:center; 384 cursor:pointer; 385 } 386 .diggit:hover { 387 background-position:-128px 0; 388 } 389 /*踩一下（园友反映，这个有点“邪恶”，呵呵，其实是我没来得及设计这个背景图片，就暂时把它隐藏了……可以去掉这句话）*/ 390 .buryit { 391 display:none; 392 } 393 .diggword { 394 display:none; 395 } 396 /*green_channel*/ 397 #green_channel { 398 text:align:right; 399 background:#6DA47D; 400 padding-left:20px; 401 font-weight:normal; 402 font-size:15px; 403 width:920px; 404 border:none; 405 color:#fff; 406 padding:20px; 407 border-radius:4px; 408 } 409 /*最新评论*/ 410 #myposts .PostList { 411 font-size:14px; 412 line-height:24px; 413 margin:10px 0; 414 padding:20px; 415 background:#F2F2F2; 416 box-shadow:0 0 5px #aaa; 417 } 418 #myposts .postTitl2 a { 419 color:#6DA47D; 420 } 421 #ZjmainstayCnblogsSWFTags{ 422 overflow: visible; 423 position: absolute; 424 right: 10px; 425 top: 735px; 426 width: 160px; 427 z-index: 10000; 428 } 429 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 430 A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 431 432 #MagicArray{ 433 /* Firefox 4 */ 434 -moz-transition-property:width height bottom right; 435 -moz-transition-duration:1s; 436 437 /* Safari and Chrome */ 438 -webkit-transition-property:width height bottom right; 439 -webkit-transition-duration:1s; 440 441 /* Opera */ 442 -o-transition-property:width height bottom right; 443 -o-transition-duration:1s; 444 445 position: fixed; 446 bottom:107px; 447 right: 108px; 448 width: 0px; 449 height: 0px; 450 text-align: center; 451 z-index:2; 452 }我现在的CSS代码，大部分参考我的挚友swm_sxt(大神) 下面贴出现在的CSS源码： 1 #site_nav_under { 2 display: none; 3 } 4 .c_ad_block, .ad_text_commentbox { 5 display: none; 6 margin: 0; 7 padding: 0; 8 } 9 #ad_under_google { 10 height: 0; 11 overflow: hidden; 12 } 13 #ad_under_google a { 14 display: none; 15 } 16 17 18 @charset "utf-8"; 19 /* CSS Document */ 20 21 /************************************************** 22 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。 23 如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是 24 你不能删除这些样式。 25 **************************************************/ 26 #EntryTag { 27 margin-top: 20px; 28 font-size: 9pt; 29 color: gray; 30 } 31 .topicListFooter { 32 text-align: right; 33 margin-right: 10px; 34 margin-top: 10px; 35 } 36 #divRefreshComments{ 37 text-align: right; 38 margin-right: 10px; 39 margin-bottom: 5px; 40 font-size: 9pt; 41 } 42 /*****第一部分结束*******************************/ 43 44 /************************************************** 45 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你 46 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤 47 模板所有页面的变化。因为它们是全局的。 48 **************************************************/ 49 * { 50 margin: 0; 51 padding: 0; 52 } 53 html { 54 height: 100%; 55 } 56 body { 57 background:url(https://i.loli.net/2017/08/15/59923c58cc40f.jpg) no-repeat fixed; 58 background-size:cover; 59 color:#000; 60 font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif"; 61 font-size: 15px; 62 min-height: 101%; 63 width:75em; 64 margin-left:auto; 65 margin-right:auto; 66 z-index:0; 67 } 68 69 #Uleft, #Uright,#Dleft, #Dright{ 70 /* Firefox 4 */ 71 -moz-transition-property:top; 72 -moz-transition-duration:1s; 73 74 /* Safari and Chrome */ 75 -webkit-transition-property:top; 76 -webkit-transition-duration:1s; 77 78 /* Opera */ 79 -o-transition-property:top; 80 -o-transition-duration:1s; 81 position: fixed; 82 width: 80px; 83 height: 80px; 84 line-height: 500px; 85 text-align: center; 86 z-index:1; 87 } 88 #Uleft{ 89 width: 80px; 90 height: 80px; 91 top:-60px; 92 left: 50px; 93 } 94 #Uright{ 95 width: 110px; 96 height: 110px; 97 top: -75px; 98 right: 50px; 99 } 100 #Dleft{ 101 bottom:10px; 102 left: 10px; 103 width: 200px; 104 height: 200px; 105 } 106 #Dright{ 107 bottom:-50px; 108 right: 0px; 109 width: 200px; 110 height: 250px; 111 } 112 113 #MagicArray{ 114 /* Firefox 4 */ 115 -moz-transition-property:width height bottom right; 116 -moz-transition-duration:1s; 117 118 /* Safari and Chrome */ 119 -webkit-transition-property:width height bottom right; 120 -webkit-transition-duration:1s; 121 122 /* Opera */ 123 -o-transition-property:width height bottom right; 124 -o-transition-duration:1s; 125 126 position: fixed; 127 bottom:107px; 128 right: 108px; 129 width: 0px; 130 height: 0px; 131 text-align: center; 132 z-index:2; 133 } 134 #Tab1{ 135 -moz-transition-property:fontSize width height; 136 -moz-transition-delay:0.8s; 137 138 -webkit-transition-property:fontSize width height; 139 -webkit-transition-delay:0.8s; 140 141 -o-transition-property:fontSize width height; 142 -o-transition-delay:0.8s; 143 144 color:#8B0A50; 145 position: fixed; 146 font-size: 0px; 147 text-align: center; 148 z-index:3; 149 font-weight:500; 150 text-shadow: 151 -1px 0 #7A67EE, 152 1px #7A67EE, 153 1px 0 #7A67EE, 154 -1px #7A67EE; 155 } 156 157 ::selection{background:#698B22;color:#FFF;} 158 ::-moz-selection{background#698B22;color:#FFF;} 159 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 160 A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 161 input{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 162 wait{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} 163 input{outline:medium;} 164 /* 165 http://fq.wc.lt//up/1499566113.cur 166 http://fq.wc.lt//up/1499565578.cur 167 http://fq.wc.lt//up/1499564884.cur 168 */ 169 /*鼠标*/ 170 171 table { 172 border-collapse: collapse; 173 border-spacing: 0; 174 } 175 fieldset, img { 176 border: 0; 177 } 178 ul { 179 word-break: break-all; 180 } 181 li { 182 list-style: none; 183 } 184 h1, h2, h3, h4, h5, h6 { 185 font-size: 100%; 186 font-weight: normal; 187 } 188 a:link { 189 color:black; 190 text-decoration:none; 191 } 192 a:visited { 193 color:#111; 194 text-decoration: none; 195 } 196 a:hover { 197 color: #7B68EE; 198 -moz-border-radius: 9px; 199 -khtml-border-radius: 9px; 200 -webkit-border-radius: 9px; 201 border-radius: 9px; 202 transition: all 0.4s linear 0s; 203 } 204 a:active { 205 color: black; 206 text-decoration: none; 207 } 208 .clear { 209 clear: both; 210 } 211 /*****第二部分结束*******************************/ 212 213 /************************************************** 214 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他 215 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮 216 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。 217 **************************************************/ 218 /*****home和头部开始**************************/ 219 #home { 220 margin: 0 auto; 221 width:95%; 222 min-width: 60em; 223 } 224 #header { 225 padding-bottom: 0.4em; 226 margin-top: 0.8em; 227 } 228 #blogTitle { 229 height: 7em; 230 clear: both; 231 border:1px solid #000; 232 -moz-border-radius: 11px; 233 -khtml-border-radius: 11px; 234 -webkit-border-radius: 11px; 235 border-radius: 12px; 236 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 237 text-shadow:1px 1px 1px #e9f3e8 238 } 239 #blogTitle h1 { 240 font-size: 300%; 241 font-weight: bold; 242 margin-left: 1em; 243 margin-top: 0.4em; 244 width: 50%; 245 float: left; 246 } 247 #blogTitle h2 { 248 margin-left: 6em; 249 line-height: 1.5em; 250 width: 50%; 251 float: left; 252 text-shadow:-1px 0 #ddd, 253 1px #ddd, 254 1px 0 #ddd, 255 -1px #ddd; 256 } 257 #blogLogo { 258 float: right; 259 } 260 #navigator { 261 /* background-color: black; 262 height: 30px; 263 clear: both;*/ 264 265 margin-top:0.3em; 266 height: 2em; 267 clear:both; 268 border:1px solid #999; 269 -moz-border-radius: 11px; 270 -khtml-border-radius: 11px; 271 -webkit-border-radius: 11px; 272 border-radius: 11px; 273 -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px; 274 background:#FFF; 275 opacity: 0.60; 276 } 277 #navList { 278 min-height: 1.5em; 279 float: left; 280 } 281 #navList li { 282 float: left; 283 } 284 #navList a { 285 display: block; 286 padding-left:0.5em; 287 padding-right:0.5em; 288 line-height:2em; 289 float: left; 290 text-align: center; 291 border-right: 1px solid #999; 292 } 293 #navList a:link, #navList a:visited, #navList a:active { 294 /* color: #ccc;*/ 295 } 296 #navList a:hover { 297 color: #7B68EE; 298 padding-left:0.8em; 299 padding-right:0.8em; 300 } 301 302 .blogStats { 303 float: right; 304 font-size:0.8em; 305 color: #000; 306 margin-top: 0.9em; 307 margin-right: 0.2em; 308 text-align: right; 309 } 310 /*****home和头部结束**************************/ 311 312 /*****主页文章列表开始**************************/ 313 #main{ 314 width: 100%; 315 min-width: 70em; 316 text-align: left; 317 background:#FFF5EE; 318 opacity: 0.90; 319 } 320 #mainContent .forFlow{ 321 margin-left: 12em; 322 float: none; 323 width: auto; 324 } 325 326 #mainContent { 327 min-height: 18em; 328 padding: 0px 0px 10px 0; 329 *padding-top:10px; 330 -o-text-overflow: ellipsis; 331 text-overflow: ellipsis; 332 overflow: hidden; 333 word-break: break-all; 334 335 float: right; 336 margin-left: -26em; 337 width: 100% 338 } 339 .day { 340 min-height: 10px; 341 _height: 10px; 342 margin-bottom: 20px; 343 padding-bottom: 5px; 344 } 345 .dayTitle { 346 width: 100%; 347 color: #666; 348 349 font-weight: bold; 350 line-height: 1.5em; 351 font-size: 90%; 352 margin-top: 3px; 353 margin-bottom: 10px; 354 clear:both; 355 border-bottom: 2px solid #e9f3e8; 356 text-align:center; 357 358 } 359 .postTitle { 360 font-size: 150%; 361 font-weight: bold; 362 /*border-bottom: 1px solid #9DAAF4;*/ 363 float: right; 364 line-height: 1.5em; 365 width: 100%; 366 clear:both; 367 text-shadow:-3px 3px 3px #999 368 } 369 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 370 color: #000; 371 transition: all 0.4s linear 0s; 372 } 373 .postTitle a:hover { 374 margin-left: 10px; 375 color: #7B68EE; 376 text-decoration: none; 377 text-shadow:-13px 3px 3px #999 378 } 379 .postCon { 380 float: right; 381 line-height: 1.5em; 382 width: 100%; 383 clear:both; 384 padding: 10px 0; 385 } 386 .postDesc { 387 float: right; 388 width: 100%; 389 clear:both; 390 text-align: right; 391 padding-right: 5px; 392 color: #666; 393 margin-top: 5px; 394 } 395 .postDesc a:link, .postDesc a:visited, .postDesc a:active { 396 color: #666; 397 padding-right: 10px; 398 } 399 .postDesc a:hover { 400 color: #7B68EE; 401 text-decoration: none; 402 } 403 .postSeparator { 404 clear: both; 405 height: 1px; 406 border-top: 1px dotted #666; 407 width: 100%; 408 clear:both; 409 float: right; 410 margin: 0 auto 15px auto; 411 } 412 .diggit{ 413 text-align: center; 414 width:50px; 415 height:40px; 416 background:url(http://fq.wc.lt//up/1503755899.png); 417 background-size:100% 100%; 418 } 419 .buryit{ 420 font-size:0px; 421 width:0; 422 height:0; 423 } 424 .burynum{ 425 font-size:0px; 426 width:0; 427 height:0; 428 } 429 /*****主页文章列表结束**************************/ 430 431 /*****侧边栏开始********************************/ 432 #sideBar { 433 width: 14em; 434 min-height: 14em; 435 padding: 0px 0px 0px 5px; 436 float: left; 437 -o-text-overflow: ellipsis; 438 text-overflow: ellipsis; 439 overflow: hidden; 440 word-break: break-all; 441 font-size:0.7em; 442 opacity:0.85; 443 } 444 .counter{ 445 } 446 .notice{ 447 font-size:xx-small; 448 } 449 .btn_my_zzk{ 450 display: inline-block; 451 font-size: 24px; 452 cursor: pointer; 453 text-align: center; 454 text-decoration: none; 455 outline: none; 456 color: #fff; 457 background-color: #a55b97; 458 border: none; 459 border-radius: 15px; 460 box-shadow: 0 4px #999; 461 } 462 .newsItem .catListTitle { 463 display: none; 464 } 465 .newsItem { 466 padding: 15px 0 5px 0px; 467 font-weight:bold; 468 font-size:14px; 469 margin-bottom: 8px; 470 } 471 /**日历控件样式开始**/ 472 #calendar { 473 width: 14em; 474 } 475 #calendar .Cal { 476 width: 100%; 477 line-height: 1.5em; 478 } 479 .Cal {/**日历容器table**/ 480 border: none; 481 color: #111; 482 } 483 #calendar table a:link, #calendar table a:visited, #calendar table a:active { 484 font-weight: bold; 485 } 486 #calendar table a:hover { 487 color: #7B68EE; 488 text-decoration: none; 489 background-color: #7B68EE; 490 } 491 .CalTodayDay{/**今天日期样式**/ 492 color: #EE82EE; 493 } 494 #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/ 495 font-weight: bold; 496 background-color: #7B68EE; 497 } 498 .CalDayHeader{ 499 border-bottom:1px solid #ccc; 500 } 501 .CalTitle{/**日历年月头部样式**/ 502 width:100%; 503 background:#FFF; 504 color:black; 505 border-bottom:1px solid #666; 506 } 507 /**日历控件样式结束**/ 508 .catListTitle { 509 font-weight: bolder; 510 font-family:STCaiyun; 511 color: #B03060; 512 line-height: 2em; 513 font-size: 150%; 514 margin-top: 50px; 515 margin-bottom: 10px; 516 border-bottom: 1px solid #e9f3e8; 517 text-align: center; 518 } 519 .catListComment { 520 line-height: 1.5em; 521 } 522 .divRecentComment { 523 color: #666; 524 margin-bottom:1em; 525 } 526 .c_b_p_link_desc{ 527 color: #666; 528 font-size: 30%; 529 margin-bottom:1.5em; 530 } 531 #sideBarMain ul { 532 line-height: 1.5em; 533 } 534 .catListEssay{ 535 font-weight: bolder; 536 } 537 .catListTag{ 538 font-size: 90%; 539 font-weight: bolder; 540 } 541 .catList{ 542 font-weight: bolder; 543 } 544 .catListFeedback{ 545 font-weight: bolder; 546 } 547 .catListView{ 548 font-weight: bolder; 549 } 550 .recent_comment_title{ 551 font-weight: bolder; 552 } 553 .recent_comment_body{ 554 font-size: 30%; 555 } 556 .recent_comment_author{ 557 color:#666; 558 font-size: 30%; 559 } 560 /*****侧边栏结束********************************/ 561 562 563 /****查看文章页面开始*************************/ 564 #topics { 565 width: 100%; 566 min-height: 18em; 567 padding: 0px 0px 10px 0; 568 float: left; 569 -o-text-overflow: ellipsis; 570 text-overflow: ellipsis; 571 overflow: hidden; 572 word-break: break-all; 573 } 574 #topics .postTitle { 575 font-size: 200%; 576 font-weight: bold; 577 border-bottom: 1px solid #999; 578 float: left; 579 line-height: 1.5em; 580 width: 100%; 581 text-align: center; 582 } 583 .postBody { 584 padding: 5px 2px 5px 5px; 585 line-height: 1.5em; 586 color: #000; 587 border-bottom: 1px solid #8686FF; 588 } 589 #EntryTag { 590 color: #000; 591 } 592 #EntryTag a { 593 margin-left: 5px; 594 } 595 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active { 596 color: #000; 597 } 598 #EntryTag a:hover { 599 color: #7B68EE; 600 } 601 #topics .postDesc { 602 float: right; 603 width: 100%; 604 font-size:0.9em; 605 text-align: right; 606 padding-right: 5px; 607 color: #000; 608 margin-top: 5px; 609 } 610 .feedback_area_title { 611 font-weight: bold; 612 margin-top: 20px; 613 border-bottom: 1px solid #8686FF; 614 margin-bottom: 10px; 615 padding-left: 8px; 616 } 617 .louzhu { 618 background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top; 619 padding-right:16px; 620 } 621 .layer{ 622 font-family:STFangsong; 623 font-size:15px; 624 padding-left: 8px; 625 } 626 .feedbackListSubtitle { 627 margin-left: 10px; 628 color: #666; 629 font-size:0.9em; 630 } 631 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active { 632 font-weight:bold; 633 color: #666; 634 font-weight: normal; 635 } 636 .feedbackListSubtitle a:hover { 637 color: #7B68EE; 638 text-decoration: none; 639 } 640 .feedbackManage { 641 width: 160px; 642 text-align: right; 643 float: right; 644 } 645 .feedbackCon { 646 font-weight:bold; 647 border-bottom: 1px solid #ccc; 648 padding: 15px 18px 20px 50px; 649 min-height: 35px; 650 _height: 35px; 651 margin-bottom: 1em; 652 line-height: 1.5em; 653 width:80%; 654 } 655 #divRefreshComments { 656 text-align: right; 657 margin-bottom: 10px; 658 } 659 .commenttb { 660 width: 320px; 661 } 662 .cnblogs_code{ 663 } 664 .comment_actions{ 665 margin-right:30px; 666 font-size:16px; 667 font-family:STFangsong; 668 } 669 .comment_digg{ 670 font-weight:bold; 671 margin-right:10px; 672 font-size:15px; 673 font-family:STXinwei; 674 } 675 .comment_bury{ 676 font-weight:bold; 677 margin-right:10px; 678 font-size:15px; 679 font-family:STXinwei; 680 } 681 /****查看文章页面结束************************ 682 683 /****列表页面开始******************************/ 684 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/ 685 font-size: 110%; 686 font-weight: bold; 687 border-bottom: 1px solid #8686FF; 688 text-align: right; 689 padding-bottom: 3px; 690 padding-right: 10px; 691 } 692 693 .entrylistDescription { 694 color: #666; 695 text-align: right; 696 padding-top: 5px; 697 padding-bottom: 5px; 698 padding-right: 10px; 699 margin-bottom: 10px; 700 } 701 .entrylistItem { 702 min-height: 20px; 703 _height: 20px; 704 margin-bottom: 30px; 705 padding-bottom: 5px; 706 width: 100%; 707 } 708 .entrylistPosttitle { 709 font-size: 110%; 710 font-weight: bold; 711 border-bottom: 1px solid #666; 712 line-height: 1.5em; 713 width: 100%; 714 padding-left: 5px; 715 } 716 .entrylistPosttitle a:hover { 717 text-decoration: none; 718 } 719 .entrylistPostSummary { 720 margin-top: 5px; 721 padding-left: 5px; 722 margin-bottom: 5px; 723 } 724 .entrylistItemPostDesc { 725 padding-left: 50px; 726 text-align: right; 727 color: #666; 728 } 729 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active { 730 color: #666; 731 } 732 .entrylistItemPostDesc a:hover { 733 color: #7B68EE; 734 } 735 .entrylist .postSeparator { 736 clear: both; 737 width: 100%; 738 font-size: 0; 739 line-height: 0; 740 margin: 0; 741 padding: 0; 742 height: 0; 743 border: none; 744 } 745 746 .pager { 747 text-align: right; 748 margin-right: 10px; 749 } 750 .PostList { 751 border-bottom: 1px solid #ccc; 752 clear: both; 753 min-height: 1.5em; 754 _height: 1.5em; 755 padding-top: 10px; 756 padding-left: 5px; 757 padding-right: 5px; 758 margin-bottom: 5px; 759 } 760 .postTitl2 { 761 float: left; 762 font-size:0.9em; 763 color: #666; 764 } 765 .postDesc2 { 766 color: #666; 767 float: right; 768 margin-right: ; 769 font-size:0.9em; 770 } 771 .postText2 { 772 clear: both; 773 774 } 775 .pfl_feedback_area_title { 776 text-align: right; 777 line-height: 1.5em; 778 font-weight: bold; 779 border-bottom: 1px solid #666; 780 margin-bottom: 10px; 781 } 782 .pfl_feedbackItem { 783 border-bottom: 1px solid black; 784 margin-bottom: 20px; 785 } 786 .pfl_feedbacksubtitle { 787 width: 100%; 788 border-bottom: 1px dotted #666; 789 height: 1.5em; 790 } 791 .pfl_feedbackname { 792 float: left; 793 } 794 .pfl_feedbackManage { 795 float: right; 796 } 797 .pfl_feedbackCon { 798 color: black; 799 padding-top: 5px; 800 padding-bottom: 5px; 801 } 802 .pfl_feedbackAnswer { 803 color: #F40; 804 text-indent: 2em; 805 } 806 .tdSentMessage { 807 text-align: right; 808 } 809 .errorMessage { 810 width: 300px; 811 float: left; 812 } 813 814 /****列表页面结束******************************/*/ 815 /****相册页面开始******************************/ 816 .divPhoto { 817 border: 1px solid #ccc; 818 padding: 2px; 819 margin-right: 10px; 820 } 821 822 .thumbDescription { 823 color: #666; 824 text-align: right; 825 padding-top: 5px; 826 padding-bottom: 5px; 827 padding-right: 10px; 828 margin-bottom: 10px; 829 } 830 /****相册页面结束******************************/ 831 832 833 /*****留言页面开始*****************************/ 834 #footer { 835 text-align: center; 836 min-height: 15px; 837 _height: 15px; 838 border-top: 1px solid black; 839 margin-top: 10px; 840 padding-top: 10px; 841 margin-bottom: 10px; 842 } 843 /*留言查看页面的个人信息*/ 844 .personInfo { 845 margin-bottom: 20px; 846 } 847 /*留言分页区域*/ 848 .pages { 849 text-align: right; 850 } 851 /*****留言页面结束*****************************/ 852 /*****第三部分结束*******************************/ 853 854 /************************************************** 855 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如： 856 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面 857 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。 858 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话， 859 并不能保证所有的文章都适合。 860 **************************************************/ 861 /*文章内部常用标签格式*/ 862 .postBody { 863 line-height: 1.5em; 864 } 865 .postBody p,.postCon p{ 866 text-indent: 2em; 867 margin: 0 auto 1em auto; 868 } 869 .postBody h2{ 870 font-size: 150%; 871 margin: 15px auto 2px auto; 872 font-weight:bold; 873 } 874 .postBody h3 { 875 font-size: 120%; 876 margin: 15px auto 2px auto; 877 font-weight:bold; 878 } 879 .postBody h4{ 880 font-size:110%; 881 margin:15px auto 2px auto; 882 font-weight:bold; 883 color:#333; 884 } 885 886 .postBody h5{ 887 font-size:100%; 888 margin:15px auto 2px auto; 889 font-weight:bold; 890 color:#333; 891 } 892 893 .postBody a:link,.postBody a:visited,.postBody a:active{ 894 text-decoration:none; 895 } 896 .postCon a:link,.postCon a:visited,.postCon a:active{ 897 text-decoration:none; 898 } 899 .postBody ul,.postCon ul{ 900 margin-left:2em; 901 } 902 903 .postBody li,.postCon li{ 904 list-style-type:disc; 905 margin-bottom:1em; 906 } 907 908 .postBody blockquote{ 909 background:url('/images/comment.gif') no-repeat 25px 0px; 910 padding:10px 60px 5px 60px; 911 min-height:35px; 912 _height:35px; 913 line-height:1.6em; 914 color:#333; 915 } 916 /*****第四部分结束*******************************/当初我也是拿别人代码当模板来改的，不过现在可能有点面目全非了。 那么现在，我们可以把这份别人的模板改成自己的风格，基本上CSS代码里参数的命名都是按元素的英文命名的，挺好认的，或者你可以把这个参数改改，看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时，你可以寻找一下这个元素在html代码里面的位置（在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素），看一下这个元素的id和class的名字是啥，在CSS代码里找找就行了。 界面的颜色除了有black、white这类设定好的颜色之外，你可以找一个RGB颜色对照表，想要啥就丢啥。 遇到有啥不会调的参数，基本搜一下“CSS+参数名字”就有详细介绍，毕竟这东西网上教程很多。 比方说延迟变换可以用transition-property来做，而文字阴影效果是text-shadow，这些都是我自己在做的时候折腾了好一会的。 Chrome（我不知道其他浏览器能不能）有个好处是你修改了个参数，他会立刻应用变换，这样就可以调到舒心再贴进自定义CSS代码里。 还有就是你最好把CSS代码备份一下，不然要是误删了就GG，博主亲身体验T_T。 这期间你可能需要一些好看的图片什么的，我自己资源是P站找的（Pixiv），一些比较普通的就百度图片吧，然后开个画图，开个Photoshop自己改改就能用了，图床直接用博客园就行了（开个不发布的随笔就能存图了，图片上右键可以获得图片链接地址）。 这时候自己的blog已经比较好看了是不是啊？ ②修改鼠标图案把这个放在第二是我按自己的操作顺序来的。 没啥特别要说的，就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站，这里推荐小白的文件床（http://fq.wc.lt/）或者是sm.ms(https://sm.ms/)，不知道是哪位大神弄的，太良心了。 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;} ③公告栏的设置折腾了一段时间以后应该对html也有了一定的了解，首先在博客园管理的设置页中把JS代码权限申请了，批准挺快的，然后就可以为所欲为了（雾）…… 首先你可以在侧边栏加点计数器，加点flash动画什么的，这些一般是找别人做好的，链过来或者抄过来就行。 要搞js的话建议在网上找个教程看看，看它个把小时就基本能拿来用用了（其实跟c++挺像的，应该说java跟c++比较像吧），以后遇到不会的回去查查就行。 我拿js做的大概就是加了一些小挂件，比方说左上角的西瓜是获取main元素之后把opacity（透明度）调到0就行，结合一下onmouseover、onmouseout什么的就能做出浮动效果，还是很赞的。 尝试着做个推荐按钮，一直做不成，估计是被过滤了。发邮件去问博客园那边也是这是禁止的。 目录我大多数还是参考swm_sxt，做的太良心了，perfect！ 我的公告栏代码： 1 DOCTYPE html> 2 3 4 5 6 7 做题做得心累的时候 8 就看看背景吧 9 想看背景的时候 10 请点击左上角西瓜一枚 11 右上角月亮有彩蛋 12 蒟蒻一枚，有事您Q我～ 13 ECJTU的一个挣扎的ACMer 14 我的QQ在这哦！873284962～ 15 我的微信在这哦！nzf6698【加好友请注明姓名和来源哦，谢谢各位支持^-^】～ 16 喵~允许我卖一个萌~~~~ 17 热爱交友！orz 18 希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦 19 非常乐意互换友链呐，~o( =∩ω∩= )喵~~~~ 20 有事您Q我，我一直在哦~： 21 22 23 24 25 求投食~（点图即可） 26 玩法:拖动小球至任意位置投放，让小球自由落地，每轮五个球，右上角有一个重新开始的按钮，祝欧尼酱能看的舒服，玩的开心，喵~~ 27 28 看看你能得几分，欧尼酱，喵~~ 29 我的访客量统计：Start From 2017.5.29 19:00 30 31 32 33 34 XlchKey="d9zz3e6DHX"; 35 36 37 38 39 40 41 42 43 44 45 46 关于背景音乐之前我有用过的是虾米音乐，其实外观确实很丑，今天看了大佬yji的博客，发现他的音乐播放器挺好看的，问了下才知道有个绚丽彩虹播放器，良心播放器，竟然是一个小姑娘，上初二时写的，我自愧不如，人家初二，我大二都搞不出这个玩意出来QAQ 下面是我的背景音乐的源码(加到/body之前就可以用了) 1 2 XlchKey="d9zz3e6DHX"; 3 4 5 6 7 8 9 10 11 12我现在的页首： 1 DOCTYPE html> 2 3 4 5 6 #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% } 7 8 9 10 11 12 13 14 15 16 17 博客园 18 首页 19 私信博主 20 显示目录 21 隐藏目录 22 管理 23 24 25 function GetRandomNum(Min,Max){ 26 var Range=Max-Min; 27 var Rand=Math.random(); 28 return(Min+Math.round(Rand * Range)); 29 } 30 function ShowTab(){ 31 x=document.getElementById("MagicArray"); 32 if (x.style.width=="200px"){ 33 x.style.width="0px"; 34 x.style.height="0px"; 35 x.style.bottom="100px"; 36 x.style.right="100px"; 37 x.style.transform="rotate(0deg)"; 38 }else{ 39 x.style.width="200px"; 40 x.style.height="200px"; 41 x.style.bottom="0px"; 42 x.style.right="0px"; 43 x.style.transform="rotate(180deg)"; 44 } 45 46 y=document.getElementsByName("Tab"); 47 for (var i=0;iDOCTYPE html> 2 3 4 5 6 #Canvas{ 7 position:fixed; 8 top:0px; 9 left:0px; 10 } 11 12 13 14 15 16 #nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% } 17 18 19 20 21 22 23 24 25 26 27 博客园 28 首页 29 私信博主 30 显示目录 31 隐藏目录 32 管理 33 动画 34 35 36 window.requestAnimFrame= 37 window.requestAnimationFrame|| 38 window.webkitRequestAnimationFrame|| 39 window.mozRequestAnimationFrame|| 40 window.oRequestAnimationFrame|| 41 window.msRequestAnimationFrame|| 42 function(callback){window.setTimeout(callback, 1000/10);}; 43 var W=document.body.scrollWidth,H=document.body.scrollHeight; 44 var ca=document.getElementById("Canvas"),el=ca.getContext("2d"); 45 var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20; 46 var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array(); 47 var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image(); 48 ca.width=W;ca.height=H; 49 img1.src="http://fq.wc.lt//up/1504690030.png"; 50 img2.src="http://fq.wc.lt//up/1504690047.png"; 51 img3.src="http://fq.wc.lt//up/1504690062.png"; 52 img4.src="http://fq.wc.lt//up/1504690077.png"; 53 54 function RandomNum(Min,Max){ 55 var Range=Max-Min; 56 var Rand=Math.random(); 57 return(Min+Math.round(Rand * Range)); 58 } 59 function RandomReal(Min,Max){ 60 return Min+(Max-Min)*Math.random(); 61 } 62 function abs(W){return W |
| CopyRight 2018-2019 实验室设备网 版权所有 |