CSS（層疊樣式表）是Web頁(yè)面設(shè)計(jì)必不可少的技能之一，而正方形列表則是頁(yè)面設(shè)計(jì)中常用的布局方式之一。下面我們將學(xué)習(xí)如何使用CSS來(lái)創(chuàng)建一個(gè)漂亮的正方形列表。

/* 首先定義一個(gè)樣式類 */
.square-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
/* 定義列表項(xiàng)的樣式 */
.square-list li {
width: 150px;
height: 150px;
margin: 10px;
background-color: #f2f2f2;
border-radius: 5px;
text-align: center;
line-height: 150px;
font-size: 24px;
}

在上面的代碼中，我們首先定義了一個(gè)名為square-list的樣式類，它應(yīng)用于列表的父元素。這個(gè)樣式類包含了一些常見(jiàn)的樣式定義，例如將列表項(xiàng)的標(biāo)記去掉，設(shè)置外邊距和內(nèi)邊距為0，以及使用flex布局等等。

然后我們定義了一個(gè)列表項(xiàng)的樣式，它定義了每個(gè)列表項(xiàng)的寬度、高度、背景顏色、圓角、對(duì)齊方式等等。這個(gè)樣式可以根據(jù)自己的需求進(jìn)行調(diào)整，例如可以改變字體大小、文字顏色、邊框顏色等等。

接下來(lái)，我們?cè)贖TML中應(yīng)用這個(gè)樣式類：

<ul class="square-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

在上面的代碼中，我們創(chuàng)建了一個(gè)無(wú)序列表，并應(yīng)用了square-list這個(gè)樣式類。在列表中，每個(gè)li元素都會(huì)被渲染成一個(gè)正方形，并且它們會(huì)根據(jù)父元素的大小自動(dòng)排列。

最終的效果如下圖所示：

使用CSS來(lái)創(chuàng)建正方形列表非常簡(jiǎn)單，只需要一些基本的CSS知識(shí)和HTML代碼即可實(shí)現(xiàn)。使用這種布局方式可以使你的頁(yè)面看起來(lái)更加美觀和整潔。