小米布局案例1:产品模块布局分析

 

　　类似于这样的产品模块,使用css+html布局来完成.

 

　　MI

 

　　*{

 

　　margin: 0;

 

　　padding: 0;

 

　　}

 

　　body{

 

　　background-color: #f5f5f5;

 

　　}

 

　　.box{

 

　　width:1100px;

 

　　height:400px;

 

　　margin: 200px auto;

 

　　}

 

　　.box1{

 

　　width:200px;

 

　　height:350px;

 

　　background-color: white;

 

　　margin: 10px 10px 10px 20px;

 

　　display:inline-block;

 

　　padding: 10px;

 

　　overflow: hidden;

 

　　transition: all 1s;

 

　　}

 

　　.box1:hover{

 

　　transform: scale(1.07);

 

　　}

 

　　.box1 img{

 

　　width: 100%;

 

　　}

 

　　.box1 h5{

 

　　text-indent: 25px;

 

　　}

 

　　.box1 p{

 

　　font-family: 宋体;

 

　　font-size: 10px;

 

　　color: #9e9494;

 

　　margin-top: 20px;

 

　　}

 

　　.box1 h4{

 

　　font-family: 微软雅黑;

 

　　color:red;

 

　　margin-top: 20px;

 

　　text-indent: 2em;

 

　　float: left;

 

　　}

 

　　#lgprice{

 

　　margin-top: 20px;

 

　　color: #9e9494;

 

　　}

 

　　圆角边框

 

　　border-radius:length;//数值越大,越圆.可以跟四个值,顺时针方向.

 

　　border-top-left-radius:xxpx;//设置左上角.

 

　　盒子阴影

 

　　box-shadow:h-shadow v-shadow blur spread color inset;//严格按照顺序来写

 

　　值

 

　　描述

 

　　h-shadow

 

　　必须,水平阴影的部分,可以是负值.

 

　　v-shadow

 

　　必须,垂直阴影的部分,可以是负值.

 

　　blur

 

　　可选,模糊距离.

 

　　spread

 

　　可选,阴影尺寸的位置.

 

　　color

 

　　可选,阴影的颜色.

 

　　inset

 

　　可选,可将外部阴影改为内部阴影,但是默认outset但是没必要写 .

 

　　小米布局案例2:增加阴影效果

 

　　box-shadow: 10px 10px 10px rgba(0,0,0,0.3);

 

　　很明显阴影的效果会出来.

 

　　浮动

 

　　为什么需要浮动?

 

　　使用行内块会出现空隙.

 

　　网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.

 

　　什么是浮动?

 

　　float属性用于创建浮动窗,将其移到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘.