HTML右侧悬浮菜单

最新推荐文章于 2024-03-11 10:43:00 发布

VIP文章山顶洞人95277

最新推荐文章于 2024-03-11 10:43:00 发布

阅读量2.1k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_44567226/article/details/118546457

版权

模仿的是B站的右侧菜单

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>右侧悬浮菜单</title>
<style>
	*{margin: 0;padding: 0;box-sizing: border-box;}
	div{border: 1px solid black;}
	div>div{border:1px dashed red;}
	#topDiv{height: 45px;}
	#middleDiv{height: 300px;}
	#menuDiv{height: 3000px;}
	#bottomDiv{height: 150px;}
    /*上面只是单纯设置样式和增加高度*/


	#contentDiv>div{
		height: 300px;
        /*内边距上下为0，左右居中*/
		margin: 0 auto;
		border:1px dashed blue;
        /*属性变化过渡效果*/
		transition: width 0.1s ease-out;
	}
	#list-box{
		/*悬浮菜单样式*/
		position: fixed;
		left: 50%;
		margin-left: 510px;
		top: 355px;
		z-index: 2;
        /*属性变化过渡效果*/
		transition: margin-left 0.1s ease-out;
	}
	.item{
		/*悬浮菜单内容样式*/
		width: 54px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		font-size: 12px;
	}
	
	/*闲得蛋疼加的响应式布局*/
	@media screen and (max-width:1020px){#contentDiv>d

最低0.47元/天解锁文章

山顶洞人95277

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML右侧悬浮菜单

模仿的是B站的右侧菜单代码：<!doctype html><html><head><meta charset="utf-8"><title>右侧悬浮菜单</title><style> *{margin: 0;padding: 0;box-sizing: border-box;} div{border: 1px solid black;} div>div{border:1px dashed r.
复制链接

扫一扫