<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#img{
width:200px
height:200px
border:100px solid green
border-left-color: red
margin:100px
border-radius:50%
-webkit-animation:circle 1s infinite linear
-moz-animation:circle 1s infinite linear
}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg)}
100%{ transform:rotate(360deg)}
}
@-moz-keyframes circle{
0%{ transform:rotate(0deg)}
100%{ transform:rotate(-360deg)} /* 正负控制方向 */
}
</style>
</head>
<body>
<div id="img"></div>
</body>
</html>
左浮动即float:left，使布局元素靠左浮动。右浮动即float:right，使布局元素靠右浮动。在网页布局中结合这两种布局方式可以设计出千变万化的布局形式！只要发散你的思维，开拓你的想象相信定能设计出好的作品！祝你成功！1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
