菜鸡博客开……开……开源了!
程序员文章站
2022-09-14 18:29:55
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家! 不过! 我肯定不会直接给CSS+页首页脚html的,毕竟弄一个一毛一样的博客就真心没意思了。 所以我把自己的代码分了一下类,大家可以根据自己不同的需求copy代码^_^ 补充一下,关于是否把博客开源这件事情我其实做 ......
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!
不过!
我肯定不会直接给css+页首页脚html的,毕竟弄一个一毛一样的博客就真心没意思了。
所以我把自己的代码分了一下类,大家可以根据自己不同的需求copy代码^_^
补充一下,关于是否把博客开源这件事情我其实做过考虑。当时有所顾虑的问题主要是版权,因为我所用的代码99%都不是我自己写的,这样冒然的发出来可能会对原作者不尊重。但是后来发生了很多次令人恼火的事情,因为博客园比较开放,很多“f12玩家”可以不费吹灰之力窃取到别人的劳动成果,这样会对很多人不公平。所以我再三考虑之后,确定把代码开源。
如果您在以下代码中发现了您的不允许公开的原创代码,请私信博主,我一定会及时删除!
css系列
把下面的四块内容拼起来就是我完整的css了,当然里面可能有一些“图片地址需要大家自己填写”
body { cursor: url(图片地址), auto; } a:hover { cursor:url("图片地址"),auto;}#header:before
.diggit { float: left; width: 200px; height: 99px; background: url(图片地址) no-repeat; text-align: center; cursor: pointer; margin-top: 2px; padding-top: 5px; } .buryit { float: right; margin-left: 20px; width: 46px; height: 52px; background: url(图片地址) no-repeat; text-align: center; cursor: pointer; margin-top: 2px; padding-top: 5px; display:none; }
@media (max-width: 601px) { #home { min-width: 0; } #home #header { width: 100%; } #home #header #blogtitle { background-position: left top; } #home #header #navigator { font-size: 15px; /* border-bottom: 1px solid #ededed; */ /* border-top: 1px solid #ededed; */ height: 35px; clear: both; /* margin-top: 25px; */ /* margin: 0px 20px; */ width: 100%; /* float: left; */ background: #222; margin: 0; } #home #header #navigator > ul#navlist { height: 35px; } #home #header #navigator > ul#navlist>li { height: 35px; margin: 0; } #home #header #navigator > ul#navlist>li>a { height: 35px; line-height: 35px; } #home #header #navigator .blogstats { height: 35px; line-height: 35px; } #home #main { position: relative; min-width: 0; margin-top: 250px; bottom: 60px; } #home #main #maincontent { position: relative; float: none; margin: 0; } #home #main #maincontent .forflow { margin: 0; } #home #main #maincontent div.commentform input.author { width: 100px; } #home #main #maincontent div.commentform textarea.comment_textarea { width: 100%; } #home #main #sidebar { display: none; } #home #main .postbody #cnblogs_post_body img { width: 100%; } } @media (min-width: 402px) and (max-width: 601px) { #navigator > ul#navlist { animation: arrowup 10s linear 0 infinite alternate; -webkit-animation: arrowup 10s linear 0 infinite alternate; -moz-animation: arrowup 10s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 25% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 100% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } } } @media (min-width: 302px) and (max-width: 401px) { #navigator > ul#navlist { animation: arrowup 15s linear 0 infinite alternate; -webkit-animation: arrowup 15s linear 0 infinite alternate; -moz-animation: arrowup 15s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 15% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 30% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 45% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 60% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 100% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } } } @media (min-width: 202px) and (max-width: 301px) { #navigator > ul#navlist { animation: arrowup 20s linear 0 infinite alternate; -webkit-animation: arrowup 20s linear 0 infinite alternate; -moz-animation: arrowup 20s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 12% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 24% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 36% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 48% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 60% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 72% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 100% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } } } @media (max-width: 201px) { #navigator > ul#navlist { animation: arrowup 20s linear 0 infinite alternate; -webkit-animation: arrowup 20s linear 0 infinite alternate; -moz-animation: arrowup 20s linear 0 infinite alternate; } @-webkit-keyframes arrowup { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 6% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 12% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } 18% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 24% { transform: translate3d(0, -42px, 0); -webkit-transform: translate3d(0, -42px, 0); -moz-transform: translate3d(0, -42px, 0); } 30% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 36% { transform: translate3d(0, -84px, 0); -webkit-transform: translate3d(0, -84px, 0); -moz-transform: translate3d(0, -84px, 0); } 42% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 48% { transform: translate3d(0, -126px, 0); -webkit-transform: translate3d(0, -126px, 0); -moz-transform: translate3d(0, -126px, 0); } 54% { transform: translate3d(0, -168px, 0); -webkit-transform: translate3d(0, -168px, 0); -moz-transform: translate3d(0, -168px, 0); } 60% { transform: translate3d(0, -168px, 0); -webkit-transform: translate3d(0, -168px, 0); -moz-transform: translate3d(0, -168px, 0); } 66% { transform: translate3d(0, -210px, 0); -webkit-transform: translate3d(0, -210px, 0); -moz-transform: translate3d(0, -210px, 0); } 72% { transform: translate3d(0, -210px, 0); -webkit-transform: translate3d(0, -210px, 0); -moz-transform: translate3d(0, -210px, 0); } 78% { transform: translate3d(0, -252px, 0); -webkit-transform: translate3d(0, -252px, 0); -moz-transform: translate3d(0, -252px, 0); } 84% { transform: translate3d(0, -252px, 0); -webkit-transform: translate3d(0, -252px, 0); -moz-transform: translate3d(0, -252px, 0); } 90% { transform: translate3d(0, -296px, 0); -webkit-transform: translate3d(0, -296px, 0); -moz-transform: translate3d(0, -296px, 0); } 100% { transform: translate3d(0, -296px, 0); -webkit-transform: translate3d(0, -296px, 0); -moz-transform: translate3d(0, -296px, 0); } } }
html { -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; -webkit-text-size-adjust: 100% } #header #lnkbloglogo{ background-image: url(图片地址); border-radius: 100%; width: 180px; height: 180px; border: 5px solid #fff; background-size: contain; transition: transform 0.1s ease; position: absolute; top: 35px; left: calc(50% - 90px); } #navigator { display: none; height: 50px; background: #fff; top:0; position: relative; } @media screen and (max-width: 1120px){ #main { margin: 10px!important; } } .cnblogs_code { background-color: #f5f5f5; font-family: courier new!important; font-size: 12px!important; border: 2px dotted #03a9f4; padding: 5px; overflow: auto; margin: 5px 0; color: #000; transition: 0.5s ease; border-radius: 20px; } /*头像旋转*/ .feedbackcon img:hover { -webkit-transform: rotatez(360deg); -moz-transform: rotatez(360deg); -ms-transform: rotatez(360deg); -o-transform: rotatez(360deg); transform: rotatez(360deg); } .feedbackcon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } @keyframes loading-l { 0% { transform: translatey(40px) } 100% { transform: translatey(0px) } } #main #maincontent { line-height: 1.6; float: left; width: calc(100% - 280px); animation: 0.5s both loading-l; } .content { position: relative; background: #e4f0f8; } .content { position: relative; background: #e4f0f8; } /* 分类 标签 */ #blogpostcategory a::after , #mytag1_dttaglist a::after , #entrytag a::after , .catlisttag a::after { background-color: #fff; border-radius: 50%; content: " "; height: 4px; position: absolute; top: 13px; left: -3px; width: 4px; } #blogpostcategory a:hover::before,#mytag1_dttaglist a:hover::before, #entrytag a:hover::before, .catlisttag a:hover::before { border-right-color: #ff5a4e; } #blogpostcategory a::before, #mytag1_dttaglist a::before, #entrytag a::before, .catlisttag a::before { border-top: 15px solid transparent; border-right: 10px solid #2196f3; border-bottom: 14px solid transparent; content: ""; height: 0px; position: absolute; top: 0px; left: -10px; width: 0px; transition:all 0.2s; } #blogpostcategory a:hover, #mytag1_dttaglist a:hover, #entrytag a:hover, .catlisttag a:hover { background-color: #ff5a4e; } #blogpostcategory a, #mytag1_dttaglist a, #entrytag a, .catlisttag a { background-color: #2196f3; border-radius: 0 3px 3px 0; color: #fff; display: inline-block; font-size: 14px; line-height: 1.2727; margin: 2px 4px 2px 10px; padding: 6px 8px; position: relative; transition:all 0.2s; } #blogpostcategory { margin-right: 5px; padding: 0px 30px 0px; background: url(http://images.cnblogs.com/cnblogs_com/pandaman/653138/o_o_biaoqianfenlei.png) no-repeat left center; color: white; font-size: 0px; } #entrytag { margin-right: 5px; padding: 0px 30px 0px; background: url(http://images.cnblogs.com/cnblogs_com/pandaman/653138/o_o_biaoqianfenlei.png) no-repeat left center; color: white; font-size: 0px; } /* 代码高亮开始,使用了一个叫monokai sublime的黑色主题皮肤,直接拿过来还不行,有一些样式冲突,还要自己稍微改一些地方 monokai sublime style. derived from monokai by noformnocontent http://nn.mit-license.org/ */ pre { /*控制代码不换行*/ white-space: pre; word-wrap: normal; } .cnblogs-markdown .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #23241f !important; color: #fff; white-space: pre; word-break: normal; } .cnblogs-markdown .hljs { font-family: "courier new",sans-serif!important; font-size: 15px!important; line-height: 1.5!important; padding: 5px!important; } .hljs, .hljs-tag, .hljs-subst { color: #f8f8f2; } .hljs-strong, .hljs-emphasis { color: #a8a8a2; } .hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link { color: #ae81ff; } .hljs-code, .hljs-title, .hljs-section, .hljs-selector-class { color: #a6e22e; } .hljs-strong { font-weight: bold; } .hljs-emphasis { font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr { color: #f92672; } .hljs-symbol, .hljs-attribute { color: #66d9ef; } .hljs-params, .hljs-class .hljs-title { color: #f8f8f2; } .hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-variable { color: #e6db74; } .hljs-comment, .hljs-deletion, .hljs-meta { color: #75715e; } /*黑色主题皮肤结束*/ * { margin: 0; padding: 0; background-repeat: no-repeat; font-size: inherit; line-height: inherit; } audio:not([controls]) { display: none } b, strong { font-weight: bolder } button { -webkit-appearance: button; overflow: visible } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } button:-moz-focusring, input:-moz-focusring { outline: 1px dotted buttontext } button, select { text-transform: none } details { display: block } hr { overflow: visible } html { -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; -webkit-text-size-adjust: 100% } h1, h2, h3, h4, h5, h6 { font-family: calibri, "pingfang sc", "hiragino sans gb","microsoft yahei",arial, sans-serif; } .c_ad_block { display: none; } input { -webkit-border-radius: 0 } input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button } input[type="number"] { width: auto } input[type="search"] { -webkit-appearance: textfield } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } main { display: block } pre { overflow: auto } progress { display: inline-block } summary { display: block } svg:not(:root) { overflow: hidden } template { display: none } textarea { overflow: auto } [hidden] { display: none } *, ::before, ::after { box-sizing: inherit } ::before, ::after { text-decoration: inherit; vertical-align: inherit } button, input, select, textarea { font-family: inherit; font-style: inherit; font-weight: inherit } *, ::before, ::after { border-style: solid; border-width: 0; } a, area, button, input, label, select, textarea, [tabindex] { touch-action: manipulation; } .sourcecode>* { font-family: consolas,monaco, ubuntu mono,"source code pro",courier new!important; } svg { fill: currentcolor } [aria-busy="true"] { cursor: progress } [aria-controls] { cursor: pointer } [aria-disabled] { cursor: default } [hidden][aria-hidden="false"] { clip: rect(0 0 0 0); display: inherit; position: absolute } [hidden][aria-hidden="false"]:focus { clip: auto } * { background-repeat: no-repeat; } :root { background-color: #fff; box-sizing: border-box; color: #000; cursor: default; } a { text-decoration:none; color: #2196f3; } audio, canvas, iframe, img, svg, video { vertical-align: middle; border: border: 2px dashed rgba(33, 150, 243, 0.33); } button, input, select, textarea { background-color: transparent; color: inherit } button, [type="button"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="reset"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea { min-height: 1.5em; } code, kbd, pre, samp { font-family: consolas,monaco, monospace,ubuntu mono,"source code pro",courier new!important; } nav ol, nav ul { list-style: none } small { font-size: 75% } table { border-collapse: collapse; border-spacing: 0; } textarea { resize: vertical; } div.commentform textarea { width: 450px; height: 150px; font-size: 13px; border: 1px solid #ccc; } ::-moz-selection { background-color: #b3d4fc; text-shadow: none } ::selection { background-color: #b3d4fc; text-shadow: none } body { top: 0; right: 0; bottom: 0; left: 0; padding: 0; background-color: #eeeeee; text-overflow: ellipsis; white-space: normal; font-family: "helvetica neue", helvetica, "hiragino sans gb","microsoft yahei","source han sans", "pingfang sc",arial,"heiti sc", "wenquanyi micro hei", sans-serif; } #header { background-color: #2d3642; position: relative; width: 100%; height: 400px; background-image:url('http://api.1314yun.cn/random.php'); background-attachment:fixed; background-size: cover; background-repeat: repeat; background-position: center; overflow: hidden; } #header #blogtitle { color: #fff; text-align: center; margin-top: 35px; } #header #blogtitle .headermaintitle { font-size: 3.75em; color: #fff; text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6); } #header #blogtitle h2 { font-size: 1.5rem; text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6); } #header:before { background-image: url(http://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=757394026&src_uin=www.12580sky.com&fid=blog&spec=240); content: " "; position: relative; border-radius: 100px; display: block; width: 180px; height: 180px; border: 5px solid #fff; background-size: contain; margin-left: 50%; margin-bottom: 18px; transform: translate3d(-50%, 20%, 0); } #navigator { display: none; } #main { display: flex; margin: 4%; justify-content: center; } #main #maincontent { margin-right: 2%; width: 58%; color: #333; font-size: 16px; line-height: 1.6; } #main #maincontent .day { position: relative; margin-bottom: 50px; padding: 40px 20px; box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; } #main #maincontent .day .postdesc { padding: 0 110px 0 10px; border-top: 1px solid #dee1e0; color: #bfbfbf; line-height: 3.125rem; } #main #maincontent .daytitle { position: absolute; top: 6px; left: -25px; min-width: 155px; padding: 6px 10px; background: #eb3349; background: -webkit-linear-gradient(to right, #f45c43, #eb3349); background: linear-gradient(to left, #f45c43, #eb3349); box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px 0px; text-align: center; } #main #maincontent .daytitle:before { position: absolute; top: 100%; left: 0; border-color: #af2734 transparent; border-style: solid; border-width: 20px 0 0 25px; content: " "; } #main #maincontent .daytitle a { color: #fff; text-align: center; font-size: 1.125rem; font-family: pingfang sc,microsoft yahei; } #main #maincontent .posttitle { overflow: hidden; margin: 10px auto; padding: 0 2em 0 20px; text-overflow: ellipsis; white-space: nowrap; font-size: 26px; } #main #maincontent .posttitle a{ color:#333; transition: all 0.2s; } #main #maincontent .postcon { border-top: 1px solid #dee1e0; background-color: #f4f4f4; } #main #maincontent .c_b_p_desc { position: relative; overflow: visible!important; padding: 20px; color: #4d4d4d; font-size: 1pc; } #main #maincontent .c_b_p_desc a.c_b_p_desc_readmore { position: absolute; top: 108%; right: 0; width: 75pt; height: 40px; border-radius: 3px; background-color: #00ace4; color: #fff; text-align: center; line-height: 2.5rem; transition: .3s ease background-color; } #main #maincontent .c_b_p_desc a:hover { background-color: #007ea7; color: #eee; } #sidebar { width: 250px; min-width: 0; } #sidebar .catlisttitle { margin-top: 0; padding: 10px 30px; background: #36b3ef; text-align: center; font-size: 1.25rem; color: #fff; } #sidebar .newsitem { overflow: hidden; margin: 0 0 20px; box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; } #sidebar .newsitem #profile_block { padding: 20px; padding-top: 20px; color: #666; word-wrap: break-word; font-size: 1.125rem; } #sidebar .newsitem #profile_block a { color: #666; font-size: 1.125rem; } #sidebarmain #blog-calendar, #sidebarmain .sidebar-block { overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; } #sidebarmain .caltitle{ border-bottom: #36b3ef 1px solid; } #sidebarmain .caltitle td { height: 40px; background-color: #36b3ef; color: #fff; font-size: 22px; } #sidebarmain .caltitle td.calnextprev { padding-left: 15px; padding-right: 15px } #sidebarmain .caltitle td.calnextprev a { color: #fff; } #sidebarmain .caldayheader { height: 32px; color: #fff; background-color: rgb(54, 179, 239); font-size: 18px; } #sidebarmain td { height: 35px; background-color: #fff; } #sidebarmain #widget_my_zzk { display: flex; padding: 9pt; } #sidebarmain #widget_my_zzk input#q { width: 100%; height: 40px; border-radius: 3px 0 0 3px; background-color: #eee; } #sidebarmain input#btnzzk { padding: 10px; height: 40px; border: 0 none; border-radius: 0 3px 3px 0; background-color: #00ace4; color: #fff; cursor: pointer; transition: .3s ease background-color; } #sidebarmain input#btnzzk:hover { background-color: #1f628e; color: #fff; } #sidebarmain #blogcalendar>tbody>tr:nth-child(n+3) td.calothermonthday { color: rgba(0, 0, 0, .2); } .caltodayday u{ color:#fff; } #sidebarmain #blogcalendar>tbody>tr:nth-child(n+3) td.caltodayday { border-radius: 20px; background-color: #03a9f4; color: #fff; } #sidebarmain #blogcalendar>tbody>tr:nth-child(n+3) td>a { color: #00ace4; text-decoration: none; } #blog-sidecolumn ul li { overflow: hidden; width: 100%; border-bottom: 1px dashed #e1e1e1; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem; line-height: 2rem; } #blog-sidecolumn ul li a { color: #666; } #blog-sidecolumn .recent_comment_author { position: relative; margin-bottom: 1pc; color: rgba(0, 0, 0, .6); text-align: right; text-shadow: 2px 2px 1px rgba(0, 0, 0, .3); font-weight: 400; } #blog-sidecolumn .recent_comment_body { position: relative; overflow: visible; padding: 8px; border-top: 1px solid #dee1e0; background-color: #f4f4f4; color: #4d4d4d; white-space: normal; font-size: 0.8rem; } #blog-sidecolumn li>a { transition: .2s ease-out color; } #blog-sidecolumn #recentcommentsblock ul li { list-style: none; } #cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td{ padding: 8px!important; } .topiclistfooter { margin: 0!important; } .topiclistfooter #nav_next_page a { display: inline-block; padding: 15px 20px; width: 75pt; border-radius: 5px; background-color: #b4b4b4; color: #fff; text-align: center; font-size: 1.25rem; transition: .3s ease background-color; } .topiclistfooter #nav_next_page a:hover { background-color: #fb6362; } #footer { height: 200px; background-color: #404a58; color: #fff; text-align: center; font-size: 1.3em; line-height: 12.5rem; display:none } .scrollup { position: fixed; bottom: 120px; right: 50px; z-index: 10; display: block; width: 48px } .scrollup .arrows { height: 48px; width: 48px; float: left; background: url("http://images.cnblogs.com/cnblogs_com/crackpotisback/594328/o_top_up.png") no-repeat left top; background-size: 48px; transition: background 0.5s ease 0s; cursor: pointer } .scrollup .arrows:hover { background-position: left bottom } #maincontent #post_detail .posttitle { margin-top: 0; padding: 10px; /* background: #404a58; */ color: #fff; font-size: 1.875rem; } #maincontent #post_detail .posttitle a { border-bottom: 3px solid #eee; color: #333; text-align: left; font-weight: 700; font-size: 30pt; display: block; -webkit-margin-before: 0.67em; margin-left: 20px; margin-right: 20px; } #maincontent #post_detail .post { overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 0 0, 0 0 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; } #maincontent #post_detail #cnblogs_post_body table{ margin-top:20px; margin-bottom:20px; } #maincontent #post_detail #cnblogs_post_body h1 { margin-top: 20px; border-bottom: 3px solid #eee; color: #333; text-align: left; font-weight: 700; font-size: 32pt; } #maincontent #post_detail #cnblogs_post_body h2 { margin-top: 20px; border-bottom: 1px solid #eee; color: #333; text-align: left; font-weight: 100; font-size: 28pt; } #maincontent #post_detail #cnblogs_post_body h3 { margin-top: 20px; color: #333; text-align: left; font-weight: 600; font-size: 22pt; } #maincontent #post_detail #cnblogs_post_body h4 { margin-top: 20px; color: #333; text-align: left; font-weight: 600; font-size: 16pt; } #maincontent #post_detail #cnblogs_post_body h5{ margin-top: 20px; color: #333; text-align: left; font-weight: 600; font-size: 12pt; } #maincontent #post_detail #cnblogs_post_body h6{ margin-top: 20px; color: #333; text-align: left; font-weight: 600; font-size: 10pt; } #maincontent #post_detail #cnblogs_post_body a:hover{ color:#da6a61 } #maincontent #post_detail #cnblogs_post_body a { color: #2196f3; transition:all 0.2s; } #maincontent #post_detail #cnblogs_post_body li { text-align: left; font-size: 16px; } #maincontent #post_detail #cnblogs_post_body ol, #maincontent #post_detail #cnblogs_post_body ul { padding-top: 10px; } #mysignature { margin-top: 24px; padding: 20px; border-left: 8px solid #2196f3; border-radius: 4px; background-color: #f5f5f5; box-shadow: 0 0 1px #d9d9d9; font-size: 1.25rem; } #blogpostcategory, #entrytag { font-size: 1em; } #blogpostcategory a:hover { background-color: #ff5a4e; } #blogpostcategory a, #entrytag a { padding: 6px; border-radius: 4px; background-color: #03a9f4; color: #fff; transition:all 0.2s; } #entrytag { margin-top: 10px; } #blog_post_info_block { margin-top: 20px; } #green_channel { margin-top: 30px; margin-bottom: 30px; padding: 20px; width: auto!important; border: medium none; border-radius: 2px; background: #f5f5f5 none repeat scroll 0 0; color: #fff; text-align: center; font-weight: 400; font-size: 1rem; } #green_channel a { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: 20px; color: #fff; vertical-align: middle; text-shadow: 0 -1px 1px rgba(0, 0, 0, .25); font-weight: 400; font-size: 1.2em; cursor: pointer; } #author_profile { display: none; background-color: rgba(0, 0, 0, .6); } #post_next_prev{ font-size: 18px; display: inline-block; } #post_next_prev a:nth-of-type(2n){height: 35px;display: inline-block;font-size: 24px;transition:0.5s;-webkit-transition:0.5s;-moz-transition:0.5s;} #post_next_prev a:nth-of-type(2n):before{ position: absolute; width: 30px; content: ""; background: url(http://images.cnitblog.com/blog/708426/201501/082257221093724.png) no-repeat left 11px; height: 35px; display: inline-block; background-size: 24px 24px; overflow: visible; opacity:0; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; } #post_next_prev a:hover { color: #b94a48 !important; text-decoration: none !important; } #post_next_prev a:nth-of-type(2n):hover{ transform:translatex(35px); -webkit-transform:translatex(35px); -moz-transform:translatex(35px); } #post_next_prev a:nth-of-type(2n):hover:before{ transform:translatex(-35px); -webkit-transform:translatex(-35px); -moz-transform:translatex(-35px); opacity:1; } #post_next_prev a.p_n_p_prefix:link{ display:none; } #digg_tips { color: #7e8c8d; font-size: .8em; } #bury_count, #digg_count { color: #ff0404; font-size: 3pc; } #post_detail .postdesc { background-color: hsla(0, 0%, 100%, .4); color: #9fa4a4; text-align: center; font-size: 1em; line-height: 2.8125rem; } #post_detail .postdesc a { color: #9fa4a4; font-size: 1em; } #commentform_title { margin-bottom: 10px; padding: 0; background: transparent none repeat scroll 0 0; color: #7e8c8d; font-size: 1.3125rem; } .commentbox_main { position: relative; margin-top: 20px; border-top: 1px solid #ccc; border-radius: 3px; background-color: #fff; } #comment_form { overflow: hidden; margin: 0 0 20px; padding: 20px; box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; } #comment_form_container p { color: #9fa4a4; } #comment_nav { text-align: right; } #comment_nav a:hover { color: #04477d } #comment_nav a { display: inline-block; margin-top: 1pc; margin-right: 20px; color: #c1c1c1; font-size: .8em; } #cnblogs_post_body img { max-width: 100%!important; border-radius: 5px; box-shadow: 0px 2px 2px rgba(0, 0, 2, .2); } .emoji { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0)!important; } div.commentform input.author { margin-top: 20px; padding: 0 15px; width: 300px; height: 35px; border: 1px solid #ddd; border-radius: 3px; background: transparent none repeat scroll 0 0; color: #9fa4a4; font-size: .875rem; line-height: 2.1875rem; } .commentbox_title_right { float: left; } .commentbox_title { padding-left: 15px; width: 100%; height: 30px; background: #f5f5f5 none repeat scroll 0 0; line-height: 1.875rem; } #tbcommentbody,input[type=text]{padding: 0px 12px;font-size: 14px;line-height: 1.42857143;color: #1497d6;background-color: #fff;border: 1px solid #d6d6d6;border-radius: 3px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;} #tbcommentbody:focus,input[type=text]:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) } #tbcommentbody{ max-width:100%; width: 100%; height: 150px; background:#fff url(http://images.cnitblog.com/blog/708426/201501/082214147965461.png) right bottom no-repeat; padding-top:8px; } #commentbox_opt #btn_comment_submit:hover { background-color: #036e9e } #commentbox_opt #btn_comment_submit { float: right; margin-top: 20px; margin-left: 15px; width: 90pt; height: 37px; border: medium none; border-radius: 3px; background-color: #03a9f4; color: #fff; cursor: pointer; transition: background 0.3s ease; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 1px rgba(0, 0, 0, 0.3) } #commentbox_opt a { float: right; display: inline-block; margin-top: 20px; height: 37px; color: #c1c1c1; font-size: .9375rem; line-height: 2.3125rem; } .feedbackitem { margin-bottom: 20px; /* box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .feedbackmanage { float: right; } .feedbackmanage a { display: inline-block; color: #c1c1c1; font-size: 1em; } .feedbacklistsubtitle { margin-top: 0; padding: 12px 20px; text-align: left; background: #fff; border-radius: 10px 10px 0 0; } .feedbacklistsubtitle a { color: #ffffff; margin-right: 10px; background: #667385; padding-left: 10px!important; padding-right: 10px!important; border-radius: 1000px; } .blog_comment_body { position: relative; padding: 15px 20px; background-color: #fff; border-radius: 0px 0px 10px 10px; box-shadow: 0 0 0 0, 0 0 12px rgba(34, 34, 34, 0.1); } .comment_vote { position: relative; overflow: visible; padding: 4px; border-radius: 0 0 2px 2px!important; /* background-color: #f4f4f4; */ color: #4d4d4d; font-size: 1pc; margin: 10px; /* margin-bottom: 10px; */ } .comment_vote :hover { background-color: #026896 } .comment_vote a { display: inline-block; margin-right: 10px; padding: 5px; border-radius: 3px; background-color: #03a9f4; box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 1px rgba(0, 0, 0, .3); color: #fff; font-size: .8em; transition: .3s ease background-color; } .comment_quote { padding: 10px; border:none; border-left: 10px solid #ececec; background-color:#f6f6f6; } .comment_quote legend{ display:none; } fieldset.comment_quote a { color: #fb6362; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } .gallery, .gallerytitle { font-size: 1.4em; } .gallerytitle { margin-top: 0; padding: 10px 30px; background-color: #404a58; box-shadow: 2px 2px 0 rgba(0, 0, 0, .2); color: #fff; text-align: center; } img#viewpicture1_galleryimage { display: block; max-width: 100%; min-width: 100%; box-shadow: 4px 4px 2px rgba(0, 0, 0, .1); } #viewpicture1_originalimage, #viewpicture1_returnurl { display: inline-block; padding: 1pc; border-radius: 5px; background-color: #fb6362; box-shadow: 0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 1px rgba(0, 0, 0, .3); color: #fff; text-align: center; font-size: .8em; cursor: pointer; transition: background .3s ease 0; } #homepage_top_pager { display: none; } #myposts .pager{ margin-bottom: 50px; } .pager { color: #404a58; font-size: 1pc; line-height: 1.875rem; } .pager a { padding: 10px; border: 0 none; border-radius: 3px; background-color: #00ace4; color: #fff; cursor: pointer; transition: .3s ease background-color; } .pager a:hover { border-radius: 3px; background-color: #017196; color: #fff; } .entrylistposttitle { position: relative; top: 10px; overflow: hidden; margin: 10px auto; padding-left: 20px; border-left: 5px solid #e84c3d; background: #fff none repeat scroll 0 0; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem; } .entrylistposttitle a { color: #000; font-size: 1.5rem; transition: color .3s ease 0; } .entrylistitempostdesc { padding: 0 110px 0 10px; min-height: 50px; border-top: 1px solid #dee1e0; line-height: 3.125rem; } .entrylistitem { margin-bottom: 10px; padding: 10px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } h1.entrylisttitle { padding: 10px; background-color: #404a58; font-size: 1.5rem; } .entrylistdescription, h1.entrylisttitle { box-shadow: 0 1px 2px rgba(0, 0, 0, .2); color: #f5f5f5; } .entrylistdescription { padding: 6px; background-color: rgba(64, 74, 88, .6); font-size: 1.125rem; } .ad_text_commentbox, .c_ad_block { margin: 0; padding: 0; } #ad_under_google { overflow: hidden; height: 0; } #myposts .postlist { border-left-color: #00ace4; border-left-width: 7px; margin-bottom: 20px; padding: 30px 20px; box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #fff; font-size: 25px; overflow: hidden; } .postlist a { color: #3c3c3c; } .postlist span { color: #808080; } #myposts .posttext2{ overflow:hidden; } #ad_under_google, #ad_under_google a, #blog-comments-placeholder .feedback_area_title, #blog-sidecolumn #sidebar_postarchive, #c_ad_block, #catlisttitle, #div-gpt-ad-1320933818841-0, #div-gpt-ad-1320933818841-1, #google_ad_c1, #google_ad_c2, .blogstats, #sidebarmain #widget_my_google, #site_nav_under, #tip-arrow-bottom, #tip-arrow-top, #trans-tooltip, .commentbox_title_left, [hidden], audio:not([controls]), template { } button, hr { overflow: visible; } details, main, summary { display: block; } #navlist a.aheaderxml img, audio, canvas, iframe, img, svg, video { vertical-align: middle; } #main #maincontent .day .postdesc a, .entrylistitempostdesc, .entrylistitempostdesc a { color: #bfbfbf; } #blog-sidecolumn li>a:hover, #main #maincontent .posttitle a:hover, .entrylistposttitle:hover a { color: #00abff; } #blog-sidecolumn ul, #maincontent #post_detail .postbody { padding: 30px 30px; } #comment_nav, .topiclistfooter #nav_next_page { text-align: right; } #ad_t2, #ad_under_post_holder, #blog_news_kb, #comment_nav, #google_ad_c2, #site_nav_under, #under_post_kb, #under_post_news, blog_news_kb, google_ad_c2 { display: none!important; } blockquote { border: 0px; border-left: 10px solid #ececec; border-radius: 3px; background-color: #f6f6f6; } @media screen and (max-width:768px) { #sidebar { } #navigator { background-color: #253444; box-shadow: none; } #main #maincontent { margin: 0; width: 100%; } #main { margin: 0; } #topics { margin-left: 0!important; } .cnblogs_highlighter { max-width: 100%!important; } #blog-sidecolumn ul, #maincontent #post_detail .postbody { padding: 10px 10px; } #main #maincontent .daytitle { } #maincontent #post_detail .post { border-radius: 0px; } #main #maincontent .day { margin-bottom: 0; } #main #maincontent .day:hover { box-shadow: none; } #blogtitle h1 { margin-bottom: 5%; } #home div#imgbar { display: none!important; } .topiclistfooter #nav_next_page a { width: 100%; border-radius: 0px; background-color: #00ace4; transition: .3s ease background-color; } #customfooter ul li { width: 100%; margin-left: 0!important; margin-bottom: 25px!important; } } .back-top.attached>a { box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3); opacity: 1; } .back-top>a { position: fixed; right: 2%; bottom: 30px; z-index: 1030; display: block; width: 60px; height: 60px; border-radius: 100%; background-color: rgba(0, 0, 0, .2); text-align: center; opacity: 0; transition: all .5s; } #customfooter { /* width: 100%; */ /* height: 270px; */ padding: 36px 0; background-color: #292929; overflow: hidden; text-align: center; } #customfooter .footer-title { font-size: 34px; color: #fff; line-height: 1; margin-bottom: 52px; font-weight: 600; } #customfooter ul { display: inline-block; list-style: none; } #customfooter ul li { float: left; margin: 0 40px; } #customfooter ul a { color: #c8c8c8; font-size: 24px; text-decoration: none; } #customfooter ul a:hover, #customfooter ul a:active { color: #fff; } #copyright { font-size: 14px; color: #707070; margin-top: 56px; } a.digg_gray:hover { display:none; color: #776a6a; text-decoration: underline; } pre { /*控制代码不换行*/ white-space: pre; word-wrap: normal; font-family: consolas,monaco, monospace,ubuntu mono,"source code pro",courier new!important; } .cnblogs-markdown .hljs { display: block; overflow-x: auto; white-space: pre; font-family: consolas,monaco, monospace,ubuntu mono,"source code pro",courier new!important; word-break: normal; } .cnblogs-markdown code { font-family: consolas,monaco, monospace,ubuntu mono,"source code pro",courier new!important; } .emoji { display: inline-block; margin-bottom: .25em; width: 32px; height: 32px; background-size: contain; } .emoji2{ display: inline-block; margin-bottom: .25em; width: 32px; height: 32px; background-size: contain; border-radius: 0px!important; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0)!important; } .mathjax_display img { border-radius: 0px!important; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0)!important; } .mathjax{outline:0;} /*标题2*/ #cnblogs_post_body h2 { color: #fff; padding-left: 15px; background-color: #84d0f3 !important; text-shadow: 2px 2px 3px #222222; font-family: "微软雅黑" , "宋体" , "黑体" ,arial; margin-bottom: 5px; } /*标题3*/ #cnblogs_post_body h3 { color: #6fa833; border-left: 13px solid #84c6ff; padding: 5px; background-color: #f5f5f5; } #sidebar_postcategory li{ overflow: hidden; width: auto!important; border-bottom:none!important; text-overflow: ellipsis; white-space: normal!important; font-size: 15px!important; line-height: 1.5rem!important; display: inline-block; } #sidebar_postcategory li a:hover{ background-color:#4caf50; } #sidebar_postcategory li a{ background-color: #607d8b; color:#fff!important; padding: 2px 7px; line-height: 1.5em; display: inline-block; text-decoration: none; transition:all 0.2s!important; border-radius: 3px; } #sidebar_postcategory li{ overflow: hidden; width: auto!important; border-bottom:none!important; text-overflow: ellipsis; white-space: normal!important; font-size: 12px!important; line-height: 1.5rem!important; display: inline-block; } #sidebar_postcategory li a:hover{ background-color:#4caf50; } #sidebar_postcategory li a{ background-color: #607d8b; color:#fff!important; padding: 2px 7px; line-height: 1.5em; display: inline-block; text-decoration: none; transition:all 0.2s!important; border-radius: 3px; }
侧边栏
<script> // 浏览器标题切换 var origintitile = document.title; // 保存之前页面标题 var titletime; document.addeventlistener('visibilitychange', function(){ if (document.hidden){ document.title ='你不要我了吗?qwq'; cleartimeout(titletime); }else{ document.title = '~(o°ω°o) '; titletime = settimeout(function() { document.title = origintitile; }, 1000); // 2秒后恢复原标题 } }); </script>
<!--富强*点击特效--> <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; var b_idx = 0; /* 文字和颜色数组 */ var a = new array("富强", "*", "文明", "%%%%%%%%%%%%%", "*", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var b = new array("#ff0000","#ff7f00"," #ffff00","#00ff00","#00ffff","#0000ff","#8b00ff","#ff0000","#ff7f00"," #ffff00","#00ff00","#00ffff","#0000ff","#8b00ff"); jquery(document).ready(function($) { $("body").click(function(e) { var $i = $("<span/>").text(a[a_idx]); a_idx=parseint(12*math.random()); //文字随机数 b_idx=parseint(14*math.random()); //颜色随机数 var x = e.pagex, y = e.pagey; $i.css({ "z-index": 999, "font-size":"1.3em", //字体大小 "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": b[b_idx] }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> <!--富强*点击特效-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes"> <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:343716061:41 &r=0.30709030851721764" alt="欢迎与我联系" title="欢迎与我联系"> </a>
<div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3213826&c=9641791" alt="amazingcounters.com"></a></div>
<font color="#ff0000">一</font><font color="#df0020">言</font><font color="#bf0040">(</font><font color="#9f0060">ヒ</font><font color="#7f0080">ト</font><font color="#5f00a0">コ</font><font color="#3f00c0">ト</font><font color="#1f00e0">)</font> <script type="text/javascript" src="https://api.i-meto.com/hitokoto?encode=js"></script> <div id="hitokoto"><script>hitokoto()</script></div> <font color="#db0024">q</font><font color="#c90036">q</font><font color="#b70048">:</font><font color="#a5005a">7</font><font color="#93006c">5</font><font color="#81007e">7</font><font color="#6f0090">3</font><font color="#5d00a2">9</font><font color="#4b00b4">4</font><font color="#3900c6">0</font><font color="#2700d8">2</font><font color="#1500ea">6</font>
最上面的天气预报大家可以百度“心知天气”,获取自己的html代码
页首html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>evanyou blog 彩带</title> <style> canvas { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } </style> </head> <body> <canvas width="2560" height="7292"></canvas> <script> document.addeventlistener('touchmove', function(e) { e.preventdefault() }) var c = document.getelementsbytagname('canvas')[0], x = c.getcontext('2d'), pr = window.devicepixelratio || 1, w = window.innerwidth, h = window.innerheight, f = 90, q, m = math, r = 0, u = m.pi * 2, v = m.cos, z = m.random c.width = w * pr c.height = h * pr x.scale(pr, pr) x.globalalpha = 0.6 function i() { x.clearrect(0, 0, w, h) q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }] while (q[1].x < w + f) d(q[0], q[1]) } function d(i, j) { x.beginpath() x.moveto(i.x, i.y) x.lineto(j.x, j.y) var k = j.x + (z() * 2 - 0.25) * f, n = y(j.y) x.lineto(k, n) x.closepath() r -= u / -50 x.fillstyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).tostring(16) x.fill() q[0] = q[1] q[1] = { x: k, y: n } } function y(p) { var t = p + (z() * 2 - 1.1) * f return (t > h || t < 0) ? y(p) : t } document.onclick = i document.ontouchstart = i i() </script> </body> </html>
<!doctype html> <style type="text/css"> * { margin: 0; padding: 0; } /*防止body的高度为100px,加1px padding实现了把body撑开*/ body{ padding:0px; } .test { width: 0px; height: 0px; background-color: #000; margin: 0px 0 0px 0px; } </style> </head> <body> <div class="test"></div> <script> ;(function (w,d) { var domdiv = d.createelement('div'); //修改domdiv的行内样式 domdiv.style.csstext = 'position: fixed; top: 0; left: 0; width: 0; height: 7px;'+'box-shadow: 0 0 3px #999; background: -webkit-linear-gradient(left, red , blue );; z-index: 999999; -webkit-transition:width .3s linear;' //append是jquery的方法,dom对象的是appendchild(); d.body.appendchild(domdiv); //domh:可视区域的高度 var domh = w.innerheight||d.documentelement.clientheight||d.body.clientheight; /** * [通过给window添加scroll事件实现了监控的作用。] * @param {[type]} ){ var divsw [description] * @param {[type]} false [冒泡阶段] * @return {[type]} [description] * pageyoffset:滚到了视口顶部的高度。 * document.body.offsetheight:body的高度 */ w.addeventlistener('scroll',function(){ var divsw = domdiv.style.width = math.round(pageyoffset/(d.body.offsetheight-domh)*100)+'%'; /*if(parseint(divsw,10)>50){ domdiv.style.backgroundcolor = '#00f'; }else{ domdiv.style.backgroundcolor = '#f00808'; }*/ },false); })(window,document); </script> <!--pageendhtml block end--> </body> </html> <script type="text/javascript"> //window.console&&console.log("去除google广告!避免浏览器状态栏一直显示加载"); var canshowadsense=function(){return !!0}; //settimeout(function(){ //$("iframe[id^=google],iframe[src*=google]").remove();},2000); </script> <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/zwfymqz/shcoreemacs.css"/> <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/zwfymqz/shthemeemacs.css"/> <link href="https://files.cnblogs.com/files/widerg/nav.css" rel="stylesheet"></link> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link> <script src="https://cdn.bootcss.com/animejs/2.0.2/anime.min.js"></script> <script src="https://files.cnblogs.com/files/widerg/utils.js?version=1.3"></script> <script src="https://files.cnblogs.com/files/widerg/fireworks.js?version=1.3"></script> <script src="https://files.cnblogs.com/files/zwfymqz/modernizr.custom.js"></script> <script src="https://files.cnblogs.com/files/zwfymqz/dlmenu.js"></script> <script src="https://cdn.bootcss.com/emojify.js/1.1.0/js/emojify.min.js"></script> <div id="dl-menu" class="dl-menuwrapper"> <button class="dl-trigge
赞 (0)
打赏
微信扫一扫
相关文章:
-
-
一、列表 列表与数组相似,定义一个列表 a=[1,2,3,4,5] 1.基本操作 这里添加一个需要注意的地方: 在修改中,如果选定要修改的... [阅读全文]
-
1 # -*- coding: utf-8 -*- 2 import urllib 3 import urllib2 4 import json 5... [阅读全文]
-
Python作为交互式编程方式,通过Python解释器的交互模式来编写代码,在linux上只需输入Python即可启动交互式编程,在windows使... [阅读全文]
-
【前提】 LAMP环境搭建完成且基本配置完成 本次LAMP环境使用的是源码包安装,如何搭建LAMP环境会在后面总结。 远程工具为:SCRT 环境:V... [阅读全文]
-
微信支付回调验证签名:一定要验证签名,可能不造成伪造数据,或者数据库造到灌水; ... [阅读全文]
-
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
上一篇: python学习之基础语法
下一篇: 前天感冒了
发表评论