A html5 website and the usage of the article tag, html5article
This is a tool website that introduces html5-related technologies. The website itself is written in html5 | css3. Although it is worth learning for students with poor computer configuration, after all, html5 is the mainstream technology in the future.
URL: http://html5please.com/
I only noticed this website because of html5. There are too few domestic html5 websites, but there are few actual projects. The div effect implemented by html5 on this website is impressive: a front-end UI framework that can improve development efficiency by 500%!
I extracted the code, which is very simple, but it is also the charm of html5,Article
Label.
Html code: a front-end UI framework that can improve development efficiency by 500%!
<article class="fallback prefixes">
Css code: a front-end UI framework that can improve development efficiency by 500%!
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%); }
HTML5 <article> labels
<Article> A tag defines external content.
External content can be a new article from an external news provider, text from a blog, or text from a forum. Or from other external sources.
Which tag can html5 article use instead?
In html5, sections, articles, and other labels can all be replaced by div.
They can be seen as div with a certain significance. You can use css to add a style to the div to replace article.
However, this is obviously a kind of fallback. The emergence of html5 is to make every part of the page "meaningful"