<!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. 去“BAT”这样面试，拿到offer的几率是80%（转）

    一.概述面试,难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:“面试官为什么会这 ...

  2. tcp中delay_ack的理解

    内核版本,3.10. 首先,我们需要知道,在一个sock中,维护ack的就有很多变量,多种状态: struct inet_connection_sock { .... __u8 icsk_ca_sta ...

  3. 判断文件的唯一性--MD5

    JAVA中获取文件MD5值的四种方法   JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获 ...

  4. 用element-ui 时，报value.getTime is not a function错误：

    在用element-ui 时,报value.getTime is not a function错误:错误分析:date-picker 的时间是格林威时间,如果Thu Jun 22 2017 19:07 ...

  5. 使用JavaMail发送邮件-从FTP读取图片并添加到邮件正文发送

    业务分析: 最近工作需要,需要从FTP读取图片内容,添加到邮件正文发送.发送邮件正文,添加附件采用Spring的MimeMessageHelper对象来完成,添加图片也将采用MimeMessageHe ...

  6. Binary Space Partitioning

    [Binary Space Partitioning] BSP was discovered by John Carmack used BSP trees in Doom and Quake. Alt ...

  7. JSP中JavaScript校验用户名等重复

    $(function () { $("#unitFrom").validate({ errorClass:"errorInfo", //默认为错误的样式类为:e ...

  8. 微信小程序开发 - 用户授权登陆

    准备:微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:htt ...

  9. ipcam

    ipcam也叫ip network camera,就是基于internet protocol的网络摄像机,同普通摄像头或者网眼的主要区别是ipcam实际上是一台视频服务器和摄像头的集成.ipcam只要 ...

  10. PowerShell 脚本中调用密文密码

    1. 把密码转变为加密的字符串.使用命令 ConvertFrom-SecureString Read-Host "Enter Password" -AsSecureString | ...