首页使用html和css完成下面的网页 1 ————————————————— 2 ————————————————— 3 ————————————————— 4 ————————————————— 5 —————————————————

使用html和css完成下面的网页 1 ————————————————— 2 ————————————————— 3 ————————————————— 4 ————————————————— 5 —————————————————

时间: 2024-10-12 21:12:31 浏览: 39

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 结合可以用来创建静态网页布局。根据您的需求，这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>我的五行文字网页</title> <style> .row { display: flex; justify-content: space-between; } .column { width: calc(20% - 10px); box-sizing: border-box; padding: 10px; margin-bottom: 10px; } </style> </head> <body> <div class="row"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div> <div class="row"> <div class="column">4</div> <div class="column">5</div> </div> </body> </html> ``` 在这个例子中，我们首先定义了一个HTML文档结构，有两组`.row`元素，每组包含三个`.column`元素。CSS部分设置了`.row`使用弹性布局(`display: flex`)，并让列均匀分布在中间(`justify-content: space-between`)。每一行中的`.column`宽度固定为总宽度的20%，留出10像素的内边距和外边距，并通过`box-sizing: border-box`确保内容区域包括边框和内填充在内的总尺寸。这只是一个基础的示例，您可以根据实际需要调整样式，如字体、颜色等。

阅读全文