练习完成，帮忙看下边框为什么会泛黑色，还有哪里可以优化。

来源：7-4 项目作业

星岳神话

2021-06-17 21:54:03

html：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>项目作业</title>
	<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
	<div class="div1">
		<div class="div2">
		    <input type="text" class="input1" placeholder="请输入..." >
		    <input type="button" class="button1" value="搜索">
		</div>
	</div>
</body>
</html>

css：

.div1{
	width: 100%;
	height: 100%;
	background-color: pink;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
.div2{
	top: 45%;
	left: 45%;
	position: relative;
}
.input1{
	border-color: red;
	background-color: pink;

}
.button1{
	border-color: red;
	background-color: red;
	height: 23px;
	color: white;
	margin-left: -5.5px;
	top: 2px;
	position: relative;
}

写回答

1回答

好帮手慕小脸

2021-06-18

同学你好，

1、点击input框时，边框出现黑色这是input默认的，这里同学可以添加如下属性将其去掉：

outline:none;

2、根据效果图演示，input框与搜索按钮是贴合的

这里同学可以设置一个input框，一个button按钮，然后对其进行浮动。修改如下：

.div1{
	width: 100%;
	height: 100%;
	background-color: pink;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
.div2{
	top: 45%;
	left: 45%;
	position: relative;
}
.input1{
	float: left;
	background-color:lightpink;
	border: solid;
	border-color:red;
	outline:none;
}
.button1{
	float: left;
	background-color: red;
	font-family:宋体;
	color: white;
	border:solid;
	border-color:red;
	outline:none;
}

祝学习愉快~

0 学习 · 16556 问题

查看课程

相似问题

将父元素的定位方式从绝对改为相对，红色正方形微调

回答 2

麻烦老师帮忙检查一下

回答 1

回答 2

回答 1

老师，麻烦检查一下有什么问题，有没有多余的步骤

回答 1

打开慕课网App查看更多内容