飞龙博客

深入经藏 智慧如海

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

feilong.org 修订于2009-05-21 10:34:33 2,765

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

更新网址:http://feilong.org/div-login-html
最初发布:20090521 10:24:00 feilong.org 于广州

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

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群