在網頁中，CSS（層疊樣式表）可以為我們創建各種視覺效果。結構的樣式是CSS中非常重要的一部分，它們作為網頁呈現的“骨架”，為網頁提供了可讀性和可用性。

CSS結構樣式主要包括以下幾個方面：

html,body{
height:100%;
margin:0;
padding:0;
font-family: sans-serif;
font-size:16px;
}
.wrapper{
width:100%;
max-width:1200px;
margin:0 auto;
box-sizing:border-box;
padding: 0 20px;
}
.header{
height:80px;
background-color:#333;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
}
.nav{
display:flex;
justify-content:center;
align-items:center;
}
.nav ul{
list-style:none;
}
.nav li{
margin:0 20px;
}
.main{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-content:center
}
.main figure{
margin:20px;
}
.main img{
max-width:100%;
height:auto;
}
.footer{
height:50px;
background-color:#333;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
}

在這段代碼中，我們為整個頁面設置了HTML和Body的高度，為它們的Margin和Padding設置為0，并將基礎字體設為sans-serif，字號設為16像素。接下來，我們為容器設置了一個最大寬度為1200像素、自適應居中、盒子模型為Border-box的.wrapper樣式。這可以確保頁面上的所有內容都居中，其寬度不會超過1200像素。

接下來，我們為頭部和頁腳提供了背景顏色、文本顏色和高度，并為它們設置了Flexbox布局，使其水平居中和固定在頁面頂部和底部。我們還為導航欄提供了列表樣式，并設置了margin。最后，我們使用Flexbox布局將我們的主要內容居中，并視情況調整圖像大小。

所有這些結構樣式都是與網頁結構相關的，可以幫助我們制定良好的網頁規范和統一樣式。因此，在CSS設計中，要重視結構樣式的運用，不僅有助于頁面的可讀性和可用性，還有助于提高用戶體驗。