首页web设计一个页面包含从上到下四个框架

web设计一个页面包含从上到下四个框架

时间: 2023-07-16 08:12:26 浏览: 86

网站框架设计

非常完整的网站拓扑结构图，

好的，下面是一个简单的示例代码，包含从上到下四个框架： ```html <!DOCTYPE html> <html> <head> <title>四个框架页面</title> <style> body { margin: 0; padding: 0; } .frame { width: 100%; height: 25vh; /* 让每个框架的高度占据屏幕的 25% */ background-color: #f5f5f5; border: 1px solid #ccc; box-sizing: border-box; text-align: center; padding-top: 10px; } </style> </head> <body> <div class="frame"> <h2>框架 1</h2> <p>这是第一个框架</p> </div> <div class="frame"> <h2>框架 2</h2> <p>这是第二个框架</p> </div> <div class="frame"> <h2>框架 3</h2> <p>这是第三个框架</p> </div> <div class="frame"> <h2>框架 4</h2> <p>这是第四个框架</p> </div> </body> </html> ``` 在上面的代码中，我们用 `div` 标签创建了四个名为 `frame` 的框架，并将每个框架的高度设置为屏幕高度的 25%。我们还使用 CSS 样式将每个框架的背景色设置为灰色，边框设置为灰色，文字居中并添加一些内边距以使其更具可读性。你可以根据自己的需要修改这些框架的内容和样式。

阅读全文