<!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. python 数据分析库介绍

    1 引言 高效处理数据的python工具: 与外界进行交互: 读写各种文件格式和数据库 准备: 对数据进行清理.修整.整合.规范化.重塑.切片切换.变形等处理以便进行分析 转换: 对数据集做一些数学和 ...

  2. 1 CRM

    一.crm介绍 CRM,客户关系管理系统(Customer Relationship Management).企业用CRM技术来管理与客户之间的关系,以求提升企业成功的管理方式,其目的是协助企业管理销 ...

  3. Vue.js连接后台数据jsp页面 ￣▽￣

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. js 菜单收起和展开

  5. pycharm的断点调试【转自https://blog.csdn.net/weixin_39198406/article/details/78873120】

    1. show execution point (F10)显示目前项目所有断点2. step over (F8)下一步但仅限于设置断点的文件3. step into (F7)执行下一行4. step ...

  6. flume知识点总结

    首先介绍一下在flume中常用的一个数据格式,以及使用该格式的优缺点:  从flume写数据到hdfs中的时候,使用二进制格式相对于使用纯文本来说是一种更好的选择,因为大多数二进制格式都有一些方法指明 ...

  7. linux安装redis-4.0.2

    一.下载redis cd /usr/local/src wget http://download.redis.io/releases/redis-4.0.2.tar.gz 二.解压 tar -zxvf ...

  8. App后台Keynote

    [App后台Keynote] 一.基础. 1.一个 节省 流量 的 处理 方法 是 让 App 下载 经过 压缩 的 图片( 一般 是 几十 KB 以下), 当 用户 需要 查看 原图 时 才 下载 ...

  9. Pandas合并数据集之merge、join方法

    合并数据集 pandas.merge 可根据一个或多个键将不同DataFrame中的行连接起来. pandas.concat 可以沿着一条轴将多个对象堆叠到一起. combine_first merg ...

  10. Educational Codeforces Round 63-D（基础DP）

    题目链接:https://codeforces.com/contest/1155/problem/D 题意:给定n个数,可以选择一段连续子段将其乘x,也可以不操作,求最大连续子段和. 思路:比赛时觉得 ...