效果图：
html代码：
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<!--定义输入框和按钮-->
<input placeholder="关键字" class="searchInput" </input>
<input type="button" class="searchBtn"></input> <!--开始定义样式-->
<style>
/*设置输入框样式*/
.searchInput {
position:absolute; /*使用绝对定位*/
margin-left:200px; /*调整位置*/
width:300px; /*设置宽度*/
height:34px; /*设置高度*/
padding:2px 10px; /*内边距*/
font-family:"宋体"; /*设置字体*/
font-size:16px; /*设置字体大小*/
border:1px solid #f98e37; /*设置边框大小、样式、颜色*/
border-radius: 4px 0 0 4px; /*设置边框四个圆角*/
} /*设置输入框聚焦时样式*/
.searchInput:focus {
border-color:#51c6ea;
} /*设置按钮样式*/
.searchBtn {
position:absolute; /*使用绝对定位*/
margin-left:514px; /*调整位置*/
width: 50px; /*设置宽度*/
height: 40px; /*设置高度*/
border-style:none; /*取消按钮边框样式*/
border-radius: 0px 9px 9px 0px; /*设置边框的四个圆角*/
background: url(search.png) repeat center;/*设置按钮背景图片、平铺、居中*/
}
</style>
</body>
</html>
2017-09-29 10:15:42