请老师检查
来源：7-4 项目作业
残泪
2021-06-17 16:35:46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目作业</title>
<style type="text/css">
div{
width: 100%;
height: 620px;
background-color:lightpink;
position: relative;
margin:-10px -10px -10px -10px;
}
input{
float: left;
background-color:lightpink;
margin: 1px;
border-color: red;
margin-left: 550px;
margin-top: 300px;
border: solid;
border-color:red;
}
button{
float: left;
background-color: red;
float: left;
font-family:宋体;
color: white;
margin-left:-5px;
margin-top: 300px;
border:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入..."><button>搜索</button>
</div>
</body>
</html>
写回答
1回答
-
好帮手慕小尤
2021-06-17
同学你好，1、根据效果图，需要整个页面背景色为粉红色，则建议同学为body进行设置。如下所示：
2、文本框与按钮并未居中显示，运行效果图如下所示：
修改建议：建议根据文本框与按钮修改宽度，然后div删除背景色外边距，文本框与按钮的间距、最后修改div定位为绝对定位并调整间距。修改后代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目作业</title>
<style type="text/css">
/* 设置宽度、高度、背景色与外边距*/
body{
width: 100%;
height: 100%;
margin: 0px;
background-color:lightpink;
}
div{
/* 宽度、高度*/
width: 220px;
height: 25px;
/* 绝对定位*/
position: absolute;
/*先向右移动百分之五十，然后再往回移动宽度的一半*/
left: 50%;
margin-left: -110px;
/*先向下移动百分之五十，然后再往回移动高度的一半*/
top: 50%;
margin-top: -12.5px;
}
input{
float: left;
background-color:lightpink;
border-color: red;
border: solid;
border-color:red;
}
button{
float: left;
background-color: red;
float: left;
font-family:宋体;
color: white;
border:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入..."><button>搜索</button>
</div>
</body>
</html>祝学习愉快！
0
