css百度搜索框样式,css设置搜索框样式
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中怎么给网页设置一个搜索框
在html中添加一个input框和button搜索按钮即可，css中修改这个搜索框和按钮的样式让它更美观一些即可。
搜索框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
