一个html5做的网站，以及article标签的用法

这是一个介绍html5相关技术的工具网站，网站本身就是有html5|css3写成，虽然对于电脑配置差点的同学来说浏览起来有点卡，但是还是值得学习的，毕竟html5才是今后的主流技术。

网址：http://html5please.com/

我完全是因为html5的原因才注意到了这个网站，国内用html5完成的网站太少了，教程一大把，却鲜有实际项目产生。这个网站用html5实现的div效果让人映像深刻：可以500%提高开发效率的前端UI框架！

我将代码提取出来，很简单，不过这也是html5的魅力所在，顺便了解一下article标签。

        <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%); }

时间： 2024-10-25 14:45:08

一个html5做的网站，以及article标签的用法的相关文章

html5，表单与label标签的用法2

<form action="" autocomplete="on"> <input type="submit" value="搜索"> <select name="ss"> <optgroup label="11111"> <option value="A">a

前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代.有人说如果一个人开始回忆童年的时候,那么他开始变老了,不知道是不是这样一个原因,我突然想起了很多以前的老朋友,开始想起了一些童年时期的玩伴.也就想做这样一款简单的游戏,也只是单纯的想回忆一下童年. 计划: 游戏其实很简单,我们把它叫着裤裆棋,又叫什么狗卵坨还是什么的,有些记忆模糊了,反正大致是这样子

个人站长的疑问：怎么样才能做一个能赚钱的网站？

老牛也是个业余爱好,只是比大家接触时间长,和真正互联网行业里的人来说,我们都是小巫!!所以别抱有什么幻想,自己能成为马云.李彦宏.马化腾了. 以下这个问题,具有代表性,很多非互联网行业的人其实对这行很有兴趣,其实也不是想大干一番,再搞个BAT出来,都有自己工作,只是兴趣,也想接触下这个行业,能挣到一点儿零用钱就能让这类朋友满足了. 有个网友在知乎上给我提问: 您好,我看了您关于google adsense的回答,很牛!在这先赞一个,我对这个也比较感兴趣,想做个站,但不知道从哪入手我给他的回复如下

HTML5在线学习网站推荐

因为HTML5流行及其功能的强大,越来越多的人加入HTML5的学习.当然,目前大部分人学习都是通过网络,HTML5同样有许多教学网站,那么HTML5在线学习网站有哪些?现在请看我为大家推荐的HTML5在线学习网站. 学习HTML5的网站和博客无论学习什么语言,最开始的当然是要从基础学起.如果你是一个对HTML5一无所知的初学者,那么以下的几个网站绝对不容错过.网站中包括HTML5的基础教程.文章和博客,而且其中包含的不仅仅只是代码,还包含很多带有简单步骤讲解的例子. 1. W3Schools(

jsoup_解析任意网站，做任意网站客户端

jsoup是一个解析网页源码的开源库,他能按照给定的规则提取出一个网页中的任意元素,和其他网页解析库不同的是,他提取网页内容的方式和css.jquery的选择器非常相似.因此如果你懂得前端的知识,只需根据以下的代码样例就可以在3分钟之内学会jsoup的用法: 1 2 3 4 5 Document doc = Jsoup.connect(href).timeout(10000).get(); Element masthead = doc.selec

html5中的一些新语义标签

1 <header> 2 <nav> 3 <ul> 4 <li><a href="">栏目1</a></li> 5 <li><a href="">栏目2</a></li> 6 <li><a href="">栏目3</a></li> 7 </ul> 8 <

6个原则、50条秘技提高HTML5应用及网站性能

Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为“提高HTML5应用和网站性能的50条秘技(50 performance tricks to make your HTML5 apps and sites faster)”的演讲,介绍了很多为Web应用程序提速的技巧. Mann的建议是按照下面六个原则组织的. 1. 快速响应网络请求. 避免重定向.排名前1000的网站中,63%使用了重定向.如果不执行重定向的话,页面速度

HTML5 结构之美(3) - 结构标签综合运用

前面我们介绍了在 HTML5 中新增的结构标签,以及这些标签的定义和使用方法.接下来,让我们看一下在 HTML5 中进行总体页面布局的时候,具体应该怎样来综合运用这些结构标签. 大纲通过使用新的结构标签,HTML5 的文档结构比大量使用 div 标签的 HTML4 的文档结构要清晰.明确了很多.如果再规划好文档结构的大纲,就可以创建出对阅读者或屏幕阅读程序来说,都很清晰易读的文档结构. 所谓大纲,简单来说就是文档中各内容区块的结构编排.内容区块可以使用标题标签(h1~h6)来展示各级内容区块的

【HTML5】---【HTML5提供的一些新的标签用法以及和HTML 4的区别】

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求. HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站.其中有些是技术上类似 <div> 和