cnBlogs模仿苹果官网皮肤

  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 /*************/