<!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. Beta冲刺——第三天

    beta冲刺:第三天 各个成员今日完成的任务 成员 冯晓.马思远 彭辉.王爽 吴琼.郝延婷 今日完成任务 ·管理员管理功能模块下角色管理功能的完善测试 ·角色和权限部分代码规范 ·博客撰写 ·后台系统 ...

  2. vue单页面处理SEO问题

    设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...

  3. 项目（二）DNS解析——配置域名服务器

    NDS服务器常见种类有:缓存域名服务器.主域名服务器.从域名服务器.DNS服务器查询方法有两种:递归查询和迭代查询.其中,递归查询是DNS服务器在本地通过缓存.本地映射.记录本得到结果,而迭代查询是D ...

  4. cast

    https://blog.csdn.net/seabeam/article/details/47841539 在UVM中经常可以看到$cast的身影,这是SV的build-in task之一,当然它还 ...

  5. 2015-2016 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2015)

    题目链接 :  http://codeforces.com/gym/100781/attachments A-Adjoin the Network 题意大概是有多棵树(也可能是一颗),现在要把它们合并 ...

  6. 使用setx 命令添加环境变量（Windows）

    背景 用GUI的方法可能添加环境变量可能会比较麻烦,为此可采用命令行操作的方式. 步骤 以管理员身份运行 cmd 输入 setx /M "%path%" "%path%[ ...

  7. [leetcode]7. Reverse Integer反转整数

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  8. JSP的简单介绍

    什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写htm ...

  9. SQL Server 2008 R2 链接 Oracle

    参考网站: SP_addlinkedserver 小结 (oracle,sql server,access,excel) 64位SqlServer通过链接服务器与32位oracle通讯 SQL Ser ...

  10. 探索未知种族之osg类生物---呼吸分解之更新循环二

    _scene->updateSceneGraph(*_updateVisitor); 我们用了前面4节才刚刚算是完成对DatabasePager::DatabaseThread::run()函数 ...