css百叶窗
2024-10-21 03:49:54
效果图:
css代码块:
<style>
*{//默认样式清除
margin: 0;
padding: 0;
}
.content{//设置外层div的宽高,超出后隐藏
margin: 100px auto;
width: 1100px;
height: 500px;
overflow: hidden;
}
.content ul{
display: flex;//让ul为flex布局
}
.content li{//设置li显示的宽高以及一些效果
width: 160px;
height: 500px;
list-style: none;
box-shadow: 0 0 25px #000;
transition: all 0.7s;//延迟事件
}
.content li img{//设置图片为块状元素,设置图片的宽高,
display: block;
width: 1100px;
height: 500px;
object-fit: cover;//css备忘录里有记载
}
.content ul:hover li{//悬浮后改变其他li的宽
width:50px;
}
.content ul li:hover{//悬浮后改变当前li的宽,让图片展示出来
width:850px;
}
</style>
html代码块:
<div class="content">
<ul>
<li><img src="../lol_img/lol_1.jpg" alt=""></li>
<li><img src="../lol_img/lol_2.jpg" alt=""></li>
<li><img src="../lol_img/lol_3.jpg" alt=""></li>
<li><img src="../lol_img/lol_4.jpg" alt=""></li>
<li><img src="../lol_img/lol_5.jpg" alt=""></li>
<li><img src="../lol_img/lol_6.jpg" alt=""></li>
</ul>
</div>
最新文章
- Android 使用pull,sax解析xml
- mongoose连接collection后自动加s的问题
- jQuery使用ajaxSubmit()提交表单示例
- 500G JAVA视频网盘分享 (Jeecg社区)
- Apache启用GZIP压缩网页传输方法
- Method Swizzle黑魔法,修改 ios 系统类库方法 SEL IMP
- Gradle 教程:第一部分,安装【翻译】(转)
- android网络编程之HttpUrlConnection的讲解--实现文件的断点上传
- /var/lib/mysql/mysql.sock错误的解决办法
- 迈向angularjs2系列(3):组件详解
- MTVERIFY
- 编译和解释性语言和python运行方式
- servlet(6) 链接数据库
- pythonのdjango 信号
- python3 模拟鼠标和键盘操作
- php中函数里面使用函数外面的变量
- mac层和llczi层
- kafka-python的API简单介绍
- Jascript面向对象
- HDU 5685 Problem A | 快速幂+逆元