前端制作动态导航案例1

最新推荐文章于 2022-11-21 15:53:32 发布

@码上行动

最新推荐文章于 2022-11-21 15:53:32 发布

阅读量284

点赞数

分类专栏： CSS 文章标签： css html js css3 vue

本文链接：https://blog.csdn.net/weixin_45935734/article/details/116055840

版权

CSS 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

动态导航案例1

导航效果：
在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <style>
	        *{margin:0;padding:0;}
	        ul,li{list-style: none;}
	        a{text-decoration: none;}
	        /*nav1*/
	        .nav1{
	            width: 480px;
	            height: 40px;
	            border-bottom:1px solid #a0a0a0;
	            margin:100px auto;
	            display: none;
	            display: block;
	            /*background: pink;*/
	        }
	        .nav1 li{
	        float: left;
	            margin-right: 9px;
	            /*background: red;*/
	        }
	        .nav1 a{
	            display: block;
	            height: 35px;
	            line-height: 35px;
	            padding: 0px 14px;
	            background: #f7f7f7;
	            font-size: 10px;
	            color:#91989e;
	            border:1px solid #cecece;
	            border-bottom: 0;
	            margin-top:4px;
	        }
	        .nav1 a:hover{
	            height: 40px;
	            border-color: #9c9c9c;
	            color:#6b767b;
	            margin-top:0;
	            background: #fff;
	            line-height: 40px;
	        }
	    </style>
	</head>
	<body>
	    <!-- nav1 -->
	    <ul class="nav1">
	        <li><a href="#">tab one</a></li>
	        <li><a href="#">tab two</a></li>
	        <li><a href="#">tab three</a></li>
	        <li><a href="#">tab four</a></li>
	    </ul>
	</body>
</html>

除了这种动态导航以外还有其他动态导航案例如下：

案例2：点击查看案例2
在这里插入图片描述
案例3：点击查看案例3

总结

以上是对前端制作动态导航的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌

@码上行动

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端制作动态导航案例1

动态导航案例1导航效果：代码示例：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin:0;padding:0;} ul,li{list-style: none;} a{text-decoration: none;} /*nav1*/
复制链接

扫一扫