飞龙博客

feilong.org

用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>

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

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

所在分类: 网站开发

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认