效果圖：

html代碼：

 

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<!--定義輸入框和按鈕-->
<input placeholder="關(guān)鍵字" class="searchInput" </input>
<input type="button" class="searchBtn"></input>

<!--開始定義樣式-->
<style>
/*設(shè)置輸入框樣式*/
.searchInput {
        position:absolute;                  /*使用絕對(duì)定位*/
        margin-left:200px;                 /*調(diào)整位置*/
        width:300px;                      /*設(shè)置寬度*/
        height:34px;                     /*設(shè)置高度*/
        padding:2px 10px;               /*內(nèi)邊距*/
        font-family:"宋體";             /*設(shè)置字體*/
        font-size:16px;               /*設(shè)置字體大小*/
        border:1px solid #f98e37;    /*設(shè)置邊框大小、樣式、顏色*/
        border-radius: 4px 0 0 4px; /*設(shè)置邊框四個(gè)圓角*/
}

/*設(shè)置輸入框聚焦時(shí)樣式*/
.searchInput:focus {
        border-color:#51c6ea;
}

/*設(shè)置按鈕樣式*/
.searchBtn {
        position:absolute;                              /*使用絕對(duì)定位*/
        margin-left:514px;                             /*調(diào)整位置*/
        width: 50px;                                  /*設(shè)置寬度*/
        height: 40px;                                /*設(shè)置高度*/
        border-style:none;                          /*取消按鈕邊框樣式*/
        border-radius: 0px 9px 9px 0px;            /*設(shè)置邊框的四個(gè)圓角*/             
        background: url(search.png) repeat center;/*設(shè)置按鈕背景圖片、平鋪、居中*/
}
</style>
</body>
</html>

 2017-09-29 10:15:42