JQ之简单的隐藏和显示侧边栏

最新推荐文章于 2022-09-17 16:01:00 发布

___Alive___

最新推荐文章于 2022-09-17 16:01:00 发布

阅读量816

点赞数

分类专栏： JQ

本文链接：https://blog.csdn.net/YU_M_K/article/details/84640670

版权

效果图：

代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.left {
				position: absolute;
				left: 0;
				top: 0;
				width: 300px;
				height: 100%;
				background: #123456;
				transition: all 0.2s ease 0s;
			}
			
			.right {
				position: absolute;
				/*绝对定位脱离文档流,基于relative或者浏览器*/
				left: 300px;
				right: 0;
				/*left: 0;right: 0;//实现左右居中*/
				/*left: 300;right: 0;//width的大小是从left300到右边浏览器结束，而不是根据子元素的width而改变*/
				height: 100%;
				background: #F5F5DC;
				transition: all 0.2s ease 0s;
			}

最低0.47元/天解锁文章

___Alive___

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ之简单的隐藏和显示侧边栏

效果图：代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://code.jquery.com/jquery-3.3.1.js&qu
复制链接

扫一扫

专栏目录