首页用html设计一个浮动网页，并将网页设计成长方形含有上下条状中间三个竖状长方形五个区块

用html设计一个浮动网页，并将网页设计成长方形含有上下条状中间三个竖状长方形五个区块

时间: 2023-12-06 15:44:36 浏览: 151

以下是一个简单的HTML代码，可以实现一个浮动网页，包含上下条状中间三个竖状长方形五个区块。你可以根据自己的需要进行修改和美化。 ``` <!DOCTYPE html> <html> <head> <title>浮动网页</title> <style type="text/css"> .container { width: 500px; height: 400px; margin: 0 auto; border: 1px solid black; overflow: hidden; } .top { height: 50px; background-color: #f2f2f2; border-bottom: 1px solid black; } .bottom { height: 50px; background-color: #f2f2f2; border-top: 1px solid black; } .left { width: 30%; height: 300px; float: left; background-color: #e6e6e6; border-right: 1px solid black; } .middle { width: 40%; height: 300px; float: left; background-color: #f2f2f2; border-right: 1px solid black; border-left: 1px solid black; } .right { width: 30%; height: 300px; float: right; background-color: #e6e6e6; border-left: 1px solid black; } </style> </head> <body> <div class="container"> <div class="top"></div> <div class="left"></div> <div class="middle"></div> <div class="right"></div> <div class="bottom"></div> </div> </body> </html> ``` 在这个代码中，我们使用了一个名为“container”的div作为整个浮动网页的容器，宽度为500像素，高度为400像素，居中显示，并设置了1像素的黑色边框和隐藏溢出内容。然后，我们定义了五个区块，分别是顶部条状区块、下部条状区块、左侧竖状长方形区块、中间竖状长方形区块和右侧竖状长方形区块。我们使用了不同的CSS样式来设置它们的大小、位置和背景颜色，并使用了浮动和边框来实现它们的排列和分隔。你可以将这段代码保存为一个HTML文件，并在浏览器中打开它，来查看这个浮动网页的效果。

阅读全文