html5,实例开发代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <style type="text/css">
        body{margin: 0px;}
        header{width: 100%;height: 50px;background:#aefeee;}
        h4{display: inline;}
        aside{width: 20%;height: 540px;background:#708090;float: left;}
        section{width: 80%;height: 540px;background: #d8bfd8;float: left;overflow: auto;}
        footer{width: 100%;height: 50px;background: #f0ffff;clear: left;}
        figure{padding: 0px;}
        figcaption{text-align: center;}
        img{max-width: 70%;}
        ul{list-style: none;}
        li{display: inline;}
        a{text-decoration: none;}
    </style>

</head>
<body>
    <header>
        <hgroup>
            <img src="h.jpg"  alt="h1" style="width: 30px;height: 30px;">
            <h4>移动开发练习</h4>
        </hgroup>
    </header>
    <aside>
        <ul>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
        </ul>
    </aside>
    <section>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
    </section>
    <footer>
    <nav>
        <ul>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>                
        </ul>        
    </nav>        
    </footer>
</body>
</html>

上一篇:IDEA搭建ssm框架测试衍生出的问题The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: D:\Develop\jdk7\jdk1.7.0_79\bin;


下一篇:dojo表格的一些属性