<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Wsscat DEMO</title>

    </head>

    <body>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </body>

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        .box {

            float: left;

            width: 30%;

            margin-top: 10px;

            margin-left: 2.5%;

            height: 0;

            padding-bottom: 33.98%;//或者padding-top

            background-color: #dbe0e4;

            background-image: url(1.jpg);//图片不要用标签，用这两个属性配合会更好控制图片缩放

            background-size: cover;

        }

    </style>

</html>

css3图片响应式布局的更多相关文章

  1. CSS3之响应式布局

    在没有C3的时候,响应式布局是通过js来实现的. 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以 ...

  2. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  3. CSS3之响应式布局及其应用

    使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maxi ...

  4. 【CSS3】响应式布局

    准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 1 <meta name="viewport" content ...

  5. 原生css3作响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

  7. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  9. 响应式布局（CSS3弹性盒flex布局模型）

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

随机推荐

  1. virtualenv是什么?virtualenv的安装及pycharm的配置和使用

    virtualenv是什么? virtualenv是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.简单的说就是一 ...

  2. ADO.NET DBHelper 类库

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  3. MySQL专题 1 分布式部署数据库同步问题 BinLog

    什么是 Binlog MySQL Server 有四种类型的日志——Error Log.General Query Log.Binary Log 和 Slow Query Log. 第一个是错误日志, ...

  4. Java对象空间分配流程

    对象空间分配流程如下:   针对这个流程,分别解释一下每一个选项的使用场景. 栈上分配: 栈上分配的基础在于逃逸分析,逃逸分析可以得到三种对象的逃逸状态. 全局逃逸:一个对象的引用逃出了方法或者线程. ...

  5. SQL中 ALL 和 ANY 区别的

    在select中我们可能会认为all和any应该表达的意思差不多.其实他们的意思完全不一样: all: 是将后面的内容看成一个整体,如: >all (select age from studen ...

  6. 聊聊flink的Async I/O

    // This example implements the asynchronous request and callback with Futures that have the // inter ...

  7. 【CF666E】Forensic Examination（后缀自动机，线段树合并）

    [CF666E]Forensic Examination(后缀自动机,线段树合并) 题面 洛谷 CF 翻译: 给定一个串\(S\)和若干个串\(T_i\) 每次询问\(S[pl..pr]\)在\(T_ ...

  8. Linux 查询命令

    which       查看可执行文件的位置 whereis    查看文件的位置 locate       配合数据库查看文件位置 find          实际搜寻硬盘查询文件名称 (find也 ...

  9. Linux（六）shell操作实用技巧

    一.shell操作日期时间 linux 系统为我们提供了一个命令 date,专门用来显示或者设置系统日期时间的.      语法格式为:      date [OPTION]... [+FORMAT] ...

  10. 使用Hystrix进行微服务降级管理

    前言:目前我们的项目是微服务架构,基于dubbo框架,服务之间的调用是通过rpc调用的.刚开始没有任何问题,项目运行健康.良好.可是过了一段时间,线上总有人反应查询订单失败,等过了一段时间才能查到.这 ...