怎样用div+css制作一个登录页面

用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那，接受的文件也是需要定义的。

如何用css div 设计登陆界面

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，你自己下载一下，其他三张也就是装饰用的

求一个简单的登录界面CSS代码

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实现这个登录界面

首先，只通过HTML和CSS实现该功能是不现实的。既然是登陆操作，就得有校验吧，这个至少需要JavaScript相关代码实现。而且，真正的网页登陆操作都是与后台交互实现的，需要将数据提交到后台校验。、；

其次，没有激励，如何回答？毕竟这不是几分钟就可以搞定的事吧？

当然，若你只是实现页面呈现效果，而不需要实现登陆功能的话，就简单些了，还真的就只需要HTML和css就能实现

网页登录界面的背景图片一般是放在Body里还是DIV里的？？

背景图片可以放在body里面，也能放在DIV里面。都是可以显示的，这个看自己是对那个对象设置背景了。

显示不出背景图片的原因

1，你的背景图片的路径错了，导致图片显示不出来。

2，你背景图片的对象设置错了。

根据你设置的的CSS：/*登录界面背景样式*/

.login{

background-image:url(images/loginbg.jpg);

background-size:60% 100%;

}

设置的是body的背景图片，对象是正确的。

按照你的代码，我演示的如图

修改下你图片的路径应该就能显示背景图片了。

求大神写一个HTML的登录界面,连带css样式

这个可以参考一下：

!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;

}

网页题目：登录界面css样式,表单登录css样式
本文路径：http://scyingshan.cn/article/dsdechi.html