13518219792
用div+css制作一个登录页面，首先需要做的就是将这个登录界面的布局给构想好，然后在使用div去布局出来，一般都要结合表单，因为是需要和数据库结合的，至于的具体的界面，看下代码：
创新互联-专业网站定制、快速模板网站建设、高性价比来安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式来安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖来安地区。费用合理售后完善，十多年实体公司更值得信赖。
html
head
meta charset="UTF-8"
title淘宝登录/title
link rel="stylesheet" type="text/css" href="../static/css/index.css" /
script type="text/javascript"
{if $message !=''}
alert("{$message}");
{/if}
/script
/head
body
div id="logo"
div class="logotop"
div class="yanz"
h2登录/h2
form action="logo.php" method="post"
span style="display:block; height:27px; width:27px; background-image:url(../static/images/logozh.jpg); float:left;"/span
input type="text" name="uname" style="height:26px"/br/
span style="display:block; height:27px; width:27px; background-image:url(../static/images/logomm.jpg); float:left;"/span
input type="password" name="pwd" style="height:26px"/
pa href=""忘记登录密码？/a/p
input type="submit" value="" style="width:254px; height:37px; background-image:url(../static/images/logodl.jpg); cursor: pointer;"/
/form
/div
/div
/div
/body
/html
这个代码有些图片的地址，需要根据要求去改，这些是我自己写的，然后就是传输的文件，action那，接受的文件也是需要定义的。
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title无标题文档/title
style type="text/css"
.title{font-family: verdana, tahoma, sans-serif;FONT-SIZE: 10px;font-weight:bold}
.grey{FONT-SIZE: 12px;color:#666666}
.orange {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600}
.orange A:link {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:visited {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:hover {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:active {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
textarea, input, select{
background: #FFFFFF;
border: 1px solid #CCCCCC;
color: #000000;
font-family: verdana, tahoma, sans-serif;
font-size: 0.95em;}
.username{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
/style
/head
body
table width="208" border="0" align="center" cellpadding="5" cellspacing="0"
tr
td bgcolor="#F4F4F4" class="title"+ LOGIN/td
/tr
tr
td class="grey"img src="images/warning.gif" width="16" height="16" align="absmiddle" 请输入登陆的用户和密码/td
/tr
tr
td class="title"Username/td
/tr
tr
tdinput name="Username" type="text" class="username" size="30"/td
/tr
tr
td/td
/tr
tr
td class="title"Password/td
/tr
tr
tdinput name="Password" type="password" class="password" size="30"/td
/tr
tr
td class="orange"a href="#"Get your Password ? /a/td
/tr
tr
td align="right"img src="images/loginin.gif" width="70" height="21"/td
/tr
/table
pnbsp;/p
/body
/html
script language=javascript /script
注：loginin.gif、password.gif、username.gif、warning.gif已经上传了图片loginin.gif，你自己下载一下，其他三张也就是装饰用的
div id="zuo"
!--input type="button" value="往左" class="y"--
h1登 陆/h1
form method="post" action="ok.html"
p class="form_zh"input type="text" placeholder="请输入账号" class="form_zh_y" autofocus = "autofocus" required = "required"/p
p class="form_mm"input type="password" placeholder="请输入密码" class="form_zh_e" required = "required"/p
input type="submit" value="登 录" class="form_dl"
/form
p class="qtfsdl"spanimg src="images/weixin.jpg" /微信登陆/spanspanimg src="images/QQ.jpg" /QQ登陆/span/p
p class="qtfsdr"img src="images/frm_xia.jpg"//p
p class="y"注 册/p
!--div class="y1" style="position: absolute;top:250px;left: -159px;width: 260px;height: 47px;background: red;opacity: 0.5;"/div--
/div
#zuo{
width: 500px;
height: 540px;
background: white;
position: absolute;
top: calc(50% - 250px);
left:calc(50% - 250px);
color: #292929;
}
#zuo h1,#you h1{margin-top:30px;font-weight: bold;text-align: center;margin-bottom: 30px;}
首先，只通过HTML和CSS实现该功能是不现实的。既然是登陆操作，就得有校验吧，这个至少需要JavaScript相关代码实现。而且，真正的网页登陆操作都是与后台交互实现的，需要将数据提交到后台校验。、；
其次，没有激励，如何回答？毕竟这不是几分钟就可以搞定的事吧？
当然，若你只是实现页面呈现效果，而不需要实现登陆功能的话，就简单些了，还真的就只需要HTML和css就能实现
背景图片可以放在body里面，也能放在DIV里面。都是可以显示的，这个看自己是对那个对象设置背景了。
显示不出背景图片的原因
1，你的背景图片的路径错了，导致图片显示不出来。
2，你背景图片的对象设置错了。
根据你设置的的CSS：/*登录界面背景样式*/
.login{
background-image:url(images/loginbg.jpg);
background-size:60% 100%;
}
设置的是body的背景图片，对象是正确的。
按照你的代码，我演示的如图
修改下你图片的路径应该就能显示背景图片了。
这个可以参考一下：
!doctype html
html
head
meta charset="utf-8"
link href="main.css" type="text/css" rel="stylesheet"
title登陆界面/title
/head
body
div class="login_ico"
img src="images/login_ico.png"
/div
div class="login_putin"
ul
liinput type="text" /li
liinput type="password" /li
/ul
/div
div class="login_btn"
input type="submit" value="登陆"
/div
/body
/html
样式 ：
*{
margin:0;
padding:0;}
li{
list-style-type:none;
margin:0;
padding:0;}
a{
text-decoration:none;
color:#000;}
/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 0;
width:70%;
padding: 1em 2em 1em 5.4em;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border: 1px solid #999;
}
.login_btn{
width:300px;
margin:40px auto 0 auto;
}
.login_btn input{
width:100%;
margin:0;
padding:.5em 0;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border:#1263be solid 1px;
background:#1b85fd;
color:#FFF;
font-size:17px;
font-weight:bolder;
letter-spacing:1em;
}
.login_btn input:hover{
background:#1263be;
}
