css怎么制作一个登录页面

html-css016

css怎么制作一个登录页面,第1张

CSS+HTML可以制作一个登录静态页面，做不了动态页面。

表单代码：

<form name="form" method="POST" action="">

<input type="text" value="用户名" />

<input type="password" value="密码" />

<input type="submit" name="button" value="登录" class="xiaoka_tj"/>

</form>

1、按照正常的思路，布局就是div布局，写一个固定下来，作为模板，在每次获取数据的时候使用功能代码绑定数据到布局上面，自动生成页面内容就可以了。

拆分出单个模板来，很明显每项都是一样的

就这个样式写div+css不会吗？

两层div 的嵌套，里面布局排文本标签，image标签就可以了，绑定id填数据，或者遍历填数据。

简单布局是一种，再就是

这种

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

body,td,th {font-family: Verdana, Arial, Helvetica, sans-seriffont-size: 12px}

body {margin: 0pxtext-align:centermargin:0px auto}

ul{margin: 0pxpadding:0pxborder: medium noneline-height: normallist-style-type: none}

li{position:relativefloat:left}

#bigarea{width:86%text-align:centermargin:0px auto}

#bigarea .area01{ text-align:left}

#bigarea .area02{ width:80%text-align:leftcolor:#006633line-height: 20pxfont-weight: boldfont-style: normal}

#bigarea .area03{ width:80%}

#bigarea .area04{ width:80%text-align:rightclear:both}

#bigarea .area05{ text-align:leftclear:both}

#con li{ width:49%text-align:leftword-break:newspaper}

-->

</style></head>

<body>

<div id="bigarea">

<div class="area01"><img src="" width="446" height="39" /></div>

<div class="area02">兴趣爱好:</div>

<div class="area03">

<ul id="con">

<li>足球</li>

<li>足球</li>

<li>足球</li>

<li>足球</li>

<li>足球</li>

<li>足球</li>

</ul>

</div>

<div class="area04"><img src="" width="70" height="17" /></div>

<div class="area05"><img src="" width="446" height="17" /></div>

</div>

</body>

</html>