Html 3 css和htmt文本/javascript中的输入字段形式
嘿，我想知道是否有人能告诉我为什么我的ftp输入字段和用户名相互重叠^。^我无法解释。我给了ftp主机输入字段一个id，试图将其与用户名输入字段分开。如果能得到任何帮助，我将不胜感激 对不起，这是什么样子 下面是my style.ss，下面是my.htmlHtml 3 css和htmt文本/javascript中的输入字段形式,html,css,forms,input,Html,Css,Forms,Input,嘿，我想知道是否有人能告诉我为什么我的ftp输入字段和用户名相互重叠^。^我无法解释。我给了ftp主机输入字段一个id，试图将其与用户名输入字段分开。如果能得到任何帮助，我将不胜感激 对不起，这是什么样子 下面是my style.ss，下面是my.html body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-image: url(../images/bg-1.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url(../images/bg-1.jpg);
background-color: #363636;
}
.logo { top: -90px;
position: absolute;
left: 25%;
}
#box {
background: url(../images/box.png);
width: 504px;
height: 383px;
margin: 15% auto 0;
position: relative;
}
a.forgot {
display: block;
margin: 0 auto;
text-decoration: none;
width: 504px;
font-size:14px;
color: #ffffff;
text-align:center;
text-shadow:0px 1px 3px rgba(0,0,0,0.75);
}
a.forgot:hover {
color: rgba(255, 255, 255, .75);
}
h1 {
font-size:26px;
font-weight:bold;
text-align:center;
text-shadow:0px 1px 0px rgba(255,255,255,0.35);
position: absolute;
top: 55px;
text-align: center;
width: 504px;
opacity: 0.7;
}
#box form input[id='ftp'][type=text], #box form input[type=text], #box form input[type=password] {
position: absolute;
border: none;
background: url(../images/input.png);
display: block;
height: 162px;
width: 339px;
padding: 0 10px;
font-size:16px;
color:rgba(0,0,0,0.7);
text-align:left;
text-shadow:0px 1px 0px rgba(255,255,255,0.28);
}
#box form input[id='ftp'][type=text]:focus , #box form input[type=text]:focus, #box form input[type=password]:focus {
outline: none;
opacity: 1;
background-position: 0 -54px;
}
#box form input[id='ftp'][type=text]{
left: 82px;
top: 120px;
}
#box form input[type=text]{
left: 82px;
top: 60px;
}
#box form input[type=password]{
left: 82px;
top: 180px;
}
#box form input[type=checkbox] {
position: absolute;
left: 300px;
top: 268px;
opacity: 0.8;
}
#box form label {
position: absolute;
left: 320px;
top: 269px;
font-size:14px;
color:rgba(255,255,255,0.8);
text-align:left;
text-shadow:0px 1px 0px rgba(0,0,0,0.17);
}
#box form label:hover {
color:rgba(255,255,255,1);
}
#box form input[type=button], #box form input[type=submit] {
background: url(../images/button.png) no-repeat;
border: none;
display: block;
position: absolute;
top: 255px;
left: 84px;
width: 203px;
height: 44px;
cursor: pointer;
font-size:16px;
font-weight:bold;
text-align:center;
color: #333;
text-shadow:0px 1px 0px rgba(255,255,255,0.35);
}
#box form input[type=button]:hover, #box form input[type=submit]:hover{
background-position: 0 -44px;
}
#box form input[type=button]:active, #box form input[type=submit]:active{
background-position: 0 -88px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/flexi-background.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
</head>
<body>
<script src="js/flexi-background.js" type="text/javascript" charset="utf-8"></script>
<div id="box">
<img src="images/logo.png" class="logo" alt="yourlogo" />
<form>
<input type="text" id='ftp/' onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'ftp':this.value;" value="ftp://" />
<input type="text" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Username':this.value;" value="Username" />
<input type="password" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" value="Password">
<input type="checkbox" id="remember" value="Remember" />
<div class="hover-opacity"><label for="remember">store details</label></div>
<input type="button" name="" value="Log In" />
</a>
</form>
</body>
</html>
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
背景图片：url（../images/bg-1.jpg）；
背景色：#363636；
}
.logo{top:-90px；
位置：绝对位置；
左：25%；
}
#盒子{
背景：url（../images/box.png）；
宽度：504px；
身高：383px；
利润率：15%自动0；
位置：相对位置；
}
a、 忘了{
显示：块；
保证金：0自动；
文字装饰：无；
宽度：504px；
字体大小：14px；
颜色：#ffffff；
文本对齐：居中；
文本阴影：0px 1px 3px rgba（0,0,0,0.75）；
}
a、 忘记：悬停{
颜色：rgba（255、255、255、75）；
}
h1{
字号：26px；
字体大小：粗体；
文本对齐：居中；
文本阴影：0px 1px 0px rgba（255255255,0.35）；
位置：绝对位置；
顶部：55px；
文本对齐：居中；
宽度：504px；
不透明度：0.7；
}
#盒式表单输入[id='ftp'][type=text]，#盒式表单输入[type=text]，#盒式表单输入[type=password]{
位置：绝对位置；
边界：无；
背景：url（../images/input.png）；
显示：块；
高度：162px；
宽度：339px；
填充：0 10px；
字体大小：16px；
颜色：rgba（0,0,0,0.7）；
文本对齐：左对齐；
文本阴影：0px 1px 0px rgba（255255255,0.28）；
}
#框式表单输入[id='ftp'][type=text]：焦点，#框式表单输入[type=text]：焦点，#框式表单输入[type=password]：焦点{
大纲：无；
不透明度：1；
背景位置：0-54px；
}
#框形式输入[id='ftp'][type=text]{
左：82px；
顶部：120px；
}
#框形式输入[类型=文本]{
左：82px；
顶部：60px；
}
#框形式输入[类型=密码]{
左：82px；
顶部：180像素；
}
#框形式输入[类型=复选框]{
位置：绝对位置；
左：300px；
顶部：268px；
不透明度：0.8；
}
#盒形标签{
位置：绝对位置；
左：320px；
顶部：269px；
字体大小：14px；
颜色：rgba（255255,0.8）；
文本对齐：左对齐；
文本阴影：0px 1px 0px rgba（0,0,0,0.17）；
}
#框窗体标签：悬停{
颜色：rgba（255255,1）；
}
#框式表单输入[类型=按钮]，#框式表单输入[类型=提交]{
背景：url（../images/button.png）不重复；
边界：无；
显示：块；
位置：绝对位置；
顶部：255px；
左：84px；
宽度：203px；
高度：44px；
光标：指针；
字体大小：16px；
字体大小：粗体；
文本对齐：居中；
颜色：#333；
文本阴影：0px 1px 0px rgba（255255255,0.35）；
}
#框式表单输入[类型=按钮]：悬停，#框式表单输入[类型=提交]：悬停{
背景位置：0-44px；
}
#方框表单输入[类型=按钮]：激活，#方框表单输入[类型=提交]：激活{
背景位置：0-88px；
}
商店详情
#box form input[id='ftp'][type=text]{
left: 82px;
top: 120px;
}
#box form input[type=text]{
left: 82px;
top: 60px;
}
#box form input[type='text'] {
left: 82px;
top: 60px;
}
#box form #ftp {
top: 120px;
}
再一次，我觉得有义务推荐您学习css定位，这样您就不会过度使用position:absolute 进一步阅读：
- /css/定位/
- 您面临这个问题，因为您几乎对每个表单元素都使用了绝对定位。如果仔细观察，您实际上将ftp和username表单元素的最大值都设置为相同的值。这就是它们重叠的原因。将其设置为“相对”将解决您的问题
您肯定应该避免这种定位元素的方式，因为这样会让您头痛。但是，如果您仍然必须使用绝对定位，只需确保您输入的值不相同即可
#box form input[id="ftp"][type="text"], #box form input[type="text"], #box form
input[type="password"] {
position: absolute;// Set this to relative
....
....
}
您应该将代码上载到，以便我们可以使用它。无论如何，
logo{top:-90px绝对位置