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>
扫一扫
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
