用div+css制作一個(gè)登錄頁面，首先需要做的就是將這個(gè)登錄界面的布局給構(gòu)想好，然后在使用div去布局出來，一般都要結(jié)合表單，因?yàn)槭切枰蛿?shù)據(jù)庫結(jié)合的，至于的具體的界面，看下代碼：
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比來安網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式來安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋來安地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
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
這個(gè)代碼有些圖片的地址，需要根據(jù)要求去改，這些是我自己寫的，然后就是傳輸?shù)奈募?，action那，接受的文件也是需要定義的。
html
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title無標(biāo)題文檔/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已經(jīng)上傳了圖片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"http://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實(shí)現(xiàn)該功能是不現(xiàn)實(shí)的。既然是登陸操作，就得有校驗(yàn)吧，這個(gè)至少需要JavaScript相關(guān)代碼實(shí)現(xiàn)。而且，真正的網(wǎng)頁登陸操作都是與后臺交互實(shí)現(xiàn)的，需要將數(shù)據(jù)提交到后臺校驗(yàn)。、；
其次，沒有激勵(lì)，如何回答？畢竟這不是幾分鐘就可以搞定的事吧？
當(dāng)然，若你只是實(shí)現(xiàn)頁面呈現(xiàn)效果，而不需要實(shí)現(xiàn)登陸功能的話，就簡單些了，還真的就只需要HTML和css就能實(shí)現(xiàn)
背景圖片可以放在body里面，也能放在DIV里面。都是可以顯示的，這個(gè)看自己是對那個(gè)對象設(shè)置背景了。
顯示不出背景圖片的原因
1，你的背景圖片的路徑錯(cuò)了，導(dǎo)致圖片顯示不出來。
2，你背景圖片的對象設(shè)置錯(cuò)了。
根據(jù)你設(shè)置的的CSS：/*登錄界面背景樣式*/
.login{
background-image:url(images/loginbg.jpg);
background-size:60% 100%;
}
設(shè)置的是body的背景圖片，對象是正確的。
按照你的代碼，我演示的如圖
修改下你圖片的路徑應(yīng)該就能顯示背景圖片了。
這個(gè)可以參考一下：
!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;
}
重慶分公司
重慶分公司
