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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<!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;
}