HTML5随笔

flyxiang228

浏览: 60268 次
性别:
来自: 江西

最近访客更多访客>>

salansun

yu981260193

tuibo

phx_ptt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5/CSS3

HTML5 webkit Flex IE JavaScript

<!Doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5 TEST</title>
<style type="text/css">
@font-face{
  font-family:'';
  src:url(*.ttf);
}

.row:nth-child(even){
  background:#dde;
}
.row:nth-child(odd){
  background:white;
}
div{
  display:inline-block;
}
input[type="text"]{
  background:#eee;
}
dd:not(.box){
  color:#00c;
}
dd:not(span){
  display:block;
}
h2:first-child{

}
div.text>div{

}
h2 + header{

}
.div{
  text-overflow:ellipsis;
  -webkit-column-count:2;
  -webkit-column-rule: 1px solid #bbb;
  -webkit-column-gap: 2em;
  
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;
  
  color: rgba(255, 0, 0, 0.75); 
  background: rgba(0, 0, 255, 0.75);
  
  background: -webkit-gradient(linear, left top, left bottom, 
                             from(#00abeb), to(white), 
                             color-stop(0.5, white), color-stop(0.5, #66cc00));
  
}
.div2{
  color: hsla(128 75%, 33%, 1.00);
  face: border-radius: 0px; 
  left eye: border-radius: 0px; 
  right eye: border-radius: 0px; 
  base white: border-radius: 0px; 
  mouth: border-radius: 0px; 
  nose: border-radius: 0px; 
  left black eye: border-radius: 0px; 
  right black eye: border-radius: 0px;
  background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000));
  text-shadow:rgba(64, 64, 64, 0.5) 0 0 0;
  box-shadow:rgba(64, 64, 64, 0.5) 0 0 0;
  border-radius: 0px;
  -webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom, 
                   from(transparent), to(rgba(255, 255, 255, 0)));
  
}
.div3{
  background: url(src/zippy-plus.png) 10px center no-repeat, 
              url(src/gray_lines_bg.png) 0 center repeat-x;
}
.box {
  display: -webkit-box;
  -webkit-box-orient: horizontal | vertical ;
}
.box .one, .box .two {
  -webkit-box-flex: 1;
}
.box .three {
  -webkit-box-flex: 3;
}
</style>
<!--[if IE]>

<![endif]-->
<!--[if IE 9]>

<![endif]-->
<!--[if lte IE 8]>

<![endif]-->

</head>
<body>

<div class="tab">
  <div class="tabnav">
    <span>HOME</span>
    <span>ABOUT US</span>
    <span>CONTACT US</span>
    <span>CONTACT US</span>
    <span>CONTACT US</span>
    <span>CONTACT US</span>
  </div>
  <div class="tabcontents">
    
  </div>
</div>

<div class="top">
  <header>
    
  </header>
</div>
<ul id="row">
  <li class="row">ROW1</li>
  <li class="row">ROW2</li>
  <li class="row">ROW3</li>
  <li class="row">ROW4</li>
  <li class="row">ROW5</li>
  <li class="row">ROW6</li>
</ul>
<div id="clickme">click me</div>

<canvas id="canvas" width="600" height="300"></canvas>

<form action="" method="">
  <p><input type="text" required /></p>
  <p><input type="email" value="wangx@telligem.com" /></p>
  <p><input type="range" min="0" max="50" value="10" /></p>
  <p><input type="data" min="2011/05/19" max="2011/12/12" value="2011/05/19" /></p>
  <p><input type="search" results="10" placeholder="Search..." /></p>
  <p><input type="tel" placeholder="(555) 555-555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /></p>
  <p><input type="color" placeholder="e.g.#bbbbbb" /></p>
  <p><input type="number" step="1" min="-5" max="10" value="0" /></p>
  <p><input type="submit" value="SUBMIT" /></p>
</form>

<audio id="audio" src="*.mp3" controls></audio>
<video id="video" src="movie.webm" autoplay controls></video>

<svg width="600" height="300">
  <circle id="circle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert("hello");" />
</svg>

<div id="demo"></div>
<!--<script type="text/javascript" src="lazyLoad.js"></script>-->
<script>

var row =document.getElementById("row").getElementsByTagName('li');
//var rowli = row.getElementsByTagName('li');
//alert(row.length);
for(var i=0, rl=row.length; i<rl; i++)
{
  row[i].onclick = (function(j){
    return function (){
      alert(j+1);
    }
  })(i);
}

function testpro(data){
  this.data = data;
}

  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);
  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = "round";
  canvasContext.strokeStyle = "rgba(255, 127, 0, 0.5)";
  canvasContext.stroke();
  
  document.getElementById("audio").muted = false;
  document.getElementById("video").play();
 
  //javascript 获取本地时间
  document.getElementById("demo").innerHTML=Date();
  
function refresh(parameter){
  if(typeof(arguments[0] == "object")){
    alert("this is object");
  }
};
var cm = document.getElementById("clickme");
cm.onclick = function(){
  clickme();
};

var fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
document.write("<br/>" + fruits.constructor);

//concat数组组合方法
var parents = ['parent001', 'parent002'], childrens = ['children001', 'children001'];
var newgrop = parents.concat(childrens);
document.write('<br/>' + newgrop);
document.write('<br/>' + parents.valueOf() + '<hr/>');


//about javascript prototype method Math part
var pi = Math.cos(Math.PI);
document.write('<br/>' + pi + '<hr/>');
var clickme = function(){
  alert('click me, ^v^');
}

document.write(navigator.appName + '<br/>' + navigator.appCodeName + '<br/>' + navigator.appVersion + '<br/>' + navigator.cookieEnabled + '<br/>' + navigator.platform
+'<br/>' + navigator.userAgent + '<br/>' + navigator.javaEnabled() + '<br/>');
document.write('<hr/>');

//返回获取标签集合
document.write(document.getElementsByTagName('body').length);
function d(){
  document.getElementById("demo").innerHTML=Date();
}

var Clock = setInterval('d()', 1000);
clearInterval();
</script>

<table class="verisign" width="135" border="0" cellpadding="2" cellspacing="0" title="Click to Verify - This site chose VeriSign SSL for secure e-commerce and confidential communications.">
<tr>
<td width="135" align="center" valign="top"><script type="text/javascript" src="https://seal.verisign.com/getseal?host_name=www.capxg.com&amp;size=S&amp;use_flash=NO&amp;use_transparent=NO&amp;lang=en"></script><br />
<a href="http://www.verisign.com/ssl-certificate/" target="_blank"  style="color:#000000; text-decoration:none; font:bold 7px verdana,sans-serif; letter-spacing:.5px; text-align:center; margin:0px; padding:0px;">ABOUT SSL CERTIFICATES</a></td>
</tr>
</table>

</body>
</html>

分享到：