基本CSS布局三
2024-09-03 11:19:02
基本CSS布局三------图片视频网格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.video_list{
list-style-type: none;
}
.video_list li{
width: 15%;
float: left;
padding-bottom: 15%;
position: relative;
text-align: center;
font-size:35px;
margin-left: 1%;
margin-bottom: 1%;
}
.video_list div{
position: absolute;
background-color:rgb(106, 109, 106);
border:1px solid #ccc;
width: 100%;
height: 100%;
}
.video_list span{
display: inline-block;
margin-top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<ul class="video_list">
<li><div><span>1</span></div></li>
<li><div><span>2</span></div></li>
<li><div><span>3</span></div></li>
<li><div><span>4</span></div></li>
<li><div><span>5</span></div></li>
<li><div><span>6</span></div></li>
<li><div><span>7</span></div></li>
<li><div><span>8</span></div></li>
<li><div><span>9</span></div></li>
</ul>
</body>
</html>
最新文章
- Visual Studio前端开发工具/扩展
- 监控阮一峰老师的blog
- IBM X3850 Windows 无法安装到这个磁盘。选中的磁盘具有MBR分区表。在 EFI 系统上，Windows 只能安装到 GPT 磁盘
- AndroidStudio学习笔记-第一个安卓程序
- HBase Java简单示例
- [收藏]ASP.NET MVC管道详述
- Java 读Properties
- MvvmCross for WPF 支持子窗体显示、关闭、传参
- Arraysort
- VMProtect使用小计【一】
- ajax 小案例
- Android中调用Paint的measureText()方法取得字符串显示的宽度值
- symfony2 表单
- hdu 5584 LCM Walk（数学推导公式，规律）
- JavaEE Tutorials (13) - 使用锁定控制对实体数据的并发访问
- Inter IPP 跟 Microsoft V100编译器区别
- Project Euler：99 Largest exponential C++
- JavaScript||什么是面向对象
- [Postman]排除API请求(9)
- vs2015智能提示英文改为中文