HTML CSS 做好看的动态搜索框

最新推荐文章于 2024-07-30 08:56:47 发布

天天都有人

最新推荐文章于 2024-07-30 08:56:47 发布

阅读量2.9k

点赞数 4

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Czhenjin/article/details/104706097

版权

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

摘要由CSDN通过智能技术生成

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

开始了

	这里是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="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="#">
			<!-- 这里定义一个连接  是空连接   想