用Dreamweaver做登录界面常用的div布局框架html骨架 = 飞龙博客

用Dreamweaver做登录界面常用的div布局框架html骨架

feilong.org 修订于2009-05-21 10:24:00 378 次浏览

下面是登录界面常用的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>

<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 于广州

加入收藏夹，查看更方便。

所在分类：网站开发

新作：五个办法让dreamweaver或php或net代码排列整齐美观

旧文：对话dreamweaver显示正常到aspnet变样