效果图：
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