搜索框css樣式

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"

成都創(chuàng)新互聯(lián)公司專注于衡東網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供衡東營銷型網(wǎng)站建設(shè)，衡東網(wǎng)站制作、衡東網(wǎng)頁設(shè)計(jì)、衡東網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造衡東網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供衡東網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

html?xmlns="

head

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/

title無標(biāo)題文檔/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"右邊自適應(yīng)/div

/div

/div

/body

script

tmntH();//加載的時(shí)候執(zhí)行一次

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

function?tmntH()

{

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

//alert(div3);

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

}

/script

/body

/html

CSS搜索框樣式

這個(gè)搜索框做的很好，看似簡單，里面包含了大量CSS基礎(chǔ)知識。由于時(shí)間關(guān)系，這里寫了一個(gè)相似度為95%的樣式供參考和學(xué)習(xí)，由于無法確認(rèn)字體，先挑選了比較接近的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;?}

/*圖標(biāo)*/

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

最后，上效果圖：上為原始搜索框，下為本次代碼實(shí)現(xiàn)的搜索框

前端如何快速尋找到css樣式的位置

CSS樣式實(shí)現(xiàn)快速定位bug的六大技巧

1、檢查是否清除浮動

其實(shí)有不少的CSSBUG問題是因?yàn)闆]有清除浮動造成的。養(yǎng)成良好的清除浮動的習(xí)慣是必要的，推薦使用無額外HTML標(biāo)簽的清除浮動的方法（盡量避免使用overflow:hidden;zoom:1的類似方法來清除浮動，會有太多的限制性）。

2、檢查IE下是否觸發(fā)haslayout

很多的IE下復(fù)雜CSS BUG都與IE特有的haslayout息息相關(guān)。熟悉和理解haslayout對于處理復(fù)雜的CSSBUG會事半功倍。推薦閱讀old9翻譯的《Onhavinglayout》（如果無法翻越穿越偉大的GFW，可閱讀藍(lán)色上的轉(zhuǎn)帖）

快捷提示：如果觸發(fā)了haslayout，IE的調(diào)試工具IEDeveloperToolbar中的屬性中將會顯示haslayout值為-1。

3、邊框背景調(diào)試法

故名思議就是給元素設(shè)置顯眼的邊框或者背景（一般黑色或紅色），進(jìn)行調(diào)試。此方法是最常用的調(diào)試CSSBUG的方法之一，對于復(fù)雜BUG依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保.

4、檢查頁面的標(biāo)簽是否閉合

不要小看這條，也許折騰了你兩天都沒有解決的CSS BUG問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發(fā)來嵌套的，而他們很容易犯此類問題。

快捷提示：可以用Dreamweaver打開文件檢查，一般沒有閉合的標(biāo)簽，會黃色背景高亮。

5、樣式排除法

有些復(fù)雜的頁面也許加載了N個(gè)外鏈CSS文件，那么逐個(gè)刪除CSS文件，找到BUG觸發(fā)的具體CSS文件，縮小鎖定的范圍。

對于剛才鎖定的問題CSS樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。

6、模塊確認(rèn)法

有時(shí)候我們也可以從頁面的HTML元素出發(fā)。刪除頁面中不同的HTML模塊，尋找到觸發(fā)問題的HTML模塊。

css+div中搜索框怎么寫

.search/*整個(gè)搜索框*/{

width:300px;

height:30px;

background-image: url(../images/search.gif)/*這是這個(gè)搜索框的背景*/;

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/*用來去掉搜索框里的文本框和按鈕的背景和邊框，并設(shè)置并列排放*/{

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;

}

具體樣式可根據(jù)自己的需要調(diào)整。

希望對你有所幫助。

網(wǎng)頁題目：css搜索樣式,css樣式列表
鏈接URL：http://chinadenli.net/article32/dsidpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、自適應(yīng)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司

廣告

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