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>

  • 相关阅读:
    组合模式/composite模式/对象结构型模式
    迭代器模式/iterator模式/对象行为型模式
    复制Eclipse工作空间设置
    各种命令
    Java相关框架
    基于hk2框架的功能测试Mock注入
    个人项目----词频统计(补全功能)
    小组项目----用户需求调查
    四人小组项目申请
    补第一周“四人小组项目“
  • 原文地址:https://www.cnblogs.com/liminghui3/p/7680895.html
Copyright © 2011-2022 走看看