文本框无法自适应浏览器
css======
*{
padding:0px;
margin:0px;
}
.header{
width: 100%;
height: 53px;
background-color:#07cbc9;
margin: 0px auto;
}
.header .logo{
float: left;
margin-left: 50px;
}
/*菜单导航样式设置*/
.menus{
float:right;
margin-top: 16px;
margin-right: 50px;
}
/*鼠标划过的样式设置*/
.menus a:hover{
padding-top: 16px;
padding-bottom: 15px;
background-color:black;
}
.banner img{
width: 100%;
height: 100%;
}
/*超链接去下划线样式设置*/
a{
color:#ffffff;
text-decoration: none;h
}
.input0{
top:-390px;
position: relative;
float:fixed;
text-align: center;
}
input{
width: 300px;
height: 30px;
margin: 2px auto 2px auto;
}
textarea{
margin-top: 2px;
}
html=========
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css\common.css">
<script type="text/javascript" src="js\js1.js"></script>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images\logo.png">
</div>
<div class="menus">
<span class="home1"><a href="">HOME</a></span>  
<span class="about1"><a href="">ABOUT</a></span>  
<span class="gallery1"><a href="">GALLERY</a></span>  
<span class="faculty1"><a href="">FACULTY</a></span>  
<span class="events1"><a href="">EVENTS</a></span>  
<span class="contact1"><a href="">CONTACT</a></span>
</div>
</div>
<form>
<div class="banner">
<div><img src="images/banner3.jpg"></div>
<div class="input0">
<input type="text" name="yourname" value="your Name"><br>
<input type="text" name="yourphone" value="your Phone"><br>
<input type="text" name="youremail" value="your Email"><br>
<textarea rows="5" cols="48" name="write">Write Your Comment Here</textarea>
</div>
</div>
</form>
<div class="about"></div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
老师, 文本框无法自适应浏览器, 而且浏览器缩放会破坏布局,哪里的问题!
正在回答 回答被采纳积分+1
同学你好。同学的文本框无法自适应，指的是文本框部分会随着浏览器窗口缩小而“飘”吗？这是因为同学使用了相对定位。
1、首先float不能设置为fix，float只能设置为left\right\none\inherit。position有fix选项，代表绝对定位。
position如果设置为relative，是指生成相对定位的元素，相对于其正常位置进行定位。在这里应该将position设置为absolute，代表绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
然后给这个元素一个top值和right值，top值先设置为图片高度的一半，这样上边缘在竖直的中心位置，然后设置margin-top为负，把元素往回拉表单的高度的一半，则表单的中间线到了竖直方向的中心。左右也是同理。将input0的CSS样式修改为:
.input0 {
z-index: 2;
width: 500px;
position: absolute;
top: 350px;
margin-top: -150px;
right: 50%;
margin-right: -250px;
text-align: center;
}2、文本框划过改变边框颜色，适合使用hover伪类。在input上设置hover时的样式，就只在划过时产生效果，可以给所有想划过时产生效果的元素添加class属性text，然后给text的hover设置样式。
.text:hover {
border: 2px solid #07cbc9;
}如果解答了同学的疑问，望采纳~
祝学习愉快~
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星