<!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. eclipse 启动 闪退

    eclipse启动闪退 打开eclipse安装文件夹中的eclipse.ini文件. 把Xmx1024m修改为Xmx512m,可以解决闪退问题.

  2. LevelDB源码分析-Get

    Get LevelDB提供了Get接口用于给定key的查找: Status DBImpl::Get(const ReadOptions &options, const Slice &k ...

  3. 1. Go安装

    和任何语言一样,开始使用之前都要先安装好他的开发/编译环境. Go是由谷歌开发的一个开源的编译型的静态语言,编译型语言最大的优点就是效率高运行速度快. Go语言支持Linux,Windows,Mac等 ...

  4. AngularJS学习笔记(一)

    一.基本指令 1.ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围; tips:一个页面里创建多个 ng-app 手动加载即可: ...

  5. linux环境启动数据库

    1.查看数据库监听的状态: 监听状态:lsnrctl status  出现如下列截图所示数据,说明切切换账户有问题:切换账户时要家:-:  如 su - oracle 第一步:打开Oracle监听$ ...

  6. [leetcode]38. Count and Say数数

    The count-and-say sequence is the sequence of integers with the first five terms as following: 1. 1 ...

  7. 选择困难症的福音——团队Scrum冲刺阶段-Day 2

    选择困难症的福音--团队Scrum冲刺阶段-Day 2 今日进展 编写提问部分 如何将不同的问题选项连接到不同的下一个问题 如何保证问题的链接不会弄丢 登陆注册界面 完成密码可见与不可见的更改 ui界 ...

  8. tab选项卡实例

    之前也见了不少的tab选项卡,但是下面这个选项卡是一个页面中有多个时互不影响的. <head> <meta charset="utf-8"> <met ...

  9. Java8特性之Lambda、方法引用和Streams

    这里涉及三个重要特性: Lambda 方法引用 Streams ① Lambda 最早了解Lambda是在C#中,而从Java8开始,Lambda也成为了新的特性,而这个新的特性的目的,就是为了消除单 ...

  10. JDBC - Mysql 8.0.13 连接测试

    因为换新的电脑设备,为其安装一些开发需要的应用及环境,下载了新版的Mysql8.0.13,在Eclipse中测试连接时遇到一些新的问题,遂记录. 1. Mysql 5.*  版本JDBC连接 a. 常 ...