在今天的文章中，我们将一起探索一个精心设计的商品橱窗布局，这个布局完全通过HTML和CSS来实现。这个布局不仅美观，而且功能强大，非常适合用于展示商品或任何需要网格化布局的内容。
效果图：
一、HTML结构
首先，我们来看看HTML的结构。整个页面由一个div容器包裹，容器内包含一个标题h1和一个div网格。标题简单地显示为“商品橱窗”，而网格则通过div元素来创建，每个div元素都包含一个商品名称（如“商品1”、“商品2”等）。
html<div id="container">
<h1>商品橱窗</h1>
<div id="grid">
<div class="item">商品1</div>
<!-- 其他商品项... -->
</div>
</div>二、CSS样式
接下来，我们来看看CSS如何为这个页面添加样式。
- 全局样式：首先，我们重置了所有元素的
margin和padding，以确保页面在不同浏览器中的一致性。然后，我们为body元素添加了display: flex和相关的justify-content、align-items属性，以将内容居中显示。背景色则使用了渐变效果，从粉色到热粉色，给人一种温暖而活力的感觉。 - 容器样式：
#container设置了最小宽度，内边距和背景色，使其在页面上形成一个清晰的边界。 - 网格样式：
#grid是真正的布局核心。我们使用了CSS Grid布局来创建一个3x3的网格。每个网格项的最小宽度和高度都设置为minmax(300px, 1fr)，这意味着网格项会根据可用空间进行伸缩，但最小宽度和高度不会小于300px。网格项之间的间距设置为15px，背景色为绿黄色，与容器的背景色形成对比。 - 网格项样式：
.item类定义了每个网格项的样式。我们为其添加了圆角、固定高度、背景色、文字居中、字体大小和颜色等样式。此外，还添加了box-sizing: border-box以确保内边距和边框不会增加元素的总宽度和高度。最后，我们为网格项添加了阴影效果，使其看起来更加立体和吸引人。 - 标题样式：
h1标题居中显示，高度和行高都设置为50px，以确保文字垂直居中。标题的颜色为红色，背景色为黄色，与页面的整体风格相协调。
三、总结
通过这个示例，我们可以看到HTML和CSS的强大之处。仅仅使用这两个工具，我们就可以创建出既美观又实用的网页布局。这个商品橱窗布局不仅展示了CSS Grid布局的强大功能，还通过精心设计的样式和颜色搭配，为用户提供了一个舒适和吸引人的购物体验。希望这篇文章能帮助你更好地理解和应用HTML和CSS来创建自己的网页布局！
四、完整代码：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格布局</title><style>*{margin: 0;padding: 0;}body{display: flex;justify-content: center;align-items: center;height: 100vh;background-image: linear-gradient(pink,hotpink);}#container{min-width: 1000px;padding:30px;background-color: #eee;}#grid{padding:30px;min-width: 940px;display: grid;grid-template-columns: repeat(3,minmax(300px,1fr));grid-template-rows: repeat(3,minmax(200px,1fr));gap: 15px;background-color: greenyellow;}.item{border-radius: 20px;height: 200px;background-color: rgba(0, 0, 255, 0.7);display: flex;justify-content: center;align-items: center;font-size: 55px;color: #ff0;box-sizing: border-box;box-shadow: 2px 2px 3px 2px purple;text-shadow: 2px 2px 2px red;}h1{text-align: center;height: 50px;line-height: 50px;color: #f00;background-color: #ff0;}</style></head><body><div id="container"><h1>商品橱窗</h1><div id="grid"><div class="item">商品1</div><div class="item">商品2</div><div class="item">商品3</div><div class="item">商品4</div><div class="item">商品5</div><div class="item">商品6</div><div class="item">商品7</div><div class="item">商品8</div><div class="item">商品9</div></div></div></body></html>