标签: HTML5

  • 比较笨的随机颜色

    比较笨的随机颜色

    饱和度较低的几种随机颜色,JavaScript算法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>colors</title>
    <style type="text/css">
    .div {width:100px; height:100px; float:left;}
    </style>
    </head>
            
    <body>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
            
    <script type="text/javascript">
    window.onload=function(){
        var obj=document.getElementsByClassName('div');
        for(var i=0;i<obj.length;i++){
            obj[i].style.backgroundColor=hsl2color([radomFuc(360), 100, 70])
        }
    }
    function radomFuc($value) { //取随机数
        return parseInt($value * Math.random());
    }
            
    function hsl2color(hsl) { //HSL颜色算法
        if (hsl[0] > 360 || hsl[0] < 0 || hsl[1] > 100 || hsl[1] < 0 || hsl[2] > 100 || hsl[2] < 0) return "#000000";
        var rgb = [0, 0, 0];
        if (hsl[0] <= 60) {
            rgb[0] = 255;
            rgb[1] = Math.floor(255 / 60 * hsl[0]);
        } else if (hsl[0] <= 120) {
            rgb[0] = Math.floor(255 - (255 / 60) * (hsl[0] - 60));
            rgb[1] = 255;
        } else if (hsl[0] <= 180) {
            rgb[1] = 255;
            rgb[2] = Math.floor((255 / 60) * (hsl[0] - 120));
        } else if (hsl[0] <= 240) {
            rgb[1] = Math.floor(255 - (255 / 60) * (hsl[0] - 180));
            rgb[2] = 255;
        } else if (hsl[0] <= 300) {
            rgb[0] = Math.floor((255 / 60) * (hsl[0] - 240));
            rgb[2] = 255;
        } else if (hsl[0] <= 360) {
            rgb[0] = 255;
            rgb[2] = Math.floor(255 - (255 / 60) * (hsl[0] - 300));
        }
        var sat Math.abs((hsl[1] - 100) / 100);
        rgb[0] = Math.floor(rgb[0] - (rgb[0] - 128) * sat);
        rgb[1] = Math.floor(rgb[1] - (rgb[1] - 128) * sat);
        rgb[2] = Math.floor(rgb[2] - (rgb[2] - 128) * sat);
        var lum = (hsl[2] - 50) / 50;
        if (lum > 0) {
            rgb[0] = Math.floor(rgb[0] + (255 - rgb[0]) * lum);
            rgb[1] = Math.floor(rgb[1] + (255 - rgb[1]) * lum);
            rgb[2] = Math.floor(rgb[2] + (255 - rgb[2]) * lum);
        } else if (lum < 0) {
            rgb[0] = Math.floor(rgb[0] + rgb[0] * lum);
            rgb[1] = Math.floor(rgb[1] + rgb[1] * lum);
            rgb[2] = Math.floor(rgb[2] + rgb[2] * lum);
        }
        return "#" + (0x1000000 + rgb[0] * 0x010000 + rgb[1] * 0x000100 + rgb[2]).toString(16).substring(1);
    }
    </script>
    </body>
    </html>
    pic
  • webm格式视频Firefox无法播放问题

    webm格式视频Firefox无法播放问题

    firefox播放不了webm视频. 需要在服务器的.htaccess中添加: AddType video/webm webm
    (直接单独另起一行添加这行文字即可)

    safari支持Mp4格式,
    Chrome支持Mp4和Webm.
    Firefox支持Webm
    ie只有9以上的版本才会支持Mp4,
    在win7都还被认为是陌生和耍酷的中国,别指望有多少人的浏览器是ie9,即便是ie9经过本人测试对html5视频的支持也是不尽人意。
    所以要想在众浏览器都能看到你的视频,并让坑爹的低版本IE也支持的话,你至少需要准备3种视频格式,Mp4,WebM,以及Flv.
    前两种就是Html5格式,只需一个标签即可嵌入你的网页。而后面的flv依旧需要flash的安装,和奇丑臃肿代码的包裹。

    Html5视频标签

    20120917-133629.jpg

  • 常用的CSS命名规则

    常用的CSS命名规则

    常用的CSS命名规则:
    保存一些常用的CSS英文命名方法,不过好像很多的命名都在HTML5里成了标签了.

    1.样式命名

    外    套:  wrap
    主导航:  mainnav
    子导航:  subnav
    整个页面: content
    页 眉:  header
    页 脚:  footer
    商 标:  label
    标 题:  title
    主导航:  mainbav(globalnav)
    顶导航:  topnav
    边导航:  sidebar
    左导航:  leftsidebar
    右导航:  rightsidebar
    旗 志:  logo
    标 语:  banner
    菜单内容1: menu1 content
    菜单容量: menu container
    子菜单:  submenu
    边导航图标:sidebarIcon
    注释:   note
    面包屑:  breadcrumb(即页面所处位置导航提示)
    容器:   container
    内容:   content
    搜索:   search
    登陆:   Login
    功能区:  shop(如购物车,收银台)
    当前的   current

    2.另外在编辑样式表时可用的注释可这样写:

    <– Footer –>
    内容区
    <– End Footer –>

    3.样式文件命名
    主要的 master.css
    布局,版面 layout.css
    专栏 columns.css
    文字 font.css
    打印样式 print.css
    主题 themes.css