HTML5漫笔
日期：2014-05-17 浏览次数：20769 次
HTML5随笔
<!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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
