<!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. 3.结对编程成果报告（小学生四则运算的出题程序，Java实现）

    程序名称:小学生四则运算的出题程序 先附上代码: package com.makequestion; import java.text.DecimalFormat;import java.util.R ...

  2. Navicat Premium_11.2.7简体中文版 破解版本 windows版本

    亲测可用 自己一直在用的 https://pan.baidu.com/s/1VVKKQoIKVB0BgNXBK4YTrQ

  3. mac下mysql5.7.10密码问题

    mysql5.7.10刚安装好,会生成一个随机密码. 如果没记住这个随机密码,那么到mysql/bin/下执行mysql_secure_installation命令 按照提示重置密码和其他选项. ps ...

  4. c语言----程序记录

    1.结构体写入文件,读取 #include <stdio.h> #include <string.h> #include <stdlib.h> #define ma ...

  5. mysql有索引和无索引的查询速度对比

    演示100万级数据有索引和无索引的情况下的查找速度:

  6. jQuery 获取和设置radio 和 checkbox 值的操作

    jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用 1.取值 表单如下: <div class=" ...

  7. ZOJ1827_The Game of 31

    这是一个比较经典的博弈题目,今年网赛好像是南京赛上有一个类似的题目. 这种题目是没有一定公式或者函数的,需要自己dp或者搜索解决. 题意为分别给你4张写有1,2,3,4,5,6的卡片共24张,每次轮流 ...

  8. Django之form表单提交并验证

    1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...

  9. 测试开发linux面试之三：后台进程之操作

    Hi,大家好我是Tom,继上次分享之后这次给大家带来新的知识. 进程是Linux系统中一个非常重要的概念.Linux是一个多任务的操作系统,系统上经常同时运行着多个进程.我们不关心这些进程究竟是如何分 ...

  10. Linux内核分析4

    周子轩原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 使用库函数API和C代码 ...