放个总体图
我感觉还不错 个人喜欢陈粒,所以 背景有点张扬,不要见怪啊:)
我很久就想设计了,只不过无从下手,机缘巧合之下,看见了洪卫大佬的帖子, 此帖--> https://www.cnblogs.com/shwee/p/9060226.html
坚定了我要自己设计一下我的博客,所以 我来了
这个帖子,就是为了纪念了下,顺便给博友们,看看,当然,这里也有许多问题
我用了红卫大佬的模板,稍加改动了一点点
(比如爱心,比如前面ui 大部分都是用了她的,想要自己改的话,你可以去他的帖子上拿完整版的,我这个,把很多东西都删了,做简单版的所以,你拿着用,可以,改的话,建议用红卫大佬的)
1 #header{display:none;} /* 将默认的导航头屏蔽掉，这样才能把自己的导航栏加上去 */ 2 /*溢出来的图片*/ 3 #cnblogs_post_body img{ width:100%;} 4 5 #nav_next_page{text-align:center;} 6 *{ color:#000; list-style:none; margin:0px; padding:0px;} 7 p.date{ width:96%; font-size:30px; height:40px; font-weight:bold; text-align:center; border:2px solid #dcd9d9; border-bottom:0px; 8 border-radius:7px 7px 0px 0px; margin:20px auto -4px auto;} 9 p.date a{ text-decoration:none;} 10 div.post { width:96%; border:2px solid #dcd9d9; border-top:0px;margin:0px auto 10px auto; border-radius:0px 0px 7px 7px;} 11 div.post h2{ padding-top:10px; } 12 div.post h2 a{ margin-left:24px; text-decoration:none;} 13 div.post h2 a:hover { color:#e5d999; } 14 div.postbody{ padding:24px 30px;} 15 p.postfoot{ margin: 0px 0px 10px 24px;} 16 #shwtop { margin: 20px auto; width:1024px; } 17 #leftmenu>h3,#leftmenu>ul { display:none ;} 18 /* 定制自己导航栏的样式 */ 19 #shwtop ul { opacity:0.86; margin: 0px; padding: 0; list-style-type: none; 20 /*去除li前的标注*/ 21 background-color: #2c8383; 22 overflow: hidden; /*隐藏溢出的部分，保持一行*/ 23 } 24 #shwtop li { float: left; /*左浮动*/} 25 #shwtop li a, .dropbtn { display: inline-block; 26 /*设置成块*/ 27 color: white; 28 text-align: center; 29 text-decoration: none; 30 padding: 14px 16px; 31 } 32 /*鼠标移上去，改变背景颜色*/ 33 #shwtop li a:hover, .dropdown:hover .dropbtn { 34 /* 当然颜色你可以自己改成自己喜欢的，我还是挺喜欢蓝色的-- 我不喜欢蓝色...大哥,我反驳你了 */ 35 background-color: #ffffff; 36 } 37 #shwtop .dropdown { 38 /* 39 display:inline-block将对象呈递为内联对象， 40 但是对象的内容作为块对象呈递。 41 旁边的内联对象会被呈递在同一行内，允许空格。 42 */ 43 display: inline-block; 44 } 45 #shwtop .dropdown-content { 46 display: none; 47 position: absolute; 48 background-color: #f9f9f9; 49 min-width: 160px; 50 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 51 } 52 #shwtop .dropdown-content a { 53 display: block; 54 color: black; 55 padding: 8px 10px; 56 text-decoration:none; 57 } 58 #shwtop .dropdown-content a:hover { 59 background-color: #a1a1a1; 60 } 61 #shwtop .dropdown:hover .dropdown-content{ 62 display: block; 63 } 64 /**页面背景**/ 65 66 #wrapper{ 67 background-color:gray; 68 border:1px solid solid; 69 border-radius:5px 5px; 70 width:1024px; 71 margin:0px auto; 72 height:100%; 73 background-color:white; 74 } 75 #leftmenu{ 76 float:left; 77 position:absolute; 78 width:246px; 79 height:1300px; 80 } 81 #blog-news { 82 position:relative; 83 height:526px; 84 width:240px; 85 text-align:center; 86 margin:0px auto; 87 top:-240px; 88 border:2px solid #555151; 89 border-radius:7px 7px; 90 } 91 #profile_block a { 92 color:#000; 93 } 94 #profile_block { 95 text-align:center; 96 } 97 /* 日历大小 */ 98 #blogCalendar{ 99 position:relative; 100 width:240px; 101 font-family:'Microsoft YaHei UI'; 102 margin:0px auto; 103 height: 230px; 104 top:550px; 105 border:2px solid #555151; 106 border-radius:7px 7px; 107 } 108 #blogCalendar tr table.CalTitle{ 109 border-bottom:2px solid #0094ff; 110 } 111 #blogCalendar tr table td.CalNextPrev a{ 112 text-decoration:none; 113 } 114 #blog-calendar{ 115 position:relative; 116 width:240px; 117 height: 240px; 118 margin:10px auto; 119 border:1px solid solid; 120 } 121 #blog-sidecolumn{ 122 margin:10px auto; 123 text-align:center; 124 list-style:none; 125 font-family:'Microsoft YaHei UI'; 126 color:#000; 127 height:500px; 128 } 129 #sidebar_search{ 130 height:100px; 131 width:240px; 132 margin:8px auto 20px auto; 133 } 134 #sidebar_search h3 { 135 height:30px; 136 line-height:30px; 137 color:#ffffff; 138 background-color:#000; 139 text-align:center; 140 } 141 #sidebar_recentposts { 142 margin:10px auto; 143 } 144 #sidebar_recentposts ul li a { 145 font-size:14px; 146 float:left; 147 padding:5px 10px; 148 } 149 #sidebar_recentposts h3 { 150 height:30px; 151 line-height:30px; 152 color:#ffffff; 153 background-color:#000; 154 text-align:center; 155 } 156 #RecentPosts ul li li a { 157 font-size:16px; 158 text-align:left; 159 } 160 161 #sidebar_categories{ 162 display:none; 163 } 164 165 #sidebar_scorerank{ 166 margin:10px auto; 167 } 168 169 #sidebar_scorerank h3{ 170 height:30px; 171 line-height:30px; 172 color:#ffffff; 173 background-color:#000; 174 text-align:center; 175 } 176 /*侧边 */ 177 #main_content{ 178 border-left:2px solid #5cb0b0; 179 float:right; 180 padding-left:10px; 181 height:100%; 182 width:760px; 183 } 184 /* 定制博客背景图片，url里面是你的图片位置信息 */ 185 body { 186 background-image: url('//ww3.sinaimg.cn/woriginal/695f1cd4gw1eoan8yh4wwj216n16nguo.jpg'); 187 background-repeat: repeat; 188 background-attachment: fixed; 189 background-position: left top; } 190 /* 定制公告栏文字信息 */ 191 .gonggao{ 192 text-align: center; 193 font-size:17px; 194 color:blue; 195 } 196 .wenzi{ 197 text-align: center; 198 font-size:15px; 199 }/* 定制公告栏时钟位置 */ 200 #clockdiv { 201 /* left, center, right */ 202 text-align: center; 203 } 204 205 /* 定制返回顶部按键 */ 206 #toTop { 207 background: url(//http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_toTop.bmp) no-repeat 0px top; 208 width: 57px; 209 height: 57px; 210 overflow: hidden; 211 position: fixed; 212 right: 1%; 213 bottom: 20px; 214 cursor: pointer; 215 } 216 /* 定制推荐和反对按键 */ 217 #div_digg{ 218 position:fixed; 219 bottom:-10px; 220 width:120px; 221 right:2%; 222 box-shadow: 0 0 6px #0000FF; 223 border:2px solid #FF0000; 224 padding:4px; 225 background-color:#fff; 226 border-radius:4px 4px 4px 4px !important; 227 } 228 229 .icon_favorite { 230 background: transparent url('http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif') no-repeat 0 0; 231 padding-left: 15px; 232 } 233 234 #blog_post_info_block a { 235 text-decoration: none; 236 color: #5B9DCA; 237 padding: 3px; 238 }
侧边
<!-- 添加公告栏图片并指向首页链接 --> <div align="center"> <a href="https://www.cnblogs.com/whatarey/"> <img src="http://images.cnblogs.com/cnblogs_com/whatarey/1227702/o_mmexport1527473022802-001.jpg.JPG"></a> </div> <p class="wenzi">身无长技,不配爱人</p> <hr/> <!-- 添加公告栏时钟 --> <div id="clockdiv"> <canvas id="dom" width="120" height="120">时钟canvas</canvas> </div> <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script> <div align="center"> <span style="font-size:14px; font-weight:bold;">你是我的第</span> <a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3223365&c=9670408" alt="AmazingCounters.com"></a><span style="font-size:14px; font-weight:bold;">位访客</span></div> <!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); } catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script> <script> $(window).scroll(function () { var top = document.getElementById("toTop"); if ($(window).scrollTop() >=100) { top.style.display = "block"; } else { top.style.display = "none"; }; }); window.onload = function () { var ooo = document.getElementById("leftmenu"); var isOnPc = (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)); if (isOnPc) { ooo.innerHTML = "" }; } </script>
第一个 皮肤
页首html
<!-- 添加博客顶部博主信息--> <p id="lei" style="text-align: center;font-size:35px;margin-bottom:5px;color:white; margin-top:20px;opacity: 0.9">欢迎来到小半的博客</p> <div id="Scroll_info" style="text-align: center;color:red;font-size:13px;padding:5px;opacity: 0.8">我喜欢LYT,真的,你们别告诉她了,过些时候,我会告诉她的</div> <!-- 创建新的导航栏，内容可更改为你自己的--> <div id="shwtop"> <ul style="margin-left: 0px; margin-right: 0px;" class="test11"> <div class="dropdown"> <a href="https://www.cnblogs.com/" class="dropbtn"><span>博客园首页</span></a> <div class="dropdown-content"> </div> </div> <div class="dropdown"> <a href="https://www.cnblogs.com/whatarey/" class="dropbtn"><span>我的首页</span></a> <div class="dropdown-content"> </div> </div> <div class="dropdown"> <a href="http://www.cnblogs.com/whatarey/p/9117705.html" class="dropbtn"><span>我的新随笔</span></a> <div class="dropdown-content"> </div> </div> <div class="dropdown"> <a href="https://msg.cnblogs.com/send/ASP.NET要暴走" class="dropbtn"><span>联系我</span></a> <div class="dropdown-content"> </div> </div> <div class="dropdown"> <a href="http://feed.cnblogs.com/blog/u/389831/rss" class="dropbtn"><span>订阅</span></a> <div class="dropdown-content"> </div> </div> <div class="dropdown"> <a href="https://i.cnblogs.com/" class="dropbtn"><span>管理</span></a> <div class="dropdown-content"> </div> </div> </ul> </div>
页脚
<!--返回头部--> <!-- 指定返回顶部位置#shwtop --> <a href="#lei"> <div id="toTop" style="zoom: 0; display:none;"></div> </a> <!--页脚-->
第一次成功的完成了我的个人博客
很激动
但是也发现了几个问题
1.博客园不可以引用jquery ,引用了好像无效果
2.手机端不兼容,你可以试试别人博客手机端访问,基本都出现了大问题(我的解决了浮动失效,但还是有点不兼容手机端访问)
3.原生js 基本都不会使用了,一直在百度学习 依赖jquery 太久了 都忘了js
4.css html 代码不美观 我会试着一直完善的(在vs中打开,都支持,在博客园实现,会报错, 我报错就不爽,于是一直修改 然后 代码就不美观了)
5.这也是第一次实战
6原生js使用什么方式替换jquery的$(function(){}); -----此问题求助!!!
end