观察常用网页的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>