这是一个介绍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%); }
相关推荐
HTML 5 特性 ...注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
很显然,这个默认的“名字空间”中并不包含我们的“自定义标签”,因此我们只能自己定义一个“名字空间”,让“自定义标签”处在这个自定义的“名字空间”中. 经过我的尝试,自定义名字空间不可以使用中文。例如,...
1.4 编写第一个HTML文件 8 1.4.1 HTML文件的编写方法 8 1.4.2 手工编写页面 9 1.4.3 使用可视化软件制作页面 10 1.4.4 使用浏览器浏览HTML文件 14 1.4.5 使用HTML开发的明日图书网 14 1.5 小结 15 ...
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有: 定义页面或区段的头部; 定义页面或区段的尾部...
Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。...
理解HTML5新增的语义化标签,比如, , , <article>, 等。 CSS (Cascading Style Sheets) 掌握如何给HTML元素添加样式,包括字体、颜色、边距、填充、边框、尺寸等属性。 学习选择器的使用,如元素选择器、类选择器、...
之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里//www.jb51.net/article/89272.htm,今天分享的是net core的另外一种能写分页标签的方法具体是继承TagHelper,如下将讲述实现一个简单分页和总要...
关于 showdoc 去掉 检测到你要粘贴的内容可能包含html标签和样式,是否需要尝试转换成markdown格式?如不需要,你可以点击下方的粘贴纯文本按钮 弹框的方法 使用说明 : ...
以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding="UTF-8"?> xsi:schemaLocation=...
系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。 网站系统集商品、文章功能...
构建一个简单的网页 解释 HTML 文档的各个部分,包括: <head>和<body>标签 容器元素,例如 、 、 、 和<article> 常见元素,例如 、 、 、 和 解释HTML和DOM之间的区别 准备 准备工作和关于我页面...
本系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。 本系统集商品、文章功能...
系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。 网站系统集商品、文章功能...
系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。 网站系统集商品、文章...
系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。 网站系统集商品、文章功能...
2、启动IIS(以IIS6.0+为例),在网站新添加一个网站,设置正确物理路径确定保存。 3、其它详细设置可以参考:http://www.nslove.net/dispbbs.php?boardid=4&id=1023 4、如何登录Nslove系统后台: (1)前台入口...
3-08.cs 用一个输入参数通过值传递一个变量给一个方法。 3-09.cs 一维数组的使用。 3-10.cs 使用代理类型。 3-11.cs 使用接口。 3-12.cs 装箱操作。 3-13.cs 字符串操作。 3-14.cs if语句的...
该插件的使用方法参见博客https://blog.csdn.net/weixin_43839749/article/details/105894705。该插件主要实现倒计时的功能。可以在所要网页标签内显示倒计时,并可以指定倒计时结束后的操作。在一些验证码等待、...