新聞中心
怎樣用css設置登界面???就是很簡單的那種。
你這個登錄界面,如果用table做的話很簡單,只需要4行3列,然后就是左右對齊設置下
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、雅安服務器托管、營銷軟件、網(wǎng)站建設、固陽網(wǎng)站維護、網(wǎng)站推廣。
如果用css+div也很簡單,從上到下4個div,然后在一行的div里面在套div或者直接用ul li來寫
css盒子里怎么弄登錄界面
用div+css制作一個登錄頁面,首先需要做的就是將這個登錄界面的布局給構(gòu)想好,然后在使用div去布局出來,一般都要結(jié)合表單,因為是需要和數(shù)據(jù)庫結(jié)合的,至于的具體的界面,看下代碼:
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
這個代碼有些圖片的地址,需要根據(jù)要求去改,這些是我自己寫的,然后就是傳輸?shù)奈募?,action那,接受的文件也是需要定義的。
求一個JSP界面的CSS登陸樣式
style type="text/css"
body{ background:#fff;padding:0; margin:0;font-size:12px;}
img{ border:0; padding:0; margin:0;}
ul{list-style:none;}
.login_bg{ background:url(%=path%financemanage/images/login_new/login_bg.gif) repeat-x; height:591px;}
.dl_bg{ background:url(%=path%financemanage/images/login_new/dlbg.jpg) no-repeat center top;}
.diwen{ background:url(%=path%financemanage/images/login_new/diwen.gif) repeat-x;}
.usename{ font-size:14px; color:#0e3c00;}
.dl_text{ width:145px; height:17px; background:url(%=path%financemanage/images/login_new/text.gif) repeat-x center; border:1px solid #1c5302;}
.dl_but{ width:75px; height:50px; background:url(%=path%financemanage/images/login_new/dlbut.gif) no-repeat; border:0 none; cursor:pointer;}
/style
script language="javascript" type="text/javascript"
var count = 0;
function submit_onclick(obj){
if (count == 0) {
//alert("MAC:" + document.forms[0].MACAddr.value);
obj.submit();
count ++;
}
}
function submit2() {
if (count != 0) {
return false;
}
if (event.keyCode==13) {
document.forms[0].submit();
}
}
/script
!-- script FOR="foo" EVENT="OnObjectReady(objObject,objAsyncContext)" LANGUAGE="JScript"
if(objObject.IPEnabled != null objObject.IPEnabled != "undefined" objObject.IPEnabled == true)
{
if(objObject.MACAddress != null objObject.MACAddress != "undefined")
MACAddr = objObject.MACAddress;
if(objObject.IPEnabled objObject.IPAddress(0) != null objObject.IPAddress(0) != "undefined")
IPAddr = objObject.IPAddress(0);
}
/script
object classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" id="locator" VIEWASTEXT /object
object classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223" id="foo" /object
script LANGUAGE="JScript"
var service = locator.ConnectServer();
var MACAddr ;
var IPAddr ;
service.Security_.ImpersonationLevel=3;
service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');
/script
--
/head
body onKeyPress="submit2();"
table width="100%" border="0" cellspacing="0" cellpadding="0" class="login_bg"
tr
td height="135" align="center" valign="top"img src="%=request.getContextPath()%/financemanage/images/login_new/logo.jpg" width="939" height="135" //td
/tr
tr
td height="391" align="center" valign="top" class="dl_bg"
html:form action="/financemanage/login.do" method="post"
table width="320" height="70" border="0" cellspacing="0" cellpadding="0" style="margin-top:120px; margin-left:40px;"
tr
td width="100" align="center" class="usename"操作員號:/td
td width="184" align="left"input name="tlrno" type="text" class="dl_text" maxlength="8" tabindex="1"http://td
td width="75" rowspan="2"input name="Submit" type="button" onclick="submit_onclick(this.form)" value="" class="dl_but" tabindex="3"http://td
/tr
tr
td align="center" class="usename"密 碼:/td
td align="left"input name="pwd" type="password" class="dl_text" maxlength="10" tabindex="2"/
%-- input type="hidden" name="MACAddr"/--%
/td
/tr
tr
td/td
td colspan="2"font size="2"html:errors//font/td
/tr
/table
/html:form
/td
/tr
tr
td height="65" class="diwen"?/td
/tr
/table
你可以自己換一下背景顏色或者背景圖片 其他的都挺好 這是一個給銀行操作員登錄的界面 你看看吧
如何用html5+ css div制作一個簡單的登錄界面
1、按照正常的思路,布局就是div布局,寫一個固定下來,作為模板,在每次獲取數(shù)據(jù)的時候使用功能代碼綁定數(shù)據(jù)到布局上面,自動生成頁面內(nèi)容就可以了。
拆分出單個模板來,很明顯每項都是一樣的
就這個樣式寫div+css不會嗎?
兩層div 的嵌套,里面布局排文本標簽,image標簽就可以了,綁定id填數(shù)據(jù),或者遍歷填數(shù)據(jù)。
簡單布局是一種,再就是
這種
求一個簡單的登錄界面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"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實現(xiàn)這個登錄界面
首先,只通過HTML和CSS實現(xiàn)該功能是不現(xiàn)實的。既然是登陸操作,就得有校驗吧,這個至少需要JavaScript相關代碼實現(xiàn)。而且,真正的網(wǎng)頁登陸操作都是與后臺交互實現(xiàn)的,需要將數(shù)據(jù)提交到后臺校驗。、;
其次,沒有激勵,如何回答?畢竟這不是幾分鐘就可以搞定的事吧?
當然,若你只是實現(xiàn)頁面呈現(xiàn)效果,而不需要實現(xiàn)登陸功能的話,就簡單些了,還真的就只需要HTML和css就能實現(xiàn)
當前題目:css登陸界面樣式,html+css登錄頁面
分享路徑:http://fisionsoft.com.cn/article/hooggs.html