如何用css样式写折叠菜单和选项卡效果？

最新推荐文章于 2024-06-02 16:43:03 发布

weixin_41626867

最新推荐文章于 2024-06-02 16:43:03 发布

阅读量753

点赞数 2

文章标签： css样式折叠菜单选项卡效果

本文链接：https://blog.csdn.net/weixin_41626867/article/details/88380343

版权

如何用css样式写折叠菜单和选项卡效果？本人前端新手一枚，求个又粗又壮大腿给我抱一下，哈哈哈哈… >_< !!!效果展示：设计思路：1，写顶部导航。先用input+label写出导航的“选中”和“未选中”效果2，写顶部导航下面的弹出卡片。加入一个display：none的div（即卡片），位置position到导航的下面3，加入点击弹出卡片效果。当选项被c...

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

如何用css样式写折叠菜单和选项卡效果？

本人前端新手一枚，求个又粗又壮大腿给我抱一下，哈哈哈哈… >_< !!!

效果展示：
在这里插入图片描述

设计思路：
1，写顶部导航。先用input+label写出导航的“选中”和“未选中”效果
2，写顶部导航下面的弹出卡片。加入一个display：none的div（即卡片），位置position到导航的下面
3，加入点击弹出卡片效果。当选项被checked的时候，卡片display：block

具体实现：
【1，写顶部导航】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现选项卡效果</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		/*设置一个居中的大盒子*/
		.a{
			width: 900px;
			height: 450px;
			background-color: #f5f5f5;
			margin:50px auto;
			overflow:hidden;
		}
		/*给选项设置样式*/
		ul{
			width: 800px;
			height: 48px;
			background-color: #999;
			margin:50px;
		}
		li{
			width: 199px;
			height: 48px;
			background-color: #888;
			float: left;
			font-size:14px;
			color:#666;
			line-height: 48px;
			text-align: center;
			border-right:1px solid #f5f5f5 ;
		} 
		li input{
			display:none;
		}
		li label{
			display:block;
			width: 199px;
			height: 48px;
		}

最低0.47元/天解锁文章

weixin_41626867

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何用css样式写折叠菜单和选项卡效果？

如何用css样式写折叠菜单和选项卡效果？本人前端新手一枚，求个又粗又壮大腿给我抱一下，哈哈哈哈… &gt;_&lt; !!!效果展示：设计思路：1，写顶部导航。先用input+label写出导航的“选中”和“未选中”效果2，写顶部导航下面的弹出卡片。加入一个display：none的div（即卡片），位置position到导航的下面3，加入点击弹出卡片效果。当选项被c...
复制链接

扫一扫