banner区文本框居中与浮动
来源：4-3 项目作业
hei嘿嘿
2019-08-10 23:39:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>project2</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body >
<div class="header">
<div class="header_img">
<img src="images/logo.png">
</div>
<div class="header_list" onmouseover="init()" >
<ul id="list">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner3.jpg">
<div class="banner_content">
<input type="text" name="" placeholder="your Name" />
<input type="text" name="" placeholder="your Phone" />
<input type="text" name="" placeholder="your Email" />
<textarea name="" placeholder="White Your Comment Here" ></textarea>
<input type="button" name="" value="SEND MESSAGE" />
</div>
</div>
<div class="about">
</div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
.banner{
width: 100%;
height: 600px;
top: 100px;
position: absolute;
}
.banner img{
width: 100%;
height: 600px;
float: left;
opacity: 2;
vertical-align: bottom;
}
.banner .banner_content{
width: 100%;
height: 600px;
margin:auto;
text-align: center;
}
.banner .banner_content input{
width: 400px;
height: 35px;
background-color: transparent;
position: absolute;
}
.banner .banner_content textarea{
width: 200px;
height:100px;
position: absolute;
background-color: transparent;
}
老师，我这样写这些文本框都跑最右边去了，整个浏览器要左右拉了，这是怎么回事啊
1回答
-
同学你好，这个是因为同学的这个图片并不是在文本框的下边，而是单独占据了这个宽度，建议同学可以不这个图片设置成banner的背景图片：
并去掉图片：
然后在调整文本框的位置即可呦。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题