<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>网页豆腐块布局，图片等比压缩并且实现上下左右居中</title>

     <style>

     .box {/*最外层的大div*/

         width: 1040px;

         margin: 0 auto;/*上下间距为0，左右页面空白自适应并且相等可以达到横向居中的效果使整个div在浏览器窗口左右居中*/

         overflow: hidden;

     }

     .box1 {/*第二层div*/

         float: left;

         width: 1020px;

         padding-left: 20px;

         overflow: hidden;

     }

     .box2 {/*里面的小div   计算方法:(233+1+1+20)*4=1020*/

         width: 233px;

         height: 309px;

         position: relative;/*相对定位*/

         float: left;/*向左浮动,加了该属性就可以豆腐块排列了*/

         margin:0 0 20px 20px;/*元素间距：上，右，下，左*/

         border: 1px solid #e0e0e0;

         overflow: hidden;

     }

     img{/*最里面的图片设置*/

         max-width: 100%;

         max-height: 100%;

         position: absolute;/*绝对定位*/

         top:50%;

         left: 50%;

         -webkit-transform: translate(-50%,-50%); /*-webkit-是厂商前缀*/

             -ms-transform: translate(-50%,-50%); /*-ms-是厂商前缀*/

                 transform: translate(-50%,-50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/

     }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="box1">

         <div class="box2">

             <img src="data:images/abc.jpg"/>

         </div>

         <div class="box2">

             <img src="data:images/psb.jpg"/>

         </div>

         <div class="box2">

             <img src="data:images/photo_01.gif"/>

         </div>

         <div class="box2">

             <img src="data:images/123.jpg"/>

         </div>

         <div class="box2">

             <img src="data:images/cxy.jpg"/>

         </div>

         <div class="box2">

             <img src="data:images/photo_01.gif"/>

         </div>

         <div class="box2">

             <img src="data:images/photo_01.gif"/>

         </div>

         <div class="box2">

             <img src="data:images/photo_01.gif"/>

         </div>

     </div>

 </div>

 </body>

 </html>

效果图：

HTML+CSS实现页面豆腐块布局和图片居中的更多相关文章

  1. div+CSS实现页面的布局要点记录

    1.页面任何控件可以通过div包装为一个模块,然后通过margin(外补丁)和padding(内补丁)对控件位置的摆放进行控制,以实现想要的效果. 2.position:absolute;对控件实现绝 ...

  2. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  3. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  4. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  5. PS图片转CSS+HTML页面的正确步骤

    转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html 制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html ...

  6. 关于贴友的一个书本页面简单布局（html+css）的实现

    贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1: <!-- 我的博客:http://www.ido321.com --> DOCTYPE HTML> ...

  7. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  8. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  9. html css 网络 页面布局 颜色 参考 拾取器网址

    http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ ========================== ...

随机推荐

  1. sql查询语句for xml path语法

    [原地址] for xml path作用:将多行的查询结果,根据某一些条件合并到一行. 例:现有一张表 执行下面语句 select Department, (SELECT Employee+',' F ...

  2. 2018SDIBT_国庆个人第七场

    A - Complete the Word(暴力) Description ZS the Coder loves to read the dictionary. He thinks that a wo ...

  3. java学习--异常

    异常的概念 java异常是java提供的用于处理程序中错误的一种机制 所谓的错误是指在程序运行过程中发生的一些异常事件.如除0溢出,数组下标越界,文件不存在 设计良好的程序应该在异常发生时,提供处理这 ...

  4. SqlServer中的UNION操作符在合并数据时去重的原理以及UNION运算符查询结果默认排序的问题

    本文出处:http://www.cnblogs.com/wy123/p/7884986.html 周围又有人在讨论UNION和UNION ALL,对于UNION和UNION ALL,网上说的最多的就是 ...

  5. Reboot-less node fencing in Oracle Clusterware 11g Release 2

    在进行一次RAC的高可用性测试时,当private网卡的网线被拔掉之后,没有出现传说中的有一个节点被CRS强制重启,取而代之的是node2上面的ASM实例和RDBMS实例被关闭:当网线被重新插上时,n ...

  6. 作业注释 CSS表单1 输入框前有图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. P45 实践作业

    1. 影评: 观众数量多少,决定被虐者死亡速度的快慢.这一新奇但是残忍的想法,无疑是<网络杀机>的点睛之笔.公众.媒体对凶手网站主造成的伤害,比起那些用恶毒言论还要让人难受千百倍.他是一个 ...

  8. MySql/Oracle树形结构查询

    Oracle树形结构递归查询 在Oracle中,对于树形查询可以使用start with ... connect by select * from treeTable start with id='1 ...

  9. document.getElementById(“id”)与$("#id")的区别

    document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...

  10. 安装fftw到window（vs2010）及使用fftw库函数实现4096点fft变换计算

    Windows下FFTW库的安装: 1. 从网站http://www.fftw.org/install/windows.html上下载最新的预编译文件:    32-bit version: fftw ...