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>

  • 相关阅读:
    Spring MVC 程序首页的设置
    绿色版Tomcat 启动 + 停止 + 随系统自动启动
    Lazy Load, 延迟加载图片的 jQuery 插件
    ibatis参数传递小技巧
    SpringMVC接收页面表单参数-java-电脑编程网
    用 JS 点击左右按钮 使图片切换
    JS数组方法汇总 array数组元素的添加和删除
    关于jQuery UI 使用心得及技巧
    MySQL查询in操作 查询结果按in集合顺序显示_Mysql_脚本之家
    JSTL c标签,fn标签,fmt标签
  • 原文地址:https://www.cnblogs.com/liminghui3/p/7680895.html
Copyright © 2011-2022 走看看