搜索框css样式

html-css08

搜索框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>

先画一个图标“搜索”的图片

写HTML的标签代码

后期在用CSS去美化搭配颜色

HTML:<input type="text" value="找课程"  class="" name="" id="">

有需要用到javascript的就用javascript代码

CSS美化要自己去定义“长度”+“高度”+“背景”+“字体颜色,字体大小”

下拉框原理一样

<select> <option value="iwen" selected id="iwem">iwem<option> </select>

@.....这个咋个说呢,虽然很简单……

就拿verycd那搜索框做例吧……,自己写了个……

HTML:

<div id="top-search">

<input type="text" id="top-search-input" name="kw" value="" />

<input type="submit" id="top-search-lib" class="top-search-button" value="资源" />

<input type="button" id="top-search-site" class="top-search-button" value="高级搜索" />

<input type="button" id="top-search-advance" class="top-search-button" value="发布资源"

/></div>

CSS:

#top-search/*背景*/

#top-search input/*整体input设置*/

#top-search #top-search-input/*调整输入框*/

#top-search-lib,#top-search-site,#top-search-advance/*其它三个按钮,隐藏字体*/

图片就用下面这张: