老师请教一下问题

<!DOCTYPE html>
<html>
<head>
	<title>Career builder</title>
	<link rel="stylesheet" type="text/css" href="Website.css">
</head>
<body>
	<div class="header">
		<div class="logo"><img src="images/logo.png"></div>
		<div class="nav">
			<ul>
				<li>HOME</li>
				<li>ABOUT</li>
				<li>GALLERY</li>
				<li>FACULTY</li>
				<li>EVENTS</li>
				<li>CONTACT</li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<img src="images/banner3.jpg">
		<div class=bannerLayer></div>
		<div class="textArea">
			<input type="text" name="username" placeholder="your Name">
			<input type="text" name="userphone" placeholder="your Phone">
			<input type="text" name="useremail" placeholder="your Email">
			<textarea name="comment" placeholder="Write Your Comment Here"></textarea>
			<button>Send&nbsp;Message</button>
		</div>
	</div>
	<div class="main">
		<div class="about"></div>
		<div class="gallery"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

慕勒9893359 2019-04-24

源自：项目：网页布局案例 2-10 作业题

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-04-24 14:09:21

同学你好，可以参考下面的解释：

1、输入框这样写是可以的，没有问题。

2、文本框里的文字颜色需要输入才会和按钮中的字体颜色一致，如下：

输入框中的提示文字需要另外设置样式，参考：

3、同学说的是输入时候的这个效果吗？

这个阴影是输入框自带的，可以使用outline属性去掉，如下：

再次输入的时候就会是边框的颜色了：

如果鼠标不在输入框上，可以添加:focus代表的是聚焦时候的状态，如下：

4、是想让提示文字与输入框有些距离吗？可以使用text-indent文本缩进属性，例如：

如果想输入内容的时候也有间距，输入框上也需要添加：

5、现在测试的效果：

图片超出了表单，是因为图片高度没有控制。不同的显示器分辨率不同，宽度不同，显示效果也会不同，所以建议控制banner的高度，以及遮罩层和表单都相对于banner盒子进行定位，这样页面在变化的时候就不会改变了。参考：

可以重新测试下，祝学习愉快！

收起回答

提问者慕勒9893359 2019-04-24 06:40:27

请问输入框大体是这么写正确吗?
请问为什么文本框和按钮里的文字颜色不一样?
.如何设置文本框在输入状态时,边框颜色同hover一样也可以是#07cbc9, 我试过active但无效.
如何让文本框里的文字和边框有一定距离?是用padding-left吗?

收起回答

提问者慕勒9893359 #1

一个新的问题, 我在另一台电脑打开html,网页变形了,请问该怎么办呢? 课程里教的都是px为单位

2019-04-24 10:04:36

提问者慕勒9893359 2019-04-24 06:35:39

*{
	margin:0;padding:0;
}
/*头部底部结构*/
.header,.footer{
	width: 100%;
	height: 80px;
	background: #07cbc9;
}
/*头部样式*/
.header{
	position: fixed;
	z-index: 99999;
}
.header .logo{display: inline;}
.header .logo img{
	height:32px;
	width: 170px;
	display: inline-block;
	float: left;
	padding-top: 24px;
	padding-left: 100px;
}
.header .nav ul{
	float: right;
}
.header .nav ul li{
	display: inline;
	color: #ffffff;
	padding-right: 1.8em;
	line-height: 80px;
	font-size: 13px;
	font-weight: bold;
}
/*Banner区样式*/
.banner img{
	margin-top:80px;
	width: 100%;
	height: auto;
}
/*遮罩*/
.bannerLayer{
	width: 100%;
	height: 619.92px;
	opacity: 0.5;
	background: #000;
	position: absolute;
	top:80px;
	z-index: 2;
}
/*文本框样式*/
.textArea{
	position: absolute;
	width: 500px;
	height: 300px;
	top:50%;
	right: 50%;
	margin-right:-250px;
	margin-top:-150px;
	z-index:9;
}
.textArea input,.textArea textarea,.textArea button{
	border:1px solid #666;
	display:block;
	margin-bottom: 20px;
	background: transparent;
	color: #ffffff;
}
.textArea input{
	width: 500px;
	height: 40px;
}
.textArea textarea{
	width: 500px;
	height: 130px;
}
.textArea button{
	width: 130px;
	height: 40px;
	position: absolute;
	right: 50%;
	margin-right:-65px;
}
.textArea input:hover{
	border:#07cbc9 1px solid;
}
.textArea textarea:hover{
	border:#07cbc9 1px solid;
}
.textArea button:hover{
	background:#07cbc9;
}

收起回答