<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ height: 40px; line-height: 40px; background-color: gold; } </style> </head> <body style="margin: auto"> <div class="header"> <div style="float: left">收藏本站</div> <div style="float: right"> <a>登录</a> <a>注册</a> </div> </div> <div style="width: 300px; border: 1px solid purple;"> <div style="width: 98px;height: 30px;border: 1px solid royalblue; background-color: greenyellow; float: left"></div> <div style="width: 98px;height: 30px;border: 1px solid aquamarine; background-color: brown; float: left"></div> <div style="width: 98px;height: 30px;border: 1px solid royalblue; background-color: greenyellow; float: left"></div> <div style="width: 98px;height: 30px;border: 1px solid aqua; background-color: greenyellow; float: left"></div> <div style="width: 98px;height: 30px;border: 1px solid royalblue; background-color: darkkhaki; float: left"></div> <div style="clear: both"></div> <!--加入这个标签可以使大边框包住里面这一堆的float--> </div> </body> </html>
CSS基础(5.float应用实例)
最新推荐文章于 2021-09-26 21:46:46 发布