新标签

新标签

关注
发信
关注(28)粉丝(399)

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>
04-28 06:41
Powered by LMLPHP ©2024 新标签 0.086334