這個搜索框做的很好，看似簡單，里面包含了大量CSS基礎知識。由于時間關系，這里寫了一個相似度為95%的樣式供參考和學習，由于無法確認字體，先挑選了比較接近的Gautami
創(chuàng)新互聯(lián)主營渦陽網站建設的網絡公司,主營網站建設方案,手機APP定制開發(fā),渦陽h5重慶小程序開發(fā)搭建,渦陽網站營銷推廣歡迎渦陽等地區(qū)企業(yè)咨詢
先上HTML
body
div?id="A"
input?id="inputTxt"?type="text"?placeholder="Search"?/
div?id="inputBtn"Go/div
/div
/body
這里開始寫CSS
body?{?padding:?0;?margin:?0;?background:?#D6D6D6;?}
/*固定容器*/
#A?{?width:?316px;?height:?28px;?margin:?22%?auto;?border:?1px?solid?#A3A3A3;?border-top-color:?#939393;?border-bottom-color:?#D5D5D5;?border-radius:?3px;?box-shadow:?0px?1px?1px?#f4f4f4;?position:?relative;?}
#A??*?{?position:?absolute;?top:?0;?}
/*輸入框*/
#inputTxt?{?left:?0;?width:?246px;?height:?24px;?background:?#E6E6E6;?border:?0;?border-top:?1px?solid?#C8C8C8;?border-bottom:?1px?solid?#E6E6E6;?outline:?none;?padding-left:?30px;?color:?#666;?}
#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?color:?#B8B8B8;?font:?600?13px?'Gautami';?}
/*按鈕*/
#inputBtn?{?right:?0;?width:?38px;?height:?26px;?line-height:?26px;?background:?linear-gradient(#E4E4E4,?#B5B5B5);?border:?1px?solid?transparent;?border-top-color:?#FCFCFC;?border-left-color:?#ADADAD;?border-bottom-color:?#B5B5B5;?color:?#6E6E6E;?text-align:?center;?font-size:?smaller;?font-weight:?bold;?cursor:?pointer;?}
/*文字陰影*/
#inputTxt,?#inputBtn,?#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?text-shadow:?1px?1px?0px?#fff;?}
/*圖標*/
#A:before,?#A:after?{?content:?"";?position:?absolute;?z-index:?2;?box-shadow:?0px?1px?0px?#fff;?}
#A:before?{?left:?9px;?top:?9px;?width:?6px;?height:?6px;?border:?2px?solid?#ccc;?border-radius:?50%;?}
#A:after?{?left:?17px;?top:?18px;?width:?6px;?height:?2px;?background:?#ccc;?transform:?rotate(45deg);?-webkit-transform:?rotate(45deg);?-o-transform:?rotate(45deg);?}
最后，上效果圖：上為原始搜索框，下為本次代碼實現(xiàn)的搜索框
.search/*整個搜索框*/{
width:300px;
height:30px;
background-image: url(../images/search.gif)/*這是這個搜索框的背景*/;
background-repeat: no-repeat;
background-position: 50%;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
padding: 0px;
overflow: hidden;
clear: both;
}
.search input/*用來去掉搜索框里的文本框和按鈕的背景和邊框，并設置并列排放*/{
border:none;
background:none;
float:left;
}
.search_box/文本框樣式/{
width:150px;
height:26px;
line-height:26px;
padding:0px;
color:#999999;
text-align:left;
margin-top: 2px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 10px;
float: left;
}
.search_button/*按鈕樣式*/{
width:45px;
height:27px;
cursor:pointer;
color:#000000;
font-size: 14px;
}
具體樣式可根據自己的需要調整。
希望對你有所幫助。
如果你的圖片不是背景圖
1、給你的背景圖的div添加一個樣式 position:relative;
2、給你的搜索框的div添加一個樣式 position:absolute;right:數(shù)值px;top:數(shù)值px;
如果你的圖片是背景圖
那就很簡單了，直接在div 里面添加一個輸入框和一個提交按鈕即可。
input type="text" value="輸入關鍵詞" class="text" /
input type="button" value="搜索" class="button" /
再給這2個input框添加獨立的樣式就行了。
INPUT.text{}
INPUT.button{}
望采納
設置style的屬性或者增加，class樣式調用，改變背景、邊框、字體大小等修改成你要的效果即可
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"
html?xmlns="
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
title無標題文檔/title
script?type="text/javascript"?src="jquery.js"/script
style
.{?padding:0;?margin:0;?list-style:none;}
.htmlBox{?width:100%;?min-width:500px;?height:500px;?border:1px?solid?#A349A4;?border-radius:5px;}
.sskBox{?width:100%;?height:35px;?margin-top:150px;?border:1px?solid?#000;?border-left:0;?border-right:0;}
.zc{?width:100px;?height:35px;?float:left;}
.zj{?width:250px;?height:35px;?float:left;?border-left:1px?solid?#000;?border-right:1px?solid?#000;}
.yc{?height:35px;?float:right;}
/style
/head
body
div?class="htmlBox"
div?class="sskBox"
div?class="zc"左邊100/div
div?class="zj"中間250/div
div?class="yc"右邊自適應/div
/div
/div
/body
script
tmntH();//加載的時候執(zhí)行一次
$(window).resize(function()?{tmntH();});//瀏覽器窗口變化時執(zhí)行
function?tmntH()
{
var?ycw=$(".sskBox").width()-352+'px';//yc的寬度等于sskBox寬度-350-2(邊框線)
//alert(div3);
$(".yc").css("width",ycw);
}
/script
/body
/html
在html中添加一個input框和button搜索按鈕即可，css中修改這個搜索框和按鈕的樣式讓它更美觀一些即可。
重慶分公司
重慶分公司
