手风琴特效

最新推荐文章于 2024-05-15 13:59:07 发布

web清白小生

最新推荐文章于 2024-05-15 13:59:07 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/weixin_45354240/article/details/94577661

版权

在这里插入代码片
```<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
		<!--css样式  层叠样式表   修饰网页  化妆品-->
		<style>
			/*清除默认内外边距 解决兼容问题*/
			*{
				margin: 0;/*外边距*/
				padding: 0;/*内边距*/
			}
			.wrap{
				overflow: hidden;
				width: 1180px;/*宽度*/
				height: 145px;/*高度  px像素/单位*/
				background-color: #33cc00;/*背景颜色  #十六机制颜色*/
				margin: 100px auto;/*外边距 复合属性  盒子以外得距离 上下  左右(auto 自动居中) */
				padding-top: 20px;
				padding-left: 20px;
			}

			/* p{
				background-color: red;
			} */
			ul{
				width: 30000px;
				/* display:flex; */
				list-style: none;/*去掉小黑圆点*/
			}
			li{
				/* display: inline-block; */
				float: left;/*浮动  让元素横排显示*/
				overflow: hidden;/*规定元素超出之后如何显示*/
				width: 185px;
				height: 125px;
				
				margin-right: 10px;
				transition: 1s;/*过渡  允许一个样式到一个样式平滑*/
			}
		
			/*当鼠标划ul的时候  让li 改变宽度*/
			ul:hover li{
				width: 108px;
			}

			/*当鼠标划过li的时候  改变li的宽度*/
			ul li:hover{
				width: 576px;
			}

		</style>
	</head>
	<body>

		<div class='wrap'>
		<!--图片-->
			<ul>
				<li>[外链图片转存失败(img-Z3WdyQKE-1562144683281)(https://mp.csdn.net/images/1.jpg)]</li>
				<li>[外链图片转存失败(img-Iz9d5rkC-1562144683285)(https://mp.csdn.net/images/2.jpg)]</li>
				<li>[外链图片转存失败(img-SmNRuoNq-1562144683287)(https://mp.csdn.net/images/3.png)]</li>
				<li>[外链图片转存失败(img-9UMGz2Li-1562144683288)(https://mp.csdn.net/images/4.jpg)]</li>
				<li>[外链图片转存失败(img-v8VwyDET-1562144683290)(https://mp.csdn.net/images/5.jpg)]</li>
				<li>[外链图片转存失败(img-rVbG5AFc-1562144683291)(https://mp.csdn.net/images/6.jpg)]</li>
			</ul>			
		</div>
	</body>
</html>

web清白小生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手风琴特效

在这里插入代码片```<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Docume...
复制链接

扫一扫