10.17

Posted 2020-10-11 李明惠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="width: 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>

以上是关于10.17的主要内容，如果未能解决你的问题，请参考以下文章

alphaScrum站立会议第2次....10.17