html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
header{background:#abcdef; height:150px;}
nav{height:30px; background: #ff9900; margin-top: 100px;}
nav li{float:left; width:100px; list-style: none; height:30px; line-height: 30px;}
div{margin-top:10px;}
section{width:70%;background:#abcdef;float:left;}
article{background:#f90; width:500px; margin:0 auto; text-align:center;}
aside{width:28%;float:right; background: #abcdef;}
footer{background: #abcdef; height:100px; margin-top:20px; clear:both;}
</style>
</head>
<body>
<header>
<p>this is header</p>
<nav>
<ul>
<li>首页</li><li>文章</li><li>帮助中心</li>
</ul>
</nav>
</header>
<div>
<!--主要部分-->
<section>
<p>this is section</p>
<article>
<h2>春晓</h2>
<p>春眠不觉晓，<br/>
处处蚊子咬，<br/>
打上敌敌畏,<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<article>
<h2>上学歌</h2>
<p>春眠不觉晓，<br/>
处处蚊子咬，<br/>
打上敌敌畏,<br/>
不知死多少。<br/>
</p>
</article>
<hr/>
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物</p>
</figure> <figure>
<dt>DDS</dt>
<dd>大吊死</dd>
</figure>
<hr/>
<dialog>
<dt>今天几号？</dt>
<dd>母鸡</dd>
<dt>问你几号啊？</dt>
<dd>19</dd>
</dialog>
<hr/>
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr/>
<!--firefox 才有右键菜单效果-->
<span contextmenu="caidan">右键单击</span>
<menu type="context" id="caidan">
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="../img/logo.png"></menuitem>
</menu>
<hr/>
<!--温度计,有一个效果提示-->
<meter min="0" max="100" value="20" low="3" high="25"></meter>
<!--调透明度等 -->
<input type="range" />
<!--进度条-->
<progress max="100" value="50" id="pro"></progress>
<script type="text/javascript"> var pro=document.getElementById('pro');
var jidu= setInterval(function(){
var value=parseInt(pro.value);
if(value>=parseInt(pro.max)){
value=0;
// clearInterval(jidu);
}
pro.value+=1;
},100);
</script> <hr/>
<!--展开折叠效果-->
<details>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be?</dd>
</details>
<hr/>
<p>偏僻字注意功能，浏览器firefox不支持时,加（），支持者是拼音状态</p>
<ruby>狂<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<hr/>
<p> mark 是标记重点突出的效果</p>
<mark>男生最喜欢</mark>玩游戏
</section>
<aside>
<p>this is aside</p>
<hgroup>
<h3>股票有风险？</h3>
<h3>投资股票吗？</h3>
</hgroup> </aside>
</div>
<footer>
<p>this is footer</p>
<hr/>
<small>联系我们</small>
<small>商户合作</small> </footer> </body>
</html>
新标签 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单击文字，可输入-->
<label for="a">名称</label><input type="text" id="a"/>
<!--为控件分组，指定标题-->
<fieldset>
<legend>main</legend>
name: <input type="text">
user:<input type="text">
</fieldset>
<!--摘要与细节，只有 chrome 支持-->
<details>
<summary>三国志</summary>
<p>this is content.</p>
</details>
<!--进度条-->
<meter min="0" max="100" value="20" title="20%">进度条</meter><br/>
<!--时间元素 日期与时间之间用 T 分割 利于seo-->
<!--mark高亮文本显示-->
欢迎<mark>大家</mark>光临<time datetime="1995-05-15">我的生日</time>聚会，明天<time datetime="2015-02-04T18:00:00">下班后</time>准时开始 <!--select分组-->
<select name="location">
<optgroup label="北京市">
<option value="dcq">东城区</option>
<option value="hdq">海淀区</option>
</optgroup>
<optgroup label="上海市">
<option value="pdq" selected="true">浦东区</option>
<option value="pxq">浦西区</option>
</optgroup>
</select><br/>
工作地点<select name="workplace" size="6" multiple="true">
<optgroup label="北京市">
<option value="dcq">东城区</option>
<option value="hdq">海淀区</option>
</optgroup>
</select>
<hr/>
<style type="text/css">
input:focus{
outline: red solid 1px; /*外线，不占空间*/
}
</style>
<input />
<!--box-shadow border-image css多列 看 w3c-->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" min="0" max="50" name="a" />+
<input type="text" name="b" value="50" />=
<output name="result"></output>
</form>
</body>
</html>
新选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>新选择器</title>
<style>
h1{font-size:16px;}
li:first-child{color:#f00;}
/*
<h1>注意是li:first-child，而不是ul:first-child</h1>
<ul>
<li>结构性伪类选择符 E:first-child</li>
<li>结构性伪类选择符 E:first-child</li>
</ul>
*/
.a [type=text]{
color:red;
}
/*
<div class="a">
<input type="text" name="name" />
</div>
*/
p:before{
content:'子曰：';
}
p:after{
content:'——摘自《论语》';
}
li:before{
content: url(../img/logo.png);
}
/*
<p>学而时习之，不亦说乎。</p>
<p>三人行，必有我师焉。</p>
<p>人不知而不晕，不亦君子乎。</p>
<br/>
<ul>
<li>宫保鸡丁</li>
<li>酱爆鸡丁</li>
<li>鱼香鸡丁</li>
</ul>
*/
</style>
</head>
<body> </body>
</html>
线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景线性渐变</title>
<style>
div{height:250px;
/*background-image: linear-gradient(180deg,#f00 0%,#ff0 70%,#fff 100%);*/
/*background-image: linear-gradient(180deg,#f00 ,#ff0 ,#fff);*/
/*径向渐变 第一个为半径 at 圆心坐标 ，后面为颜色*/
background-image: radial-gradient(250px at 0 0,#f00,#ff0,#fff);
/*background-image: radial-gradient(500px at 100px 100px,#f00,#ff0,#fff);*/
background-repeat: no-repeat;}
.div2{background-image: linear-gradient(to top ,#E13335 0%, pink 100%); height: 20px;}
</style>
</head>
<body>
<p>background-image:linear-gradient; 背景线性渐变 向上0度 向右90度 向下180度 向左270度
radial-gradient; 径向渐变
repeating-linear-gradient 重复线性渐变
重复径向渐变</p>
<div></div>
<div class="div2">漂亮的导航 漂亮的线性渐变</div>
</body>
</html>
html5 基本布局+新标签+新选择器 + 线性渐变的更多相关文章
- html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- HTML5部分新标签属性及DOM扩展元素
HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...
- HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案
一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...
- HTML5增加的几个新的标签
HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...
- HTML5的新标签之一的Canvas
一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 [ ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- html5学习笔记（1）-新标签
最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...
- HTML5新标签和CSS伪类
HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端 <nav> <footer> <section> <header&g ...
- HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
随机推荐
- Java文件读写操作指定编码方式防乱码
读文件:BufferedReader 从字符输入流中读取文本,缓冲各个字符,从而提供字符.数组和行的高效读取. 可以指定缓冲区的大小,或者可使用默认的大小.大多数情况下,默认值就足够大了. 通常,Re ...
- Linux中增加软路由的两种方法/删除的方法
第一种: route add -net 172.16.6.0 netmask 255.255.255.0 gw 172.16.2.254 dev eth0 route del gw 172.1 ...
- 第三方登录（QQ登录）开发流程详解
原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...
- Linux下编译安装python3
Linux下默认系统自带python2.6的版本,这个版本被系统很多程序所依赖,所以不建议删除,如果使用最新的Python3那么我们知道编译安装源码包和系统默认包之间是没有任何影响的,所以可以安装py ...
- java sleep() 、yield()
1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...
- 括号配对问题_栈<stack>
问题 A: 括号配对问题 时间限制: 3 Sec 内存限制: 128 MB提交: 3 解决: 2[提交][状态][讨论版] 题目描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行 ...
- Greedy:Subsequence(POJ 3061)
和最短序列 题目大意:找出一个序列中比至少和S相等的最短子序列(连续的) 本来这道题可以二分法来做复杂度O(NlogN),也可以用一个类似于游标卡尺的方法O(N)来做 先来讲游标卡尺法: 因为子序 ...
- 【leetcode】 Interleaving String (hard)
Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...
- 更新补丁Bind
1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...
- UIDynamic动画
UIDynamic是从iOS7开始引入的技术 属于UIkit框架 可以模拟显示生活中的物理现象 如碰撞 抖动 摆动等 一.使用UIDynamic步骤: 1.创建一个动力效果器UIDynamicAnim ...