最近刚刚学了CSS,一直没怎么实践,今天就随手写一个比较好看的搜索框,通过Css来实现。虽然前端的工作大多是由前端设计师来完成的。但是这个也还是不错的,和大家分享一下。
<head>
<title>search</title>
<style>
body{
background:#333;
margin:0;
height:auto;
width:auto
}
.search-form{
background:#fff;
float:left;
margin-left:300px;
margin-top:200px;
}
.search-text{
float:left;
width:300px;
outline:none;
border:0
}
.search-button{
float:left;
width:60px;
font-size:14px;
color:#fff;
background:green;
outline:none
border:0px;
padding:0;
}
.top-div{
background:#aad;
height:50px;
}
</style>
</head>
<body>
<div class="top-div"></div>
<form class="search-form">
<input type="text" class="search-text"/>
<input type="submit" value="搜索" class="search-button"/>
</form>
</body>
实现的效果:
就是这样啦!