html中搜索框怎么做

2024年12月01日 18:41

有4个网友回答

网友（1）：

用input标签就行，上午回答了知道里面一个童鞋同样的问题，代码同样给你哈






Examples




	#box{
		width: 380px;
		margin: 30px auto;
		font-family: 'Microsoft YaHei';
		font-size: 14px;
	}
	input{
		width: 260px;
		border: 1px solid #e2e2e2;
		height: 30px;
		float: left;
		background-image: url(images/search.jpg);
		background-repeat: no-repeat;
		background-size: 25px;
		background-position:5px center;
		padding:0 0 0 40px;
	}
	#search{
		width: 78px;
		height: 32px;
		float: right;
		background: black;
		color: white;
		text-align: center;
		line-height: 32px;
		cursor: pointer;
	}




	
		
		搜索

网友（2）：

这是一个最简单样式的搜索框，没有很复杂的样式。如果需要设计样式可以根据class="aa"来写样式，.aa{}在括号中添加代码即可，当然这是框的样式，按钮的样式.bb{}在括号中填写代码即可。
其他代码学习的方法：如果有想要学习的代码不知道怎么实现，可以先打开一个有你想学的元素的网页（比如你想学习搜索框就打开里面有搜索框的网页），浏览器都能直接查看代码的，现在很多浏览器可以用开发人员工具查看网页代码结构。默认的快捷键都是F12，或者在想看的HTML元素上点右键——审查元素，然后就可以看到你想要的代码了，看懂学习即可
HTML：超文本标记语言，标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括 “头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

网友（3）：

.aa{width:100px; height:20px; boder:solid 1px #f00;}//定义搜索框的大小高度以及边框颜色。

思路是：
放大镜图标用个img写进来或者用其它标签用CSS做背景也可以；
下拉导航这种效果系统的Select下拉是最容易想到的，但是别想着用它做，，原因很简单，做不到的，，这个必须借助JS辅助来解决！

网友（4）：

1
搜索这是一个最简单样式的搜索框，没有很复杂的样式。如果需要设计样式可以根据class="aa"来写样式，.aa{}在括号中添加代码即可，当然这是框的样式，按钮的样式.bb{}在括号中填写代码即可。其他代码学习的方法：如果有想要学习的代码不知道怎么实现，可以先打开一个有你想学的元素的网页（比如你想学习搜索框就打开里面有搜索框的网页），浏览器都能直接查看代码的，现在很多浏览器可以用开发人员工具查看网页代码结构。默认的快捷键都是f12，或者在想看的html元素上点右键——审查元素，然后就可以看到你想要的代码了，看懂学习即可。html：超文本标记语言，标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括 “头”部分（英语：head）、和“主体”部分（英语：body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。