css中怎么給網頁設置一個搜索框

在html中添加一個input框和button搜索按鈕即可，css中修改這個搜索框和按鈕的樣式讓它更美觀一些即可。

成都創新互聯成立于2013年，是專業互聯網技術服務公司，擁有項目網站設計、成都網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元安陽縣做網站,已為上家服務,為安陽縣各地企業和個人服務,聯系電話:13518219792

CSS搜索框樣式

這個搜索框做的很好，看似簡單，里面包含了大量CSS基礎知識。由于時間關系，這里寫了一個相似度為95%的樣式供參考和學習，由于無法確認字體，先挑選了比較接近的Gautami

先上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);?}

最后，上效果圖：上為原始搜索框，下為本次代碼實現的搜索框

搜索框css樣式

!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();//加載的時候執行一次

$(window).resize(function()?{tmntH();});//瀏覽器窗口變化時執行

function?tmntH()

{

var?ycw=$(".sskBox").width()-352+'px';//yc的寬度等于sskBox寬度-350-2(邊框線)

//alert(div3);

$(".yc").css("width",ycw);

}

/script

/body

/html

網站標題：搜索框css樣式,css百度搜索框樣式
標題來源：http://vcdvsql.cn/article36/dsdepsg.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、搜索引擎優化、企業網站制作、定制網站、小程序開發、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯