为了账号安全,请及时绑定邮箱和手机立即绑定
课程 \ 搜索框制作

搜索框制作

1-6 实战题
<html>
<head>
<title>bing search</title>
<style type="text/css">
body{background-color: #333;}
.bg-div{
position:relative;
text-align:center;
margin: 0 auto;
height: 690px;
width: 1228px;
background-image: url(http://img1.sycdn.imooc.com//52da5e7d0001c0f813660768.jpg);
}
.logo{
float:left;
background: url(http://img1.sycdn.imooc.com//52da5e530001eea901070053.jpg) no-repeat;
margin: -4px 18px 0 0;
height: 53px;
width: 107px;
}
.search-warp{
float:left;
background-color:#fff;
width:407px;
padding:5px;
}
.search-input{
float:left;
border: 0;
font-size: 100%;
width: 375px;
outline: none;/**/
height:29px;
line-height:25px;
}
.search-submit{
float:left;
cursor:pointer;
height: 29px;
width: 29px;
background: transparent url(http://img1.sycdn.imooc.com//52da5df800012b1e02220137.jpg) no-repeat -30px -107px;
border: 0;
}
.search-box{
position:absolute;
top:20%;
left:8%;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
<input class="search-input" type="text" name="q">
<input class="search-submit" type="submit" value=""/>
</form>
</div>
</div>
</body>
</html>
2019-04-19 查看完整代码
意见反馈 帮助中心 APP下载
官方微信