zoukankan      html  css  js  c++  java
  • 多列布局、声明字体及响应式背景图

    多列布局

    -webkit-column-count: 3;
    /* 设置分成几列 */
    -webkit-column- 300px;
    /* 当列宽*列数乘积大于盒子总宽,会自动调整列数 */
    -webkit-column-gap: 60px;
    /* 调整列之间的宽度 */

    声明字体

    @font-face {
        font-family: 'diyfont';  /* 字体名字可以随便取 */
        /* source:以下代码都是用来导入字体文件的 */
        src: url('diyfont.eot');  /* IE9+ */
        src: url('diyfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
             url('diyfont.woff') format('woff'),  /* chrome、firefox */
             url('diyfont.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('diyfont.svg#fontname') format('svg');  /* iOS 4.1- */
        /* 导入多个字体文件,目的是为了兼容各个浏览器 */
        font-weight: normal;
        font-style: normal;
    } 

    响应式背景图

    .banner {
        padding-bottom: 45%;  /* 百分比的值是width的百分比*/
        background: url(images/1.jpg) no-repeat;
        border: 1px solid red;
        background-size: 100%;
    }
  • 相关阅读:
    L1-031 到底是不是太胖了
    L1-030 一帮一
    PyCharm--git配置
    websocket--python
    UDP--python
    TCP--python
    pytest--metadata
    pytest--xdist
    pytest--夹具
    pytest--变量
  • 原文地址:https://www.cnblogs.com/crazier/p/12469646.html
Copyright © 2011-2022 走看看