用Dreamweaver做登录界面常用的div布局框架html骨架
feilong.org 修订于2009-05-21 10:24:00 316 次浏览下面是登录界面常用的div布局框架html骨架，主要用div background 用来放背景图片、div denglu用来放登录部分的装饰、还有一个ul 无序列表用来做登录表单的控件。呵呵这是飞龙临时做的，回答网友的对话dreamweaver显示正常到visualstudio变样两个原因，呵呵。但是不知飞龙做的这网页符合div+css标准与否？与朋友们讨论。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录界面的骨架==飞龙博客 feilong.org </title>
<style>
#bottom {
width:1024px;
height: 408px;
border:0px;
margin:0 auto;
float:left;
}
.denglu {
height: 100px;
width: 210px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #CCC;
padding-top: 100px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.denglu ul li {
line-height: 22px;
height: 22px;
list-style-type: none;
float: left;
list-style-position: inside;
list-style-image: none;
display: block;
margin: 0px;
width: 200px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.denglu ul {
margin: 0px;
padding: 0px;
}
.input001 {
height: 20px;
width: 120px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #999;
border-bottom-color: #999;
border-left-color: #666;
}
.background {
background-color: #F00;
height: 400px;
width: 600px;
margin-top: 100px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
body {
font-size: 14px;
color: #333;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="background">
<div class="denglu">
<ul>
<li>用户名：<input type="text" name="textfield" id="textfield" class="input001"
/></li>
<li>密 码： <input type="text" name="textfield" id="textfield" class="input001"
/></li>
<li>验证：等等等 </li>
</ul>
</div></div>
</body>
</html>
博主：飞龙.org
更新：http://feilong.org/div-login-html
网络资料，朋友共享，地址栏输入 feilong.org 即可
更新网址：https://feilong.org/div-login-html
最初发布：20090521 10:24:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发