纯css 绘制小熊脸 float小练习

版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/weixin_43802738/article/details/86070549

这是一篇关于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>