在今天的文章中，我们将一起探索一个精心设计的商品橱窗布局，这个布局完全通过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>