<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>九宫格</title>
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
        <style type="text/css">
            a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
                margin: 0;
                border: 0;
                padding: 0;
                font-style: normal;
                color: #323232;
                box-sizing: border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
            }
            html,body{
                background: #fff;
            }
            ul{
                text-decoration: none;
                list-style-type: none;
            }
            .video_list>li{
                float: left;
                width: 32%;
                text-align: center;
                border: 1px solid #ccc;
                padding-top: 31%;
                margin-left: 1%;
                margin-top: 1%;
                position: relative;
            }
            .video_list>li>div{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #09BE07;
            }
            .video_list>li>div>span{
                display: inline-block;
                margin-top: 50%;
                -webkit-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. 关于Google圆角高光高宽自适应按钮及其拓展

    关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by ...

  2. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  3. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  4. jQuery实现布局高宽自适应

    在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要 ...

  5. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  6. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  7. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  8. LayIM聊天框全屏根据浏览器高宽自适应

    个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...

  9. 纯CSS写正方形自适应宽高，且左侧高与正方形高保持一致

    先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box">            <div class="le ...

随机推荐

  1. 老旧Webkit浏览器行内元素0间距问题

    有时我们希望display:inline-block的元素之间的天衣无缝.紧密相依,比如说如下的情情形: 一般情况下我们使用如下代码可以实现: .pageNav { font-size:; text- ...

  2. springmvc的ModelAndView的简单使用

    参考:http://blog.csdn.net/zzjjiandan/article/details/34089313 先上图: MAVTest.java package com.wyl; impor ...

  3. COB(Chip On Board) 工艺技术

    COX(Chip On X) •X 基板:  PCB (Printed circuit board)  FPC (Flexible Printed Circuit)  Glass •导线焊接 球形焊接 ...

  4. Codeforces Beta Round #97 (Div. 2)

    A题求给出映射的反射,水题 #include <cstdio> int x,ans[105],n; int main(){ scanf("%d",&n); fo ...

  5. DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign练手

    先po一张效果图 PS:原谅题主的懒惰吧.. 看着是不是很酷炫,那是因为5.0的动画做得好,代码其实没有多少,搞清楚这个布局的层次关系很重要. 废话不多说了,先来看布局文件 最外层是一个DrawerL ...

  6. java类的结构（属性、方法、构造函数）

    一.类的定义形式类定义的一般形式如下 [类定义修饰符] class  <类名> {   //类体 [成员变量声明] [构造函数] [成员方法] } 前面说过,在描述java语法时,方括号中 ...

  7. Oracle触发器(trigger):view,schema,database

    视图trigger, instead of 我们知道如果一个view只是由一个table构成,那在view上做啥操作没太多限制.如果view是由多个table组成那在view上做啥unpdate,in ...

  8. jar 命令使用详解

    各位看官,由于本人首次学习java,对编译java 还有很多问题. jar命令详解 本人总结 jar   -c [创建档案]  v[输出详细信息]  m[添加清单文件] f[指定文件名]     主要 ...

  9. 虎记：强大的nth-child(n)伪类选择器玩法

    写在前面的戏: 最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收获(现在 ...

  10. JavaSE复习日记 : 算是个小前言吧

    /* * Java也学了好久了,抽个时间整理了一下课堂笔记,也有些是我刚开始学会犯的一些错误.在这里浅谈一下JavaSE的基础内容,对我来说也是一种不错的复习方式. * * 那好,对于初学者来说,学习 ...