经典课堂作业发blog
搜索功能可以用！！
图片已链接，代码复制既可用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度一下</title>
<style type="text/css">
.logo {
text-align: center;
}
.search {
text-align: center;
height: 44px;
}
.ipt {
width: 600px;
height: 44px;
padding: 0px 0px 0px 16px;
border-radius: 10px 0 0 10px;
border: 3px solid rgb(196, 199, 206);
outline: none;
font-size: 20px;
}
.ipt:hover {
border: 3px solid rgb(167, 170, 181);
}
.ipt:focus-visible {
border: 3px solid rgb(78, 110, 242);
}
.ipt1 {
width: 550px;
height: 44px;
padding: 0px 0px 0px 16px;
border-radius: 10px 0 0 10px;
border: 3px solid rgb(78, 110, 242);
}
.img {
display: inline-block;
background: #fff url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png);
width: 24px;
height: 24px;
z-index: 1;
background-position-y: -48px;
position: relative;
right: 40px;
top: 7px;
}
.img:hover {
background-position-y: -72px;
}
.btn {
z-index: 1;
width: 108px;
height: 50px;
position: relative;
right: 34px;
top: 0px;
border: none;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
color: #fff;
}
.btn:hover {
background-color: rgb(70, 98, 217);
}
.put {
height: 50px;
}
</style>
</head>
<body>
<!-- 占位置 -->
<div id="" class="put">
</div>
<!-- logo -->
<div id="" class="logo">
<a href="https://baidu.com"><img
src=" https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></a>
</div>
<!-- 占位置 -->
<div id="" class="put">
</div>
<!-- 搜索框 -->
<div id="" class="search">
<form action="https://www.baidu.com/s?" method="get">
<input type="text" name="wd" id="ip" class="ipt" value="" />
<span class="img"></span>
<input type="submit" name="" id="" class="btn" value="百度一下" />
</form>
</div>
</body>
</html>