浮动之京东登录页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>京東登錄頁面</title><link href="css/Page_244_4.css" rel="stylesheet" type="text/css" /></head><body><div class="container"><div class="top"><h1>歡迎登錄</h1></div><div class="middle"><div class="login"><ul><li class="first"><span class="huiyuan">京東會員</span><a href="#"><span class="register">立即注冊</span></a></li><li id="username"><input type="text" placeholder="郵箱/用戶名/已驗證手機" name="user" style=" color:#999999;height: 32px; width: 190px; border: none; border-left:2px solid ##bdbdbd ;" /></li><li id="password"><input type="password" name="pwd" style="height: 32px; width: 190px; border: none; border-left:2px solid ##bdbdbd ;" /></li><li><input type="radio" name="login" />自動登錄<span class="wangji">忘記密碼？</span></li><li class="last"><a href="#" id="logins">登 錄</a></li></ul></div></div><div class="bottom"><ul><li>關于我們 </li><li>聯系我們</li><li>人才招聘</li><li>商家入駐</li><li>廣告服務</li><li>手機京東</li><li>友情鏈接</li><li>銷售聯盟</li><li>京東社區</li><li>京東公益</li><li>English Site</li></ul><h1>Copyright?2004-2017 京東JD.com 版權所有</h1></div></div></body>
</html>//CSS樣式
body{margin: 0px;
}
.container{/*border:1px solid red;*/margin: 0px;padding: 0px;
}
.top{/*border:1px dashed gray;*/background: url(../img1/logo.png) 70px 5px no-repeat;background-size: 130px 50px;padding: 15px 0px;
}
.top h1{margin-left: 220px;font-weight: normal;font-size: 20px;margin-bottom: 0px;margin-top:0px;
}
.middle{/*border:1px dashed gray;*/background: url(../img1/banner.png) 0px 0px no-repeat;overflow: hidden;
}
.middle .login{float: right;margin-top:50px;margin-right: 100px;background: white;margin-bottom: 150px;
}.middle .login ul li{font-size: 12px;/*background: green;*/line-height: 35px;color: #999999;
}/*.middle .login ul li span{float: right;
}*/
.middle .login ul .first{background: url(../img1/icon5.jpg) 165px 10px no-repeat;
}
.middle .login ul li .huiyuan{font-size: 16px;font-weight: normal;color: black;
}
.middle .login ul li .register{color:red;
}
.middle .login ul li .register,.wangji{float: right;
}.middle .login ul{list-style: none;/*line-height: 20px;*/padding: 0px 20px;}.middle .login ul #username,#password{/*width:203px;*/height: 35px;border:2px solid #bdbdbd;padding-left: 38px;}.middle .login ul #username{background: url(../img1/icon1.jpg) 0px 0px no-repeat;margin-bottom: 20px;
}
.middle .login ul #password{background: url(../img1/icon2.jpg) 0px 0px no-repeat;}
/*.middle .login ul li input{width: 200px;height: 33px;border: none;border-left: 2px solid #bdbdbd;
}*/
.middle .login ul li #logins{color: white;text-decoration: none;font-size: 14px;background: #e4393c;padding: 5px 100px;/*height: 36px;*/
}
.bottom{/*border:1px dashed gray;*/}.bottom ul{list-style: none;overflow: hidden;padding-left: 100px;margin-bottom: 0px;}.bottom ul li{float: left;color:#666666;font-size: 10px;padding-right: 10px;border-right: 1px solid #666666;margin-right: 10px;
}
.bottom h1{color:#666666;font-size: 10px;font-weight: normal;padding-left: 350px;
}
總結
- 上一篇： seaborn中的色板02详解
- 下一篇： win7怎么连接不上宽带连接服务器未响应