html5学习小结，float练习。

来源：互联网发布：php mbstring 编辑：程序博客网时间：2024/05/22 17:45

经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：

下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>float练习</title><style>.all{width: 620px;text-align: center;border:1px solid black;overflow: hidden;}.all .head{border:1px solid red;width: 122px;height: 120px;float: left;}.clear{clear: both;height: 0px;overflow: hidden;}.all .six{float: left;width: 404px;height: 182px;border:1px solid black;}.all .seven{width: 212px;height: 222px;float: right;border:1px solid black;}.all .ba{width: 257px;height: 187px;float: left;border:1px solid black;}.all .jiu{width: 145px;height: 187px;float: left;border:1px solid black;}.all .d10{width: 212px;height: 246px;float: right;border:1px solid black;}.all .d11{width: 404px;height: 97px;float: left;border:1px solid black;}.all .d12{float: left;width: 618px;height: 72px;border:1px solid black;}</style></head><body><div class="all"><div class="head">1</div><div class="head">2</div><div class="head">3</div><div class="head">4</div><div class="head">5</div><div class="clear"></div><div class="six">6</div><div class="seven">7</div><div class="ba">8</div><div class="jiu">9</div><div class="d10">10</div><div class="d11">11</div><div class="d12">12footer</div></div></body></html>

0 0