zoukankan      html  css  js  c++  java
  • 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{ 100%;height: 50px;background:#aefeee;}
            h4{display: inline;}
            aside{ 20%;height: 540px;background:#708090;float: left;}
            section{ 80%;height: 540px;background: #d8bfd8;float: left;overflow: auto;}
            footer{ 100%;height: 50px;background: #f0ffff;clear: left;}
            figure{padding: 0px;}
            figcaption{text-align: center;}
            img{max- 70%;}
            ul{list-style: none;}
            li{display: inline;}
            a{text-decoration: none;}
        </style>

    </head>
    <body>
        <header>
            <hgroup>
                <img src="h.jpg"  alt="h1" style=" 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>

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    C# IP地址与数字之间的互转
    C# 获取本机的所有ip地址,并过滤内网ip
    C# POST数据base64到接口会出错的问题
    C# 使用 Task 替换 ThreadPool ,异步监测所有线程(任务)是否全部执行完毕
    C# 线程池执行操作例子
    输入及词法分析详解
    用java实现编译器-算术表达式及其语法解析器的实现
    用java实现一个简易编译器-语法解析
    用java实现一个简易编译器1-词法解析入门
    模板方法模式
  • 原文地址:https://www.cnblogs.com/houweidong/p/5878251.html
Copyright © 2011-2022 走看看