HTML CSS 做好看的动态搜索框

最新推荐文章于 2023-11-08 17:45:05 发布

原创

最新推荐文章于 2023-11-08 17:45:05 发布 · 3.2k 阅读

标签

#css #html

收录于

这篇博客主要介绍了如何结合HTML与CSS技术，创作出具有视觉吸引力和交互性的动态搜索框。适合初学者参考，作者强调实战练习的重要性。

这些也是我个人的解读可供小白参考。想要更多了解还是要自己练习。
（我也还是个小白噗哈哈哈）

开始了

	这里是HTML写的框架

<!DOCTYPE html>
<html>
	<head>
		<meta charsert="UTF-8">
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<!-- 在国内使用fontawesome网站内的图片素材就要用到上面这么一条 -->
		<link rel="stylesheet" href="https://blog.csdn.net/style.css">
		<!-- 使用外部样式  这里我引用的外部样式文件名为style.css -->
		<title> Awesome Search Box </title>
		<!-- 这里是浏览网页时出现在网页顶端的标题啦 -->
	</head>
		<body>
		<div class= "search-box"><!-- 先写一个容器出来 -->
		<input class="search-txt" typ="text" name="" placeholder="type to search">
		<!-- 这里是另外一个容器  容器是可以嵌套的 它被嵌套在上面这个容器里 是输入文本用的 -->
		<a class="search-btn" href="#">
			<!-- 这里定义一个连接  是空连接   想使用别的连接 你可以把#替换成你想用的连接 -->
		<i class="fa fa-search" aria-hidden="true"></i>
		<!-- 这个玩意是我从fontawesome里找来的素材  具体怎么来的自己去fontawesome看看就知道了 -->