标签：sea img 技术分享 标签 ora option 场景 radius hold
用div,form制作登录页面，尽可能做得漂亮。
练习使用下拉列表选择框，无序列表，有序列表，定义列表。
观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MIS15</title> </head> <body bgcolor="#FFD9EC"> <h1> 张艺兴生日快乐 </h1> <h2>Happy Lay‘s Day</h2>> <img src="http://wx1.sinaimg.cn/large/d56a59a4gy1fka4jk1p9rj21ck1wwk8i.jpg" width="300" height="450" > <div id="container" style="width:400px;" > <div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black" size="6" >登 录 </font></h2></div> <div id="content" style="background-color:pink;width:400px;float:left;line-height:40px;"> <form > 用户名:<br><input type="text" style="border-radius: 8px;height: 20px;width: 350px" name="user" PLACEHOLDER="请输入用户名"><br> 密码:<a href="http://www.baidu.com"><font size="2" color="tomato"style="float: right" >忘记密码？</font> </a> <br><input type="password" style="border-radius: 8px;height: 20px;width: 350px;" name="password" PLACEHOLDER="请输入密码"><br> <div id="content" style="background-color:lightcoral;width:400px;float:left;line-height:40px;"> <input type="checkbox" value="Keep me logged in">下次自动登录<br> <input type="button" style="border-radius: 5px;background-color: seashell;height: 30px;width: 200px;margin-right: 10px;float: right"value="登录"> </div> </form> </div> <div id="footer" style="background-color:palevioletred;;clear:both;text-align:center;">版权?Judy-L</div> </div> <div id="container" style="width:400px;" > <div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;"><font face="华文行楷" color="black"size="6">搜 索</font></h2></div> <div id="content" style="background-color:lightpink;;;width:400px;float:left;line-height:20px;"> 范围：<select> <option value="" style="color: #c2c2c2;">---请选择---</option> <option>图片</option> <option>饭拍视频</option> <option>官方视频</option> <option>音频</option> </select> <ul> <li>MV汇总</li> <li>花絮汇总</li> </ul> <ol> <li>同人画作</li> <li>饭制视频</li> </ol> </div> <div id="footer" style="background-color:palevioletred;clear:both;text-align:center;">版权?Judy-L</div> </div><br> <p>友情链接</p> <a href ="http://v.yinyuetai.com/video/3059775">张艺兴--SHEEP--MV</a> </body> </html>
标签：sea img 技术分享 标签 ora option 场景 radius hold
原文地址：http://www.cnblogs.com/lyx1997/p/7662811.html
