CSS登陆框设计

html-css07

CSS登陆框设计,第1张

<div class="box" style="width:200pxoverflow:hiddenline-height:24pxfont-size:12pxtext-align:centerclear:both">

<input type="text" style="width:120pxheight:24pxborder:1px solid #ccccccfloat:leftmargin:4px 0" value="USER ID"/>

<!--type是设置input的类型，text，是单行文本，button是按钮，style，是设置input的属性依次为：宽度，高度，描边（线宽，模式，颜色），浮动（左边），跟周边距离（上下4px,左右0），框里默认字符-->

<input type="button" style="width:60pxheight:50pxmargin:4pxfloat:rightdisplay:inline" value="login" />

<input type="text" style="width:120pxheight:24pxborder:1px solid #ccccccfloat:left" value="PASSWORD" />

</div>

用dreamweaver建一个HTML文本，然后复制这段，到<body></body>里，这么详细，你不能不给我分！！

div id=win style="display:nonePOSITION:absoluteleft:50%top:50%width:600pxheight:400pxmargin-left:-300pxmargin-top:-200pxborder:1px solid #888background-color:#edftext-align:center">这是DIV登录框示例<br><a href="javascript:closeLogin()">关闭登录框</a></div>

<script>

function openLogin(){

document.getElementById("win").style.display=""

}

function closeLogin(){

document.getElementById("win").style.display="none"

}

</script>

<a href="javascript:openLogin()">打开登录框</a>

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