一个html5做的网站,以及article标签的用法
这是一个介绍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%); }
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15