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>

  • 相关阅读:
    atitit.为什么技术的选择方法java超过.net有前途
    HDU 4022 Bombing STL 模拟题
    定制XP引导屏幕背景图像和替换windows这句话
    《STL源代码分析》---stl_heap.h读书笔记
    2015在大型多人在线游戏市场报告
    于Unity3D调用安卓AlertDialog
    jQuery整理笔记5----jQuery大事
    推断字符串数组里面是空的
    软测试-数据结构
    2014第18周三
  • 原文地址:https://www.cnblogs.com/liminghui3/p/7680895.html
Copyright © 2011-2022 走看看