多列布局、声明字体及响应式背景图

多列布局

-webkit-column-count: 3;
/* 设置分成几列 */

-webkit-column-width: 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%;
}