这个搜索栏使用了表单上的几个标签。 基本代码如下。 divid=' search ' formaction=' results.PHP ' method=' post ' input name=' search term ' type=' search ' place hod alue 选项选项值='作者'作者/选项选项值=' ISBN ' ISBN/option/section/form/div涉及块元素，因此输入和选择标签
cs3的基本代码如下。 # search {位置： absolute； top:111px； left:670px； 文本对齐： right； border :3 px固态硬盘# cc 6600； } # searchinput [ type=' search ' ] { font-family : '微软雅黑'； 后台： # f3f3f 3； height:25px； width:170px； font-size:1.6em； padding-left:5px； display :在线区块； 垂直对齐3360 top； border :否； }选择{ appearance : none； -moz-appearance:none； -webkit-appearance:none； border :否； 背景： URL (images/arrow.png ) no-repeatscrollrightcentertransparent； 背景色： # d2d2d 2； padding-right:14px； height:25px； } select :-ms-expand { display : none； } # searchinput [ type ^=' submit ' ] { background-color 3360 # cc 6600； height:25px； display :在线区块； border :否； 垂直对齐3360 top； padding:0 5px； 背景- image : URL (images/search.png )； 背景定位：中心； 后台- repeat :否- repeat； } # searchinput [ type ^=' submit ' ] : hover { cursor 3360 pointer； } # searchinput [ type ^=' submit ' ] : active { background-color 3360 # 996600； }做这种东西，最重要的是头脑清醒，条理清楚，按部就班，不要着急。
从外向内依次，先将整个div置于绝对位置进行移动； 然后，可以在搜索框中的placeholder中设置字体、位置等详细信息。 最重要的是将其整体input设置为块元素，并使其顶部对齐。 在这里，我们已经清除并自定义了选择的默认设置。 之所以称为-moz-appearance:-webkit-appearance:是因为这些火狐等浏览器对select进行了默认的样式修饰，并赋予了背景图。 height都是同样设定的。要确定提交框，获得好的视觉和触觉效果是比较不容易的。 大部分都需要颜色变化和边界样式来处理，例如鼠标指向时有鼠标样式的变化，还有提交框的边界，单击时有压痕，释放时有回弹，但这里不详细说明。 我做的效果如下。