1、怎么设置input里背景颜色为透明状态；2、文本框无法输入内容；3、鼠标经过文本框时边框颜色不变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project1</title>
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo"><img src="images/logo.png"></div>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULITY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--中间部分-->
<div class="main">
<!--banner图-->
<div  class="banner">
<!--send message-->
<!--遮罩层-->
<div  class="layer"></div>
<form>
<input  class="inf" type="text" placeholder="your Name">
<p></p>
<input  class="inf" type="text" placeholder="your Phone">
<p></p>
<input  class="inf" type="text" placeholder="your Email">
<p></p>
<textarea placeholder="Write Your Comments Here" class="text" cols="30" rows="10"></textarea>
<p></p>
<button class="send">SENDMESSAGE</button>
</form>
</div>
<!--ABOUT区-->
<div class="about"></div>
<!--GALLERY区-->
<div class class="gallery"></div>
</div>
<!--页脚区-->
<div class="footer"></div>
</body>
</html>





*{
margin: 0;
padding:0;
}
.header{
background-color: #07cbc9;
width: 100%;
margin: 0 auto;
height: 80px;
float:left;

}
.header .clear{
clear:all;
}
.header .logo{
margin-left: 50px;
font-size: 40px;
float:left;
padding:15px;
width: 400px;
}
li:hover{
background-color: #000;
}
.header .nav{
float: right;
}
.header .nav ul{
margin-right:80px;
}
.header .nav ul li{
padding-top: 30px;
height:50px;
float:left;
font-size: 15px;
color:#ffffff;
list-style: none;
text-align:center;
margin-left:10px;
}
.main .banner{
width:100%;
height: 800px;
background: url("../images/banner3.jpg");
text-align: center;
}

.main .banner .layer{
top: 80px;
background-color: black;
background-color: rgba(0,0,0, 0.5);
position: absolute;
width:100%;
height:720px;
left:0px;
float:left;
}
.main .banner form {
text-align:center;
padding-top:300px;
}
.main .banner form .inf:hover{
border:2px #07cbc9 solid;
}
.main .banner form .inf{
width:480px;
height: 30px;
margin-top:10px;
border: 1px white solid;
color:white;
}
.main .banner form .text{
margin-top: 10px;
border: 1px white solid;
width:480px;
height: 90px;
color:white;
font-family: "Arial";
font-size:13.33px;
}
.main .banner form .send{
widows: 180px;
height: 30px;
margin-top:10px;
border: 1px white solid;
color:white;
text-align: center;
font-size:13.33px;
}

慕桂英8566455 2018-08-10

源自：网页布局案例 2-9 作业题

收起

2回答

好帮手慕阿莹 2018-08-12 12:21:43

同学可以把from用一个div包裹起来，设置一下这个div，例如，我给这个div的类名为 a，给它一个相对定位，并设置它的位置：

例如:

<div class="a">
<form>
<input  class="inf" type="text" placeholder="your Name">
<p></p>
<input  class="inf" type="text" placeholder="your Phone">
<p></p>
<input  class="inf" type="text" placeholder="your Email">
<p></p>
<textarea placeholder="Write Your Comments Here" class="text" cols="30" rows="10"></textarea>
<p></p>
<button class="send">SENDMESSAGE</button>
</form>
</div>

.main .banner .a {
z-index: 3;
width: 500px;
position: absolute;
top: 450px;
margin-top:-150px;
right: 50%;
margin-right: -250px;
text-align: center;
}

相关具体数值可以根据你的需求设置一下

如果我的回答解决了你的问题,请采纳,祝学习愉快.

收起回答