这是一篇关于float浮动的小练习,虽然代码写的很low,但感觉还挺有趣就分享下咯,哈哈。。。仅供参考哦!!!
不过要注意的是 IE9以下的版本 下会不兼容
先来看下效果吧
如下:
小熊还算可爱吧,辣么接下来就将代码呈上…
1.html结构布局
<div>
<p class='left-ear'></p>
<p class='right-ear'></p>
<p class='left-orbit'></p>
<p class='right-orbit'></p>
<p class='cheek'></p>
<p class='nose'></p>
<p class='mouth'></p>
<p class='left-cochlea'></p>
<p class='right-cochlea'></p>
<p class='left-eye'></p>
<p class='right-eye'></p>
<p class='right-eye-white'></p>
<p class='left-eye-white'></p>
<p class='nose-white'></p>
<p class='face'></p>
</div>
2.css布局样式
<style>
ul,ol{
padding:0;
list-style:none;
}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt{
margin:0;
}
div{
width:300px;
height:300px;
margin:50px;
padding:10px;
}
.left-ear{
float:left;
width:102px;
height:120px;
border-radius:50%;
border:1px solid #000;
background-color:#140303;
}
.right-ear{
float:right;
width:102px;
height:120px;
border-radius:50%;
border:1px solid #000;
background-color:#140303;
}
.left-orbit{
float:left;
width:90px;
height:72px;
margin:26px;
border-radius:144% 35% 144% 35%;
border:1px solid #000;
background-color:#000;
}
.right-orbit{
float:left;
width:90px;
height:72px;
margin:26px;
border-radius:35% 144% 35% 144%;
border:1px solid #000;
background-color:#000;
}
.cheek{
float:left;
width:200px;
height:110px;
margin: -52px 0px 0px 42px;
border-radius:50%;
border:1px solid #000;
background-color:#fbfbfb;
}
.nose{
float:left;
width:80px;
height:50px;
margin: -122px 0px 0px 104px;
border-radius:90% 90% 100% 100%;
border:1px solid #000;
background-color:#680200;
}
.mouth{
float:left;
width:20px;
height:20px;
margin: -54px 0px 0px 124px;
border-radius:50% 50% 50% 50%;
border:1px solid #000;
background-color:red;
}
.left-cochlea{
float:left;
width:50px;
height:50px;
margin: -250px 0px 0px 36px;
border-radius:50%;
border:1px solid #000;
background-color:#FFB5B2;
}
.right-cochlea{
float:left;
width:50px;
height:50px;
margin: -250px 0px 0px 212px;
border-radius:50%;
border:1px solid #000;
background-color:#FFB5B2;
}
.left-eye{
float:left;
width:20px;
height:20px;
margin: -152px 0px 0px 82px;
border-radius:50%;
border:1px solid #fbfbfb;
background-color:#000;
}
.right-eye{
float:left;
width:20px;
height:20px;
margin: -152px 0px 0px 183px;
border-radius:50%;
border:1px solid #fbfbfb;
background-color:#000;
}
.right-eye-white{
float:left;
width:10px;
height:10px;
margin: -152px 0px 0px 185px;
border-radius:50%;
border:1px solid #000;
background-color:#fbfbfb;
}
.left-eye-white{
float:left;
width:10px;
height:10px;
margin: -152px 0px 0px 90px;
border-radius:50%;
border:1px solid #000;
background-color:#fbfbfb;
}
.nose-white{
float:left;
width:35px;
height:13px;
margin: -119px 0px 0px 113px;
border-radius:100% 34% 100% 50%;
border:1px solid #000;
background-color:#fbfbfb;
}
.face{
box-shadow:-27px -32px 16px 0px #F0F0F0 inset;
width:300px;
height:300px;
border-radius:66% 66% 35% 35%;
border:1px solid #000;
background-color:#FFFFFF;
}
div:after{
display:block;
content:'';
clear:both;
}
</style>