① 請問如和用div+css樣式 做圖所示的搜索欄
主要是使用html的表單標簽，<input type=text>這是前面的輸入框，
下拉菜單用:<select>
<option>可選擇的內容</option>
</select>
後面的搜索按鈕有背景圖片，最後使用CSS+DIV對樣式進行定義，就能實現一摸一樣的效果。
② 前端如何快速尋找到css樣式的位置
CSS樣式實現快速定位bug的六大技巧
1、檢查是否清除浮動
其實有不少的CSSBUG問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用無額外HTML標簽的清除浮動的方法（盡量避免使用overflow:hidden;zoom:1的類似方法來清除浮動，會有太多的限制性）。
2、檢查IE下是否觸發haslayout
很多的IE下復雜CSS BUG都與IE特有的haslayout息息相關。熟悉和理解haslayout對於處理復雜的CSSBUG會事半功倍。推薦閱讀old9翻譯的《Onhavinglayout》（如果無法翻越穿越偉大的GFW，可閱讀藍色上的轉帖）
快捷提示：如果觸發了haslayout，IE的調試工具IEDeveloperToolbar中的屬性中將會顯示haslayout值為-1。
3、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試CSSBUG的方法之一，對於復雜BUG依舊適用。經濟實惠還環保.
4、檢查頁面的標簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的CSS BUG問題，卻僅僅源於這里。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用Dreamweaver打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。
5、樣式排除法
有些復雜的頁面也許載入了N個外鏈CSS文件，那麼逐個刪除CSS文件，找到BUG觸發的具體CSS文件，縮小鎖定的范圍。
對於剛才鎖定的問題CSS樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。
6、模塊確認法
有時候我們也可以從頁面的HTML元素出發。刪除頁面中不同的HTML模塊，尋找到觸發問題的HTML模塊。
③ 如何使用css做出這種搜索框
僅僅css是不夠的，還要結合html才行。兩者結合起來，所向無敵，靜態頁面分分鍾搞定。
④ 請問怎麼樣寫html和css才能讓搜索引擎更有效抓取內容
單純從你的問題上來說,HTML里修改的也是CSS 樓主想問的應該是DIV+CSS和普通的直接寫CSS的區別吧 首先,獨立的CSS會把頁面上的樣式寫到獨立的CSS文件中 好處是搜索引擎抓取的時候不是看你頁面的外觀,而是看本質,也就是看你頁面展現在前台的HTML代碼 如果內容以外的代碼量過大對搜索引擎的抓取會有一定影響 所以單獨出來的CSS文件搜索引擎是不會去檢索的 這樣同樣內容的頁面，搜索引擎在單獨CSS文件的網站上檢索花費的時間就要比寫到頁面內的要少 其次就是後期維護了 一個網站肯定不會是一個頁面，很多的樣式都是可以重復利用的 你寫到頁面內那就說明你所有頁面都要把重復的再寫一次,如果有更改...可想而知得改多少地方 可是放到單獨的CSS文件內就不同了 只需要把定義的樣式更改就可以了
⑤ css+div中搜索框怎麼寫
.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;
}
具體樣式可根據自己的需要調整。
希望對你有所幫助。
⑥ css怎樣更改搜索框
設置style的屬性或者增加，class樣式調用，改變背景、邊框、字體大小等修改成你要的效果即可
⑦ 如何建立一個樣式新穎的css3搜索框
搜索框大概是web開發中最常用的UI元素之一，我想基本沒有必要去介紹如何使用它。無論是網站還是web應用，都會為了增強用戶體驗而添加它，那麼你是不是也想過設計一個別致的搜索框？
在今天的文章中，大家將會學到如何使用偽元素來創建一個超酷的CSS3搜索框。當然在開始介紹前你也可以下載源代碼或者查看在線演示。
HTML舉例：
正如接下來你所看到的，標記很少，並且很容易理解：
<form class=「cf form-wrapper」>
<input type=「text」 placeholder=「Search here.。.」 required>
<button type=「submit」>Search</button>
</form>
你可能注意到了HTML5的特殊屬性，像placeholder和required，簡介如下：
.placeholder－基本上，這個屬性的作用在於當文本框獲得焦點之前，先在文本框里顯示一個域的信息，直到獲得焦點後，域的信息被隱藏。
.required－這個屬性說明了當前元素是表單提交中的一個必需屬性。
HTML5也給我們帶來了一個新的type屬性：type＝"search"。
小貼士：HTML 元素像img 和input 都沒有內容，所以，像before這樣的偽元素不會為我們的搜索框呈現任何箭頭。我的解決方案是使用button type＝「submit」 元素代替普通的input type=「submit」。這樣，我們就可以用ENTER鍵來提交表單。
CSS舉例
接下來，你將會看到demo里必要的樣式：
清除浮動
.cf:before， .cf:after{
content：「」;
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
表單元素
有前綴的屬性像－moz、－box、－shadow 不包括在內，我只想讓下面的代碼保持干凈。
/* Form wrapper styling */
.form-wrapper {
width： 450px;
padding： 15px;
margin： 150px auto 50px auto;
background： #444;
background： rgba（0，0，0，.2）;
border-radius： 10px;
box-shadow： 0 1px 1px rgba（0，0，0，.4） inset， 0 1px 0 rgba（255，255，255，.2）;
}
/* Form text input */
.form-wrapper input {
width： 330px;
height： 20px;
padding： 10px 5px;
float： left;
font： bold 15px 『lucida sans』， 『trebuchet MS』， 『Tahoma』;
border： 0;
background： #eee;
border-radius： 3px 0 0 3px;
}
.form-wrapper input:focus {
outline： 0;
background： #fff;
box-shadow： 0 0 2px rgba（0，0，0，.8） inset;
}
.form-wrapper input：：-webkit-input-placeholder {
color： #999;
font-weight： normal;
font-style： italic;
}
.form-wrapper input：-moz-placeholder {
color： #999;
font-weight： normal;
font-style： italic;
}
.form-wrapper input：-ms-input-placeholder {
color： #999;
font-weight： normal;
font-style： italic;
}
/* Form submit button */
.form-wrapper button {
overflow： visible;
position： relative;
float： right;
border： 0;
padding： 0;
cursor： pointer;
height： 40px;
width： 110px;
font： bold 15px/40px 『lucida sans』， 『trebuchet MS』， 『Tahoma』;
color： #fff;
text-transform： uppercase;
background： #d83c3c;
border-radius： 0 3px 3px 0;
text-shadow： 0 -1px 0 rgba（0， 0 ，0， .3）;
}
.form-wrapper button:hover{
background： #e54040;
}
.form-wrapper button:active，
.form-wrapper button:focus{
background： #c42f2f;
outline： 0;
}
.form-wrapper button:before { /* left arrow */
content： 『』;
position： absolute;
border-width： 8px 8px 8px 0;
border-style： solid solid solid none;
border-color： transparent #d83c3c transparent;
top： 12px;
left： -6px;
}
.form-wrapper button:hover:before{
border-right-color： #e54040;
}
.form-wrapper button:focus:before，
.form-wrapper button:active:before{
border-right-color： #c42f2f;
}
.form-wrapper button：：-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border： 0;
padding： 0;
}
⑧ 搜索框css樣式
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
<scripttype="text/javascript"src="jquery.js"></script>
<style>
.{padding:0;margin:0;list-style:none;}
.htmlBox{width:100%;min-width:500px;height:500px;border:1pxsolid#A349A4;border-radius:5px;}
.sskBox{width:100%;height:35px;margin-top:150px;border:1pxsolid#000;border-left:0;border-right:0;}
.zc{width:100px;height:35px;float:left;}
.zj{width:250px;height:35px;float:left;border-left:1pxsolid#000;border-right:1pxsolid#000;}
.yc{height:35px;float:right;}
</style>
</head>
<body>
<divclass="htmlBox">
<divclass="sskBox">
<divclass="zc">左邊100</div>
<divclass="zj">中間250</div>
<divclass="yc">右邊自適應</div>
</div>
</div>
</body>
<script>
tmntH();//載入的時候執行一次
$(window).resize(function(){tmntH();});//瀏覽器窗口變化時執行
functiontmntH()
{
varycw=$(".sskBox").width()-352+'px';//yc的寬度等於sskBox寬度-350-2(邊框線)
//alert(div3);
$(".yc").css("width",ycw);
}
</script>
</body>
</html>
⑨ 如何建立一個樣式新穎的CSS3搜索框64
HTML 元素像img 和input 都沒有內容，所以，像before這樣的偽元素不會為我們的搜索框呈現任何箭頭。我的解決方案是使用button type＝「submit」 元素代替普通的input type=「submit」。這樣，我們就可以用ENTER鍵來提交表單。
⑩ CSS搜索框樣式
這個搜索框做的很好，看似簡單，裡麵包含了大量CSS基礎知識。由於時間關系，這里寫了一個相似度為95%的樣式供參考和學習，由於無法確認字體，先挑選了比較接近的Gautami
先上HTML
<body>
<divid="A">
<inputid="inputTxt"type="text"placeholder="Search"/>
<divid="inputBtn">Go</div>
</div>
</body>
這里開始寫CSS
body{padding:0;margin:0;background:#D6D6D6;}
/*固定容器*/
#A{width:316px;height:28px;margin:22%auto;border:1pxsolid#A3A3A3;border-top-color:#939393;border-bottom-color:#D5D5D5;border-radius:3px;box-shadow:0px1px1px#f4f4f4;position:relative;}
#A>*{position:absolute;top:0;}/*輸入框*/
#inputTxt{left:0;width:246px;height:24px;background:#E6E6E6;border:0;border-top:1pxsolid#C8C8C8;border-bottom:1pxsolid#E6E6E6;outline:none;padding-left:30px;color:#666;}
#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder{color:#B8B8B8;font:60013px'Gautami';}
/*按鈕*/
#inputBtn{right:0;width:38px;height:26px;line-height:26px;background:linear-gradient(#E4E4E4,#B5B5B5);border:1pxsolidtransparent;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:1px1px0px#fff;}
/*圖標*/
#A:before,#A:after{content:"";position:absolute;z-index:2;box-shadow:0px1px0px#fff;}
#A:before{left:9px;top:9px;width:6px;height:6px;border:2pxsolid#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);}
最後，上效果圖：上為原始搜索框，下為本次代碼實現的搜索框
