先画一个图标“搜索”的图片
写HTML的标签代码
后期在用CSS去美化搭配颜色
HTML:<input type="text" value="找课程" class="" name="" id="">
有需要用到javascript的就用javascript代码
CSS美化要自己去定义“长度”+“高度”+“背景”+“字体颜色，字体大小”
下拉框原理一样
<select> <option value="iwen" selected id="iwem">iwem<option> </select>如果你的图片不是背景图1、给你的背景图的div添加一个样式 position:relative
2、给你的搜索框的div添加一个样式 position:absoluteright:数值pxtop:数值px
如果你的图片是背景图
那就很简单了，直接在div 里面添加一个输入框和一个提交按钮即可。
<input type="text" value="输入关键词" class="text" />
<input type="button" value="搜索" class="button" />
再给这2个input框添加独立的样式就行了。
INPUT.text{}
INPUT.button{}
望采纳
<!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>
