首页 > 代码库 > cnBlogs模仿苹果官网皮肤

cnBlogs模仿苹果官网皮肤

cnBlogs博客园自定义皮肤,模仿对象是苹果官网。

内容基本都是苹果官网扒下来的CSS加以改造,做成了现在的样子。

但是因为cnBlogs自己的标签排序有些不太称手,所以改的有些蹩脚。

还有就是博客园禁用了JS,所以苹果官网上酷炫的效果就没法模仿出来了。

该工程目前正在进行阶段,不间断更新,当前更新的效果就是我博客的看上去的样子。

目前还没有进行过优化,所以冗余很多,欢迎各位看到的大大帮我指正。

CSS代码如下,其他部分还没有做。

  1 * { background-color: transparent; }  2 article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block; }  3   4 html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, abbr, article, aside, command, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time { margin: 0; padding: 0; }  5   6 div { display: block; }  7 nav[Attributes Style] { -webkit-locale: zh-CN; }  8   9 ul { list-style: none outside; } 10  11 li {  12 display: list-item;  13 text-align: -webkit-match-parent;  14 } 15  16 ul, menu, dir {  17 display: block;  18 list-style-type: disc;  19 -webkit-margin-before: 1em;  20 -webkit-margin-after: 1em;  21 -webkit-margin-start: 0px;  22 -webkit-margin-end: 0px;  23 /*-webkit-padding-start: 40px; */ 24 } 25  26 a { color: #08c; } 27  28 a:-webkit-any-link { cursor: auto; } 29  30 a:link, a:visited, a:active { text-decoration: none; } 31  32 input, textarea, keygen, select, button { 33 margin: 0em; 34 font: -webkit-small-control; 35 color: initial; 36 letter-spacing: normal; 37 word-spacing: normal; 38 text-transform: none; 39 text-indent: 0px; 40 text-shadow: none; 41 display: inline-block; 42 text-align: start; 43 } 44 element.style { 45 } 46 #globalheader .gh-tab-search.enhance.active .gh-search-input-wrapper .gh-search-input { 47 cursor: text; 48 color: #333; 49 font-size: 0.88889em; 50 line-height: 18px; 51 } 52 #globalheader .gh-search-input-wrapper .gh-search-input { 53 margin-top: 0; 54 width: 100%; 55 height: 32px; 56 border: none; 57 box-shadow: none; 58 font-size: 0; 59 line-height: 0; 60 cursor: pointer; 61 } 62 #globalheader button, #globalheader input { 63 padding: 0; 64 margin: 0; 65 border: 0; 66 background-color: transparent; 67 -webkit-tap-highlight-color: transparent; 68 } 69 #globalheader ul, #globalheader ol, #globalheader li, #globalheader dl, #globalheader dt, #globalheader dd, #globalheader h1, #globalheader h2, #globalheader h3, #globalheader h4, #globalheader h5, #globalheader h6, #globalheader p, #globalheader figure, #globalheader pre, #globalheader abbr, #globalheader form, #globalheader fieldset, #globalheader input, #globalheader legend { 70 margin: 0; 71 padding: 0; 72 } 73 html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, abbr, article, aside, command, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time { 74 margin: 0; 75 padding: 0; 76 } 77  78 user agent stylesheetinput:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"] { 79 padding: 1px 0px; 80 } 81  82 user agent stylesheetinput, input[type="password"], input[type="search"] { 83 -webkit-appearance: textfield; 84 padding: 1px; 85 background-color: white; 86 border: 2px inset; 87 border-image-source: initial; 88 border-image-slice: initial; 89 border-image-width: initial; 90 border-image-outset: initial; 91 border-image-repeat: initial; 92 -webkit-rtl-ordering: logical; 93 -webkit-user-select: text; 94 cursor: auto; 95 } 96  97 user agent stylesheetinput, textarea, keygen, select, button { 98 margin: 0em; 99 font: -webkit-small-control;100 color: initial;101 letter-spacing: normal;102 word-spacing: normal;103 text-transform: none;104 text-indent: 0px;105 text-shadow: none;106 display: inline-block;107 text-align: start;108 }109 110 user agent stylesheetinput, textarea, keygen, select, button, meter, progress {111 -webkit-writing-mode: horizontal-tb;112 }113 114 body { 115 display: block; 116 font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", "Microsoft Yahei", "文泉驿微米黑", "ubuntu", Helvetica, Arial, Verdana, sans-serif; 117 position: static; 118 z-index: 1; 119 width: 100%; 120 min-height: 100%; 121 min-width: 1024px; 122 background: #fff;123 color: #333; 124 /*-webkit-font-smoothing: antialiased; */125 -webkit-font-smoothing: subpixel-antialiased; }126 127 #main #main > *:nth-child(n+2), #header, #footer { opacity: 1; }128 129 #main > *:nth-child(3), #header { transition: opacity 0.5s ease 1.1s; }130 131 #header { 132 position: relative;133 z-index: 9999; 134 min-width: 1010px; 135 height: 2.55556em; 136 margin: 0 auto 1em; 137 background: #444; 138 background: rgba(0,0,0,0.6); 139 font-size: 18px; }140 141 #header #navList { 142 position: relative;143 z-index: 1; 144 width: 1000px; 145 height: 2.55556em; 146 margin-left: -10px; 147 margin-right: -10px; 148 cursor: default; 149 text-align: justify; 150 -webkit-user-select: none; 151 -moz-user-select: none; 152 -ms-user-select: none; }153 154 #header ul, #header li, #header p, #header h4, #header h5 {155 font-size: 1em;156 font-weight: normal;157 font-style: normal;158 line-height: 1;159 }160 161 #header ul, #header ol, #header li, #header dl, #header dt, #header dd, #header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header p, #header figure, #header pre, #header abbr, #header form, #header fieldset, #header input, #header legend { margin: 0; padding: 0; }162 163 #header ul, #header li, #header p, #header h4, #header h5 {164 font-size: 1em;165 font-weight: normal;166 font-style: normal;167 line-height: 1;168 }169 170 #header #navList:after {171 content: ‘‘; 172 width: 100%; 173 display: inline-block; 174 font-size: 0; 175 line-height: 0; 176 }177 178 #header #navList li { 179 margin: 0;180 list-style-type: none;181 height: 2.55556em;182 vertical-align: top;183 display: inline-block;184 }185 186 #header .menu { 187 position: relative; 188 display: block; 189 opacity: 1;190 /*height: 2.55556em; */191 padding: 0 10px; 192 background-repeat: no-repeat; 193 /*background-position: 50% 50%; 194 background-size: auto 1.11111em; */195 outline-offset: -0.22222em; 196 -webkit-tap-highlight-color: transparent; 197 transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); 198 }199 200 #header .menu:hover {201 opacity: 0.5; 202 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 203 filter: alpha(opacity=50); 204 }205 206 #header #navList .menu { 207 color: #FFFFFF; 208 /*width: 3.38889em;*/209 /*background-image: url("../images/lang/zh-CN/tab_store.svg");*/210 }211 212 #main { 213 zoom: 1; 214 width: 980px; 215 margin: 0 auto; 216 position: relative; 217 background: #ffffff url(http://images.apple.com/support/assets/images/layout/psp/icons/bg_box.png);218 _background: #fff;219 background-size: 984px 10px;220 -webkit-border-radius: 5px;221 -moz-border-radius: 5px;222 border-radius: 5px;223 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);224 -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);225 box-shadow: 0 1px 3px rgba(0,0,0,.35);226 min-height: 400px;227 border: 1px solid;228 border-color: #e5e5e5 #dbdbdb #d2d2d2;229 position: relative;230 color: #333;231 }232 233 #main:after { 234 content: "."; 235 display: block; 236 height: 0; 237 clear: both; 238 visibility: hidden; }239 240 #main #sideBar {241 position: relative;242 float: left;243 width: 224px;244 margin-left: 0;245 margin-right: -3px;246 z-index: 3;247 padding: 15px 10px 10px;248 }249 250 .catListLink { 251 position: relative;252 float: left;253 width: 224px;254 margin-left: 0;255 margin-right: -3px;256 z-index: 3;257 }258 259 .catListLink ul { 260 margin: 0 -10px; 261 list-style-type: none; 262 }263 264 .catListLink ul li { padding: 4px 10px; }265 266 .catListLink ul li:hover { 267 list-style-type: none outside; 268 background-color: #4CA1FF !important;269 position: relative;270 }271 272 .catListLink ul li:hover a {273 color: #fff;274 cursor: default;275 }276 277 .catListLink ul li a {278 display: block;279 position: relative;280 padding: 6px 0 6px 49px;281 text-decoration: none;282 color: #8c8c8c;283 -webkit-transition: color 0.2s ease-in-out;284 -moz-transition: color 0.3s ease-in-out;285 background-size: 15px 14px;286 }287 288 .div_my_zzk {289 display: block;290 height: 2em;291 /*position: absolute;*/292 z-index: 4;293 /*opacity: 0;*/294 /*border:1px solid #444;*/295 box-shadow:0px 0px 1px #444;296 border-radius: 0 4px 4px 0;297 background: #fff;298 /*content: ‘‘;*/299 /*-webkit-transition: opacity 0s linear 1s;*/300 /*transition: opacity 0s linear 1s;*/301 }302 303 .div_my_zzk .input_my_zzk { 304 cursor: text;305 color: #333;306 padding-left: 0.3em;307 padding-right: 0.3em;308 font-size: 0.88889em;309 line-height: 18px;310 /*width: 10em;*/311 height: 1.77778em;312 border: none;313 box-shadow: none;314 background-color: transparent;315 -webkit-tap-highlight-color: transparent;316 -webkit-appearance: textfield;317 -webkit-rtl-ordering: logical;318 -webkit-user-select: text;319 outline: none;320 }321 322 /***定制CSS***/323 #blogTitle { display: none; }324 325 #MyLinks1_HomeLink { 326 /*width: 1.11111em; */327 width: 20px; 328 height: 46px; 329 font-size: 0px; 330 background-position: 50% 40%; 331 background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjE5cHgiIGhlaWdodD0iMjNweCIgdmlld0JveD0iMCAwIDE5IDIzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOSAyMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE3Ljk3NywxNi4zNzJjLTAuMTExLDAuMzM0LTAuMjI5LDAuNjUyLTAuMzU0LDAuOTU5Yy0wLjMwNSwwLjcyMi0wLjY2NiwxLjM4OC0xLjA4MiwxLjk5OA0KCQljLTAuNTcsMC44MzQtMS4wMzUsMS40MDktMS4zOTYsMS43MjljLTAuNTU3LDAuNTI2LTEuMTUyLDAuNzk4LTEuNzkxLDAuODEyYy0wLjQ1OSwwLTEuMDEtMC4xMzQtMS42NTYtMC40MDQNCgkJYy0wLjY0Ni0wLjI3MS0xLjIzOC0wLjQwNi0xLjc4MS0wLjQwNmMtMC41NjksMC0xLjE4MSwwLjEzNi0xLjgzMywwLjQwNnMtMS4xOCwwLjQxNC0xLjU4MiwwLjQyNw0KCQljLTAuNjEyLDAuMDI4LTEuMjIzLTAuMjUtMS44MzMtMC44MzNjLTAuMzg5LTAuMzQ4LTAuODc1LTAuOTQ0LTEuNDU4LTEuNzkyYy0wLjYyNS0wLjkwMi0xLjEzOS0xLjk1LTEuNTQyLTMuMTQ2DQoJCWMtMC40MjktMS4yOTEtMC42NDUtMi41NDEtMC42NDUtMy43NDhjMC0xLjM4OSwwLjI5Mi0yLjU4MywwLjg3NS0zLjU4M2MwLjQ1OC0wLjgwNSwxLjA2OS0xLjQ0LDEuODMzLTEuOTA2DQoJCWMwLjc2NC0wLjQ2NiwxLjU5LTAuNzA0LDIuNDc5LTAuNzE4YzAuNDg2LDAsMS4xMjUsMC4xNTMsMS45MTYsMC40NThzMS4yOTcsMC40NTksMS41MiwwLjQ1OWMwLjE2NywwLDAuNzI5LTAuMTgxLDEuNjg4LTAuNTQyDQoJCWMwLjktMC4zMzQsMS42NjYtMC40NzIsMi4yOTEtMC40MTdjMS42OTMsMC4xNCwyLjk2NSwwLjgyNiwzLjgxMSwyLjA2MmMtMS41MTQsMC45NDQtMi4yNjIsMi4yNjMtMi4yNDgsMy45NTcNCgkJYzAuMDE0LDEuMzE4LDAuNDc5LDIuNDE3LDEuMzk2LDMuMjkxQzE2Ljk5OCwxNS44MzcsMTcuNDYzLDE2LjE1LDE3Ljk3NywxNi4zNzJ6IE0xMy42NDUsMS4xMDUNCgkJYzAuMDE0LDAuMTM5LDAuMDIxLDAuMjc4LDAuMDIxLDAuNDE3YzAsMS4wNDItMC4zNjksMi4wMTQtMS4xMDQsMi45MTVjLTAuODg5LDEuMDctMS45MTgsMS41NTYtMy4wODMsMS40NTkNCgkJQzkuNDY1LDUuNzcxLDkuNDU4LDUuNjM5LDkuNDU4LDUuNTAxYzAtMSwwLjM3Ni0xLjkzOCwxLjEyNi0yLjgxMmMwLjM3NS0wLjQ0MywwLjg1LTAuODEyLDEuNDI4LTEuMTA0DQoJCUMxMi41ODYsMS4yOTMsMTMuMTMxLDEuMTMzLDEzLjY0NSwxLjEwNXoiLz4NCjwvc3ZnPg0K"); 332 background-size: 50% 50%;333 /*background-size: 1.05556em 1.27778em; */}334 335 #header #navList li:first-child { 336 width: 40px; 337 }338 339 #header #navList li:nth-child(n+2) { 340 font-size: 15px; 341 text-align: center; 342 height: 3.11111em;343 }344 345 #header #navList li:nth-child(n+2) .menu { 346 width: 3.38889em;347 height: 3.3em;348 line-height: 3.33333em;349 }350 351 #header #navigator { width: 980px; margin: 0 auto; }352 353 #blog-calendar{ width: 0; height: 0; overflow: hidden; position: absolute; left: 0; top: 0;}354 355 .catListLink ul li:nth-child(1) {356 background: url(http://images.apple.com/support/assets/images/layout/psp/nav/nav_icon_welcome_appleid.png);357 background-position: 1.6em 0.4em; 358 background-size: 2.3em 2.3em;359 background-repeat: no-repeat;360 }361 362 .catListLink ul li:nth-child(2) {363 background: url(http://images.apple.com/support/assets/images/layout/psp/nav/nav_icon_basics.png);364 background-position: 1.6em 0.4em; 365 background-size: 2.3em 2.3em;366 background-repeat: no-repeat;367 }368 369 .catListLink ul li:nth-child(3) {370 background: url(http://images.apple.com/support/assets/images/shared/psp/nav/appleid/nav_icon_multipleaccount.png);371 background-position: 1.6em 0.4em; 372 background-size: 2.3em 2.3em;373 background-repeat: no-repeat;374 }375 376 .catListLink ul li:nth-child(4) {377 background: url(http://images.apple.com/support/assets/images/shared/psp/nav/appleid/nav_icon_manageaccount.png);378 background-position: 1.6em 0.4em; 379 background-size: 2.3em 2.3em;380 background-repeat: no-repeat;381 }382 383 .catListLink ul li:nth-child(5) {384 background: url(http://images.apple.com/support/assets/images/shared/psp/nav/nav_icon_contact.png);385 background-position: 1.6em 0.4em; 386 background-size: 2.3em 2.3em;387 background-repeat: no-repeat;388 }389 390 .catListLink ul li:nth-child(6) {391 background: url(http://images.apple.com/support/assets/images/layout/psp/nav/nav_icon_password.png);392 background-position: 1.6em 0.4em; 393 background-size: 2.3em 2.3em;394 background-repeat: no-repeat;395 }396 397 input#btnZzk {398 width: 24px;399 height: 24px;400 border: 0;401 font-size: 0;402 background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjE5cHgiIGhlaWdodD0iMTlweCIgdmlld0JveD0iMCAwIDE5IDE5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOSAxOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjNzc3Nzc3IiBkPSJNMTcuNjMyLDE2Ljk1NWwtNC43NjEtNC43NjJjMS4xMDktMS4xODgsMS43OTUtMi43NzYsMS43OTUtNC41MjdjMC0zLjY2Ny0yLjk4Mi02LjY0OC02LjY0OS02LjY0OA0KCWMtMy42NjcsMC02LjY0OSwyLjk4MS02LjY0OSw2LjY0N2MwLDMuNjY3LDIuOTgyLDYuNjQ3LDYuNjQ5LDYuNjQ3YzEuMzkxLDAsMi42ODItMC40MzQsMy43NS0xLjE2NGw0LjgzNCw0LjgzNEwxNy42MzIsMTYuOTU1eg0KCSBNMi44MjQsNy42NjZjMC0yLjg2MiwyLjMzLTUuMTkxLDUuMTkyLTUuMTkxYzIuODY0LDAsNS4xOTIsMi4zMjksNS4xOTIsNS4xOTFjMCwyLjg2MS0yLjMyOCw1LjE5MS01LjE5Miw1LjE5MQ0KCUM1LjE1NCwxMi44NTUsMi44MjQsMTAuNTI3LDIuODI0LDcuNjY2eiIvPg0KPC9zdmc+DQo=);403 background-repeat: no-repeat;404 background-size: 65% 65%;405 background-position: center;406 }407 408 input.btn_my_zzk {409 width: 24px;410 height: 24px;411 border: 0;412 font-size: 0;413 background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cmVjdCB4PSIyIiB5PSIzLjg3MiIgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjIyLjE0NCIvPgo8dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDEuNTM2MSAyMS4zNjEzKSIgZmlsbD0iIzQ0NDQ0NCIgZm9udC1mYW1pbHk9IidGZWxpeFRpdGxpbmdNVCciIGZvbnQtc2l6ZT0iMjYuNCI+RzwvdGV4dD4KPC9zdmc+);414 background-repeat: no-repeat;415 background-size: 65% 65%;416 background-position: center;417 }418 419 #blog-sidecolumn { height: 415px; }420 421 .catListLink { padding-bottom: 10px; border-bottom: 1px solid #ccc; }422 .catListTitle { display: none; }423 .newsItem { width: 224px; position: absolute; bottom: 90px; padding-bottom: 10px; color: #8c8c8c; border-bottom: 1px solid #ccc; }424 .mySearch { width: 224px; position: absolute; bottom: 10px; }425 426 #profile_block { margin-left: 10px; }427 428 .input_my_zzk { width: 15.66666em; }429 430 #widget_my_google { margin-top: 14px; }431 /*************/
View Code

 

cnBlogs模仿苹果官网皮肤