1. 程式人生 > >10.17

10.17

con 列表 enter 使用 登錄 user 版權 targe hold

觀察常用網頁的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