热门文章

联系方式

热门文章主页 > 热门文章 >

十分钟用HTML+CSS让你的博客变得高大上,十分钟HTML技巧

发布时间:2019-01-11 编辑:凯发K

十分钟用HTML&CSS让博客园变得高大上,十分钟HTML

一直很喜欢博客园的主题: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倒计时代码 就要十分钟的  

这个好用,你拿去试试。如果还有需求可以追问。
<HTML>
<HEAD>
<script language="JavaScript" type="text/javascript">
<!--
var c=60*10//10分钟
var t
function timedCount()
{
document.getElementById('timer').value=c
c=c-1
t=setTimeout("timedCount()",1000)
}
//-->
</script>
</HEAD>
<body onload="timedCount();">
所剩时间(秒):<input id="timer" type="text" value="100"/>
</body>
</HTML>
   

http://www.bkjia.com/HTML5/875339.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/875339.htmlTechArticle十分钟用HTMLCSS让博客园变得高大上,十分钟HTML 希望喜欢弄博客的朋友能喜欢哦。...

本文源自: 环亚国际

Copyright © 2005-2017 http://www.makilaro.com 环亚国际_环亚国际娱乐_环亚国际娱乐平台_腾讯财经版权所有 环亚国际_环亚国际娱乐_环亚国际娱乐平台_腾讯财经