基本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>

基本CSS布局三的更多相关文章

  1. css布局 三栏 自动换行

    1.代码实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  4. CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型:1.流动模型(Flow) 默认的2.浮动模型 (Float)3.层模型(Layer) 1.流动模型(Flow) 流动(Flow)模型是默认的网页布局模式.也就是 ...

  5. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  6. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  7. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  8. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  9. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

随机推荐

  1. svn经典总结

    大佬的svn:http://www.cnblogs.com/armyfai/p/3985660.html#!comments https://www.cnblogs.com/0zcl/p/730976 ...

  2. 绑定css样式，点击高亮

    <div class="flex-lay" style="color:#999"> <div bindtap="changeType ...

  3. 能当壁纸用的Git常用命令速查表

    使用Microsoft Office 2016手工绘制. 链接: https://pan.baidu.com/s/18KsH-u5T2iSTHaXd6iQWGA 提取码: w8da 复制这段内容后打开 ...

  4. JVM学习笔记(一):Java虚拟机和虚拟机内存区域

    为什么Java程序需要运行在虚拟机上 因为Java在设计之初的跨平台特性,我们知道Java程序是运行在Java虚拟机上的.如果你要问为什么Java程序要运行在虚拟机上,我可以反问你几个问题. 为什么买 ...

  5. webpack初体验_集成插件_集成loader

    webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...

  6. Nginx返回大长度的JSON数据被截断

    1 添加Nginx参数,增加缓存字符串大小 head{ proxy_buffers 16 512k; //此处值代表nginx 设置 16个 512k 的块进行缓存,总共大小为16*512k prox ...

  7. 抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析

    PDF 版本下载:抓住“新代码”的影子 —— 基于GoAhead系列网络摄像头多个漏洞分析 Author:知道创宇404实验室 Date:2017/03/19 一.漏洞背景 GoAhead作为世界上最 ...

  8. Python lambda 知识点

    作者说学会了lambda后,你会用上瘾的,因为让代码复用和简洁. 初识lamdba不太好理解,尤其是它能当着一个变量传递给函数,不过多学着写几个例子就好了,下面是我的学习笔记. lambda 操作符( ...

  9. 海康RTSP取流URL格式

    预览取流url [海康威视]举例说明: 主码流取流: rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream 子码流取流: rtsp://a ...

  10. maven-将本地jar包添加到本地仓库

    一.使用场景 1.把网上的jar包下到本地,如果要在maven的pom文件中配置使用,就必须将jar包按照maven的规范添加到maven仓库中,然后再pom中既可以配置引用了. 二.准备工作 1.电 ...