zoukankan      html  css  js  c++  java
  • 我花里胡哨的博客园

    之前一直使用的是CSDN,因为CSDN下资源方便,找资料就看博客园,前不久注册了一个博客园账号,就是这个,我只有一个想法‘技术大佬不在意表面注重内涵’...

    我是一个水技术员还在学习中,所以我觉得还是应该自定义博客园,所以我现在的博客园就花里胡哨的。

    1.页头的背景图片轮播

    (1)

    首先要做的是引用轮播的JS

    但是需要注意的是不能写在--页首Html代码--这个里面因为页首Html代码是通过ajax加载的,另外将js代码引用中的http://链接改为//链接,不然通过https访问时将无法加载

    所以就写在--页脚Html代码--这个里面

    如下:<script src="//cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

    (2)

    然后就要写实现轮播的JS代码了

    <script type="text/javascript" >
    window.onload = function () {

    $('#header').backstretch(["http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b2.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b3.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b4.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b5.jpg"],
    {fade: 1000, duration: 2000});
    }

    </script>

    就像这样就可以实现页首背景图片,这些图片是在网上下载了上传到博客园相册的。差不多就这样吧,不过我还写了一点关于这个的CSS代码,自己调整的。

    2.侧边栏的功能实现

    (1)天气控件

    其实这个很简单,就随便百度就会有很多,点进去还自带生成代码,这样吧这个代码复制了加到--博客侧边栏公告(支持HTML代码)--这个里面就行了

    (2)我的一些沟通方式

    我在公告div下面加了几个沟通方式像CSDN,QQ,微博,其实这个很简单去网上找了一些图片放到了博客园的相册,然后就用<a>标签调转就行了,当然代码还是写在--博客侧边栏公告(支持HTML代码)--这个里面就行了

    (3)音乐播放器

    我是用的网易云,可以先把想实现的音乐加高歌单,然后播放,打开播放列表,会发现一个像铁链子一样的图标,这个就是生产外部链接,点击过后可以设置想显示的样式,将代码复制到--博客侧边栏公告(支持HTML代码)--这个里面就行了

    (4)时间小人

    我的日历上面有一个当前时间,这个也是一个控件,网上一搜一大堆的代码,所以请随意,代码还是写在--博客侧边栏公告(支持HTML代码)--这个里面就行了

    PS:向DIV添加代码格式,如:

     var div= document.getElementById("div名称");

     var html=div.innerHTML;//这个div原本的代码,如果是直接替换代码可以不要这个
        div.innerHTML = "需要添加的HTML代码(注意:如果有引号”需要更改为"这种形式)"+html;//在原本的代码前添加代码

    3.页脚的浏览次数记录

    这个是我在一个网站上生成的,那个网站你可以选择你喜欢的样式生成代码,直接复制到--页脚Html代码--这个里面就行了

    点我进入网站

    除了这些还对我的一些小地方进行了调整,基本上就写的CSS代码了,可以自己修改。

    PS:小菜一只,请多多指教,不管是什么只要肯花时间什么都可以实现

  • 相关阅读:
    Navigator is deprecated and has been removed from this package
    ES6 Promise
    SectionList的使用
    FastList使用
    react native touchable
    react native获取屏幕的宽度和高度
    RN导航栏使用
    2020-11-04:java里,总体说一下集合框架。
    2020-11-03:手写代码:链表如何快速找到中间节点?
    2020-11-02:go中,s:=make([]string,10);s=append(s,“test“);fmt.Println(s[0]),打印什么?
  • 原文地址:https://www.cnblogs.com/ZxtIsCnblogs/p/8297831.html
Copyright © 2011-2022 走看看