首页 > 代码库 > 十分钟用HTML，CSS让博客园变得高大上
十分钟用HTML，CSS让博客园变得高大上
一直很喜欢博客园的主题：coffee，但是看久了，总感觉还是太多不必要的东西，所以就自己整理了下，记录如下：
打开管理，可以看出博客园可以非常方便自由定制html和css滴，真是贴心！
使用工具： Firefox+firebug
1.加一个子标题【对于我这种特别喜欢写注释真是太好啦】：
2.coffee的主题全部统一为一种黄色，看多了就觉得太单调：通过页面定制CSS代码换换换!
因为我只是在coffee上小改，所以
这个还是必须不勾选了。
打开firebug找到标题的背景图地址，然后把它换成你喜欢的，我就换成了百度首页的星空主题,【图片地址是百度的，绝对不会挂哈哈，机智的我】
同时把body的背景色也用纯黄色加深下。
body { color: #000; background: url(‘http://7.su.bdimg.com/skin/85.jpg?2‘) left top; /*背景纯黄色加深*/ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9pt; min-height: 80%; line-height: 1.5;}#header { background: url(‘http://4.su.bdimg.com/skin/12.jpg?2‘) right top no-repeat;/*百度首页星空*/ height: 178px;}#blogTitle { height: 178px; clear: both; background: url(‘http://4.su.bdimg.com/skin/12.jpg?2‘) no-repeat;}
3.右边常用链接里面有个更多链接是没有用的，去掉;
同样搜索里面的google在国内也是没用的，去掉;
[PS:这些都是用firebug打到找到对应标签后再操作滴，所以你只要用firebug，就快速找到你要的标签，DIY它]
#itemListLink{display:none !important;}#widget_my_google{display:none !important;}
4.右边的侧边栏如果加太多的文字，就会显得杂，如果去掉，又会显得那一片的纯黄很刺眼，试了下换个背景，发现上面的字就很难看，
还是纯黄好，所以就想加点图像上去，最好是动态的，
一个站不要加载太多的资源，所以决定不再用动态图片，于是就看到了下面这个神器！
这个可以做点图像出来，
其实他叫侧边栏公告，但只要你在里面写的HTML定义到绝对位置，就可以在页面内任何地方放东西，
所以有了HTML和CSS就可以做很多事啦【sign,JS还要申请权限...】
那就用CSS做个酷酷的的动态图像来做镇站之宝吧,哈哈！
<svg viewBox="0 0 160 160" width="160" height="160"> <circle cx="80" cy="80" r="50" /> <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)"> <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill=green> <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" /> </path> </g> <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" /></svg>
都可以任意写HTML,那么在标题后添加个以前写CSS的练习的小球，把玩下下，一闪一闪显得好神秘，有木有【但是只有FireFox才能显示出来......】
在HTML里面加入：
<div class="three_ball"></div>
在CSS里面加入：
.three_ball{ width:15px; height:15px; background:rgba(0,0,0,0); border-radius:50%; margin:100px auto; position:absolute; left:25px; top:25px; animation:three_ball 3s ease-in-out infinite;}@keyframes three_ball { 0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #ff0;} 8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #f0f;} 17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #0ff;} 25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #f00;} 33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;} 42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #ff0;} 50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;} 58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #f00;} 67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #00f;} 75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #f0f;} 83% {box-shadow:15px 15px 0 0 #fff, -15px -15px #fff 0 0, 15px -15px 0 0 #ff0;} 92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #0ff;} 100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #f00;}}
5.不要忘记在页首和页尾点缀下下：
<p align="center">It‘s not who you are underneath, it‘s what you do that defines you</p><p align="center">Brick walls are there for a reason :they let us prove how badly we want things</p>
最后：
小技巧：学习时一直把css里面的id和class用什么标记记错，其实你用时只要想id是#都有一个竖笔划，这样每次一用就能绝对记得！
当刚学CSS时，就和这小家伙一样赶觉自己会飞起来啦…………
十分钟用HTML，CSS让博客园变得高大上
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。