① 请问如和用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);}
最后，上效果图：上为原始搜索框，下为本次代码实现的搜索框
