css盒子里怎么弄登录界面

html-css017

css盒子里怎么弄登录界面,第1张

用div+css制作一个登录页面,首先需要做的就是将这个登录界面的布局给构想好,然后在使用div去布局出来,一般都要结合表单,因为是需要和数据库结合的,至于的具体的界面,看下代码:

<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:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logozh.jpg)float:left"></span>

<input type="text" name="uname" style="height:26px"/><br/>

<span style="display:blockheight:27pxwidth:27pxbackground-image:url(../static/images/logomm.jpg)float:left"></span>

<input type="password" name="pwd" style="height:26px"/>

<p><a href="">忘记登录密码?</a></p>

<input type="submit" value="" style="width:254pxheight:37pxbackground-image:url(../static/images/logodl.jpg)cursor: pointer"/>

</form>

</div>

</div>

</div>

</body>

</html>

这个代码有些图片的地址,需要根据要求去改,这些是我自己写的,然后就是传输的文件,action那,接受的文件也是需要定义的。

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

<li><input type="text" ></li>

<li><input 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

}

你这个登录界面,如果用table做的话很简单,只需要4行3列,然后就是左右对齐设置下

如果用css+div也很简单,从上到下4个div,然后在一行的div里面在套div或者直接用ul li来写