html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？

html-css010

html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？,第1张

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

写HTML的标签代码

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

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

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

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

下拉框原理一样

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

你好！布局建议使用div里边放input和button的方式

<div style="border:1px solid #ccccccwidth:150pxheight:25px">

<input type="text" style="border:0margin-left:5pxwidth:110pxheight:25pxline-height:25px" />

<input type="button" value="" style="background:url(searchBtn.gif) no-repeat center centerwidth:15pxheight:15pxmargin:5px" />

</div>

以上为大概思路，具体数值还需根据实际情况进行调整！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#dv1

{margin:0px autowidth:200pxheight:80px}

#dv2

{

background:url(91529822cd5685b7d7cae2f9.jpg)

width160px height:33px

float:left

width: 174px

overflow: hidden

text-align:center

left: 459px

top: 13px

}

#dv3

{

width:34px

height:33px

float:left

position:absolute

left: 497px

top: 16px

overflow: hidden

}

</style>

</head>

<body><form id="form1" name="form1" method="post" action="">

<div id="dv1"><div id="dv2">

<label>

<input type="text" name="textfield" style="width:100pxheight:20px" />

</label>

</div><div id="dv3"><a href="#" ><img src="aaa.jpg" style="border:0px"/></a></div>

</div> </form>

</body>

</html>

你试下把