Html5前端小知识：导航栏固定顶部显示、三角形的绘制、搜索框的绘制

却没能成为自己

于 2022-10-16 06:43:26 发布

阅读量540

点赞数

分类专栏：三角形搜索框导航栏文章标签：前端 html5 html

本文链接：https://blog.csdn.net/qq_15971099/article/details/127343444

版权

这篇博客介绍了HTML5前端的一些实用技巧，包括如何实现导航栏固定在页面顶部始终保持可见，如何利用CSS绘制各种方向的三角形，以及如何设计美观的搜索框并提供相应的实现代码示例。

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

导航栏锁定顶部常显：

效果图：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 100%;
				height: 100px;
				background-color: pink;
				border-bottom: 5px solid red;
				position: fixed;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div><!-- 导航栏锁定顶部显示 -->
		<div style="width: 100%; height: 110px;"></div><!-- 导航栏下方留白 -->
		<div style="width: 100%; height: 10000px;"></div><!--其他内容-->
	</body>
</html>