使用div+css的方式简单实现一个如图所示的登录界面，要求如下：
1）登录部分（灰色部分）的宽度为300px，在整个页面中央显示；
2）登录部分背景色为#CCC，字体颜色为#FF0000：
生来孤独 2楼
<style>
.topdiv{
background-color:gray;
}
topdiv input{
color:black;
}
.div1 input{
background-color:#ccc;
text-align:center;
}
</style>
<div class="topdiv">
<form>
账号:<input type="text">
密码:<input type="password">
<div class="div1">
<input type="text"value="登录"name="dl">
</form>
</div>
温柔小王子 11楼
<!--格式错误，重发一下-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单登录界面</title>
<style>
.content{
width: 300px;
margin: auto auto;
background-color: #CCC;
border: 1px black solid;
color: #FF0000;
}
h3{
font-size: 16px;
width: 100%;
text-align: center;
}
label{
display: inline-block;
width: 80px;
text-align: right;
}
.term{
margin: 10px 0;
}
input[type="submit"]{
color: #FF0000;
}
</style>
</head>
<body>
<form action="" method="post" class="content">
<h3>登录界面</h3>
<div class="term">
<label>用户名:</label><input type="text"/>
</div>
<div class="term">
<label>密码:</label><input type="password"/>
</div>
<div class="term">
<label></label>
<input type="submit" value="登录" />
</div>
</form>
</body>
</html>
大鹏鸟3962 13楼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
#container{
width: 300px;
background-color: orange;
margin: 0 auto;
padding: 20px;
}
span{
width: 80px;
height: 40px;
line-height: 40px;
margin-left: 20px;
color: white;
display: inline-block;
text-align: right;
}
input{
height: 30px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="name">
<span>name</span>
<input type="text">
</div>
<div id="password">
<span>password</span>
<input type="password">
</div>
</div>
</body>
</html>
菜鸟程序猿 14楼
<style>
.topdiv { width:300px; margin: 0 auto;}
topdiv form{color:#FF0000;}
.div1 input{ background-color:#ccc; text-align:center;}
</style>
<div class="topdiv">
<form>
账号:<input type="text">
密码:<input type="password">
<div class="div1">
<input type="text"value="登录"name="dl">
</form>
</div>
京公网安备 11010802034997号