zoukankan      html  css  js  c++  java
  • 10.17

    观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。

    用div,form制作登录页面,尽可能做得漂亮。

    练习使用下拉列表选择框,无序列表,有序列表,定义列表。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登陆界面</title>
    </head>
    <body>
    <img src="http://pic.xiami.net/images/common/uploadpic/42/1508152158142.jpg" alt="虾米音乐">
    <div id="container" style=" 350px" align="center">
        <div id="header" style="background-color: yellow"><h3 align="center">虾米音乐账号密码登录</h3></div>
        <div id="content">
            <form>
                <p>账号:<input type="text"name="user"placeholder="请输入用户名"></p>
                <p>密码:<input type="password"name="password"></p>
                <p>
                <input type="radio" name="role" value="stu">微信登录
                <input type="radio" name="role" value="tea">微博登录
                <input type="radio" name="role" value="tea">QQ登录
                </p>
                <input type="checkbox">记住我
                <br>
                <a href="http://www.xiami.com/member/getpassword?spm=0.0.0.0.szUgoA" target="_blank" >忘记密码?</a>
                <p><input type="button"value="login">
                <input type="button"value="register"></p>
            </form>
    
        </div>
        <div id="footer"style="background-color: yellow"><p align="center"><i>版权@vvae</i></p></div>
    </div>
    <div>
        <select>
             <option>收藏</option>
            <option>评论</option>
            <option>点赞</option>
        </select>
        <ul>
            <li>歌手排行榜</li>
            <li>歌曲排行榜</li>
        </ul>
        <ol>
            <li>歌单</li>
            <li>电台</li>
            <li>音乐人</li>
            <li>客户端</li>
        </ol>
    </div>
    <hr>
    <div>
        <a href="http://www.xiami.com/album/2102873289?spm=a1z1s.6843761.1478643741.4.5GKsih"target="_blank" >
            <img src="http://pic.xiami.net/images/common/uploadpic/84/1508147010884.jpg" alt="TAEMIN"></a>
        <a href="http://www.xiami.com/album/2102873289?spm=a1z1s.6843761.1478643741.4.5GKsih"target="_blank"><h4 align="center">TAEMIN</h4></a>
    </div>
    </body>
    </html>

  • 相关阅读:
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark RDD(Resilient Distributed Datasets)论文
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    【机器学习实战】第10章 K-Means(K-均值)聚类算法
    [译]flexbox全揭秘
  • 原文地址:https://www.cnblogs.com/liminghui3/p/7680895.html
Copyright © 2011-2022 走看看