小米官网css转成less

html-css013

小米官网css转成less,第1张

应用程序中转换。LESS是一种动态样式表语言，扩展了CSS的功能，Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性。在小米官网中，在应用程序中完成css转less，使CSS更易维护和扩展。

1、首先#big左浮动和#right右浮动，right你没有右浮动，right右浮动后设备宽高。

2、#heart不要设上边距，#small 设上填充，并更改相应数值。

3、CSS边框半径，很多浏览器不支持，改后在我电脑上只有360 6.3正常显示。

#big的圆角建议用背景图片做，这并没有改变纯CSS制做的原则。

以下为改动地方：

#heart {

width:33px

height: 77px

margin-left: 28px

margin-right: 28px

background-color:orange

display: block

}

#small {

width:89px

height: 77px

margin-left: 35px

margin-top: 35px

margin-right: 35px

background-color:white

border-radius: 0px 19px 0px 0px

padding-top: 28px

}

增加：

#right {

float: right

height: 140px

width: 33px

background-color: #FFA500

}