一个html5做的网站，以及article标签的用法
浏览数：25 /
时间：2015年06月09日
这是一个介绍html5相关技术的工具网站，网站本身就是有html5|css3写成，虽然对于电脑配置差点的同学来说浏览起来有点卡，但是还是值得学习的，毕竟html5才是今后的主流技术。
网址：http://html5please.com/
我完全是因为html5的原因才注意到了这个网站，国内用html5完成的网站太少了，教程一大把，却鲜有实际项目产生。这个网站用html5实现的div效果让人映像深刻：可以500%提高开发效率的前端UI框架！
我将代码提取出来，很简单，不过这也是html5的魅力所在，顺便了解一下article标签。
html代码： 可以500%提高开发效率的前端UI框架！
<article class="fallback prefixes">
<header>
<h2 class="name" id="border-image">border-image </h2>
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
<h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
<p>Make sure to use all the right prefixes (<code>-o-</code>, <code>-webkit-</code>, <code>-ms-</code>, <code>-moz-</code>). Additionally, <a href="http://border-image.com/">border-image.com</a> may help. You should let this fall back to either a normal solid border or no border at all, depending on whether a border is essential for readability. We recommend that you avoid polyfills.</p>
<p>There were some syntax changes (requiring the <code>fill</code> keywords) that may catch you off-guard; <a href="http://dbaron.org/log/20120612-border-image">David Baron's border-image post</a> describes the best course of action.</p>
</div>
<div class="polyfills"></div>
<p class="links">
<a href="http://caniuse.com/border-image">
View browser share %
</a>
<a href="https://github.com/h5bp/html5please/blob/master/posts/border-image.md">Edit this info</a>
</p>
</div>
<footer class="tags">fallback prefixes</footer>
</article>
css代码： 可以500%提高开发效率的前端UI框架！
article {
color: #232927;
margin-bottom: 2em; }
article .tags {
display: none; }
article > header {
-webkit-transition: background-color 100ms ease-in;
-moz-transition: background-color 100ms ease-in;
-ms-transition: background-color 100ms ease-in;
-o-transition: background-color 100ms ease-in;
transition: background-color 100ms ease-in;
background: #d3e0e4;
border-radius: 0.3rem;
position: relative;
z-index: 1;
cursor: pointer;
/*
&:hover:before {
@include transform(rotate(270deg));
}
*/ }
article > header:hover {
background: #e3d7bf; }
article > header:before {
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
-ms-transition: all 100ms ease-in;
-o-transition: all 100ms ease-in;
transition: all 100ms ease-in;
display: inline-block;
vertical-align: middle;
content: "+";
line-height: 1;
font-size: 1.5rem;
border-radius: 1.5rem;
height: 1.5rem;
width: 1.5rem;
margin: 0 0.5rem 0 1rem;
text-align: center;
color: white;
text-shadow: 1px 1px 1px #476871;
background: #b4cad0;
border: 1px solid #95b4bc; }
article > header .kind, article > header .name, article > header .status {
display: inline-block;
vertical-align: middle;
pointer-events: none; }
article > header i {
font-style: normal; }
article > header .kind, article > header b {
font-weight: normal; }
article div.more {
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
display: none;
opacity: 0;
background: white;
border-radius: 0 0 0.3rem 0.3rem;
padding: 0.5em 1em 1.5em 1em;
margin: -0.3rem 1px 0 1px;
position: relative;
z-index: 0;
box-shadow: 0 0 7px #0c0d0d; }
article div.more .polyfills b {
font-weight: bold; }
article div.more .polyfills p {
display: inline; }
article div.more .links {
font-size: 0.8em;
position: absolute;
bottom: 0.5em;
right: 1em; }
article div.more .links a {
padding: 0.25em 0.5em; }
article div.more .links a:hover {
background: #149cd7;
color: #fff;
border-radius: 5px;
text-decoration: none;
text-shadow: 1px 1px 1px #232927; }
article.expanded > header {
border-bottom: 1px solid #91a19b; }
article.expanded > header:before {
content: "-";
line-height: 0.75;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none; }
article.expanded div.more {
opacity: 1; }
.kind {
font-size: 0.8em;
line-height: 3rem;
color: #e3d7bf;
position: absolute;
left: -5em;
text-align: right;
width: 4.5em;
z-index: 1;
text-shadow: 1px 1px 1px #232927; }
.name {
padding: 0.4rem 0;
color: #107aa8;
text-shadow: 0 1px 0px white; }
#noitems {
text-align: center; }
.status {
font-size: 2em;
border-radius: 0 0.2rem 0.2rem 0;
padding: 0 1rem 0 0.5rem;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
position: relative;
float: right; }
.status:before, .status:after {
content: "";
height: 50%;
width: 0.8em;
position: absolute;
left: -0.8em; }
.status:before {
top: 0; }
.status:after {
bottom: 0; }
.status i {
font-size: 0.3em;
display: inline-block;
line-height: 1;
text-transform: none;
font-weight: normal; }
.status i b {
font-size: 1.5em; }
.status.avoid {
background: #d92626;
box-shadow: -4px 0px 4px #c32222 inset;
border-right-color: #a51d1d; }
.status.avoid:before {
background: -webkit-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: -moz-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: -o-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: linear-gradient(56deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%); }
.status.avoid:after {
background: -webkit-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: -moz-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: -o-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%);
background: linear-gradient(124deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #c32222 53%, #d92626 56%); }
.status.use {
background: #60ac39;
box-shadow: -4px 0px 4px #559933 inset;
border-right-color: #467e2a; }
.status.use:before {
background: -webkit-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: -moz-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: -o-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: linear-gradient(56deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%); }
.status.use:after {
background: -webkit-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: -moz-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: -o-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
background: linear-gradient(124deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%); }
.status.caution {
background: #ffaa00;
box-shadow: -4px 0px 4px #e69900 inset;
border-right-color: #c28100; }
.status.caution:before {
background: -webkit-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: -moz-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: -o-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: linear-gradient(56deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%); }
.status.caution:after {
background: -webkit-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: -moz-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: -o-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%);
background: linear-gradient(124deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #e69900 53%, #ffaa00 56%); } 郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
