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>

  • 相关阅读:
    PHP商品秒杀倒计时
    【SAS NOTES】两个数据集merge
    【SAS NOTE】在proc means中根据某变量的范围进行统计+proc format
    【SAS NOTES】if then和if的区别
    【SAS NOTES】kindex判断字符串中是否含某子字符串& 用where在data步中选择部分数据
    【SAS NOTES】宏
    【SAS NOTES】两个数据集直接合并不考虑关键字匹配
    【SAS NOTES】在一个data中生成多个数据集
    【SAS NOTES】update
    【SAS NOTES】系统自带变量+%if
  • 原文地址:https://www.cnblogs.com/liminghui3/p/7680895.html
Copyright © 2011-2022 走看看