搜索框css样式

html-css022

搜索框css样式,第1张

<!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>

<form action="http://www.baidu.com/baidu" target="_blank">

<div align="center">

<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/search/img/baidulogo_clarity_80_29.gif" alt="Baidu" border="0" align="bottom"><input type=text name=word size=30>

<input type="submit" value="百度搜索">

</div>

</form>

把代码放在<body></body>标签之间运行一下。

百度工具栏调整搜索框的长度方法： 将鼠标置于搜索框右侧的分割线，鼠标将变成左右箭头形状，这时您就可以按住鼠标，左右拖动来控制搜索框的长度，百度工具栏会记住您关闭浏览器时搜索框的长度，在下次打开时保持最后设置的长度。

默认情况下，搜索框会根据所输入的字符串长度，自动增加长度，重新开启IE后会恢复为用户手工设置的长度。如果不希望搜索框自动调整长度，可以在百度工具栏选项中的高级设置中关闭该功能。