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特性 ...
随机推荐
- centos 6.5 u盘 安装问题 ：vesamenu.c32: Not a COM32R image
大致可以参考这里:http://www.computerandyou.net/2012/03/how-to-solve-vesamenu-c32-not-a-com32r-image-error-in ...
- python 的dict的update 方法的一点诡秘的行为
如下: >>> 'a%s'%a 'a{1: 0, 2: 0}' >>> for k,v in a.items(): a.update(k=v) >>&g ...
- 为MongoDB创建一个Windows服务
一:选型,根据机器的操作系统类型来选择合适的版本,使用下面的命令行查询机器的操作系统版本 wmic os get osarchitecture 二:下载并安装 附上下载链接 点击安装包,我这里是把文件 ...
- 【leetcode】Restore IP Addresses
Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...
- struts2 初步总结
1.Struts2的概述: 2.Struts2的入门: * 2.1下载struts2的zip包. * 2.2创建web工程. * 2.3配置... 3.Struts2的开发流程: * 3.1流程: * ...
- [转][Android]FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
原文链接:http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配器,继承 ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- C#中XmlTextWriter读写xml文件详细介绍(转)
转自http://www.jb51.net/article/35230.htm .NET中包含了很多支持XML的类,这些类使得程序员使用XML编程就如同理解XML文件一样简单.在这篇文章中,我将给 ...
- 【leetcode】 Scramble String (hard)★
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...
- CSS颜色代码 颜色值 颜色名字大全(转载)
CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...