html5 基本布局+新标签+新选择器 + 线性渐变
生活随笔
收集整理的這篇文章主要介紹了
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>?
轉載于:https://www.cnblogs.com/gyz418/p/5297366.html
總結
以上是生活随笔為你收集整理的html5 基本布局+新标签+新选择器 + 线性渐变的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： R实现K-means
- 下一篇： GIF 斗图警告！GitHub 标星 5