如何用CSS语言”画”小米的logo

html-css010

如何用CSS语言”画”小米的logo,第1张

代码如下：

<html>

<head>

<style>

body{background-color: #ccc}

#main{background-color: #f57923

width: 415pxheight:300px

margin: 150px auto

border-radius: 25px}

#left,#right{background-color: #fff

margin-top:40px

height:220px}

#left{float:left

width:250px

margin-left:35px

border-top-right-radius: 65px

z-index: -99999}

#inner{background-color: #f57923

width:140px

height: 170px

margin-top:50px

border-top-right-radius: 40px

margin-left: 55px

z-index:10}

#center{background-color:#fff

position: relative

width: 50px

height: 125px

top:45px

left: 45px

z-index:999999}

#right{float: right

width: 50px

margin-right:35px}

</style>

</head>

<body>

<div id=”main”>

<div id=”left”>

<div id=”inner”>

<div id=”center”></div>

</div>

</div>

<div id=”right”></div>

</div>

</body>

</html>

在浏览器打开的效果

小米成功注册了全新的logo图标，由原来的橙黄色变成了黑白色。在普通人看来，这个图标好像和以前没有多大的变化，只是颜色变了，不过雷军称设计费高达200万元，这让很多网友理解不了。所以大部分的网友都觉得很不值，还不如自己设计的好看。

你觉得这个图标值吗？

一个图标居然价值200万，实在是令人感到不可思议，并且是个图标和以前的图标好像只是颜色变了，图案以及造型根本就毫无变化。不过据了解，小米的全新logo是由设计师原研哉设计的，设计理念是ALIVE，并且具备超椭圆的数学之美。现在这个logo不在局限于画面的一角，仿佛整个图标都有了生命。当然这只是设计师的解释罢了，普通网友也是看不明白的。毕竟这个logo真的和以前没有多大的不同，只是从橙黄色和白色变成了黑白色。并且以前的logo也是圆角的，现在也是圆角的，看起来真的差不多。

关于小米的介绍。

小米刚开始的时候做的是手机，并且要做到中国手机的第一品牌，现在确实是实现了曾经的梦想。不过现在小米也开发了别的业务，比如说智能家居，很多人的家中都有小米机器人或者净水机或者其他的东西。所以小米的智能家居已经渗透到了人们生活的方方面面，很多人都说这个家具确实是很好用的。如果你也想使用这些智能家居的话，你也可以去小米的旗舰店中购买一下。不过小编使用的手机就是小米的，所以感觉小米的手机也挺好用的。

总结

全新的logo将在3月的时候使用，所以现在我们所看到的logo还是以前的。

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

}