HTML CSS 實驗 6 是一項讓學(xué)生深入學(xué)習(xí) HTML 和 CSS 的實驗。在此實驗中，我們將學(xué)習(xí)如何創(chuàng)建一個響應(yīng)式網(wǎng)頁，并使用 CSS 屬性來使網(wǎng)頁樣式更加美觀和易于使用。 首先，讓我們來看一下如何創(chuàng)建一個響應(yīng)式網(wǎng)頁。在 HTML 中，我們可以使用 @media 查詢來設(shè)置不同屏幕尺寸下的樣式。例如，以下是一個簡單的響應(yīng)式網(wǎng)頁布局：

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
.container {
width: 90%;
}
}
@media (min-width: 992px) {
.container {
width: 80%;
}
}
@media (min-width: 1200px) {
.container {
width: 70%;
}
}

上述代碼中，我們定義了一個 .container 類，并設(shè)置其最大寬度為 1200px。在不同的屏幕尺寸下，我們通過 @media 查詢來設(shè)置容器的寬度。當(dāng)屏幕寬度大于等于 768px 時，容器寬度為 90%。當(dāng)屏幕寬度大于等于 992px 時，容器寬度為 80%。當(dāng)屏幕寬度大于等于 1200px 時，容器寬度為 70%。 接下來，我們將學(xué)習(xí)如何使用 CSS 屬性來美化網(wǎng)頁。以下是一些常用的 CSS 屬性：

font-size: 設(shè)置字體大小
color: 設(shè)置字體顏色
background-color: 設(shè)置背景顏色
border: 設(shè)置邊框樣式
text-align: 設(shè)置文本對齊方式
padding: 設(shè)置內(nèi)邊距
margin: 設(shè)置外邊距
display: 設(shè)置元素的展示方式（例如：inline、block、flex）
box-shadow: 設(shè)置陰影

這些屬性都可以用來美化您的網(wǎng)頁。例如，以下代碼將創(chuàng)建帶有陰影的矩形按鈕：

.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

這段代碼將創(chuàng)建一個 .btn 類，它將顯示為行內(nèi)塊元素，并設(shè)置自己的內(nèi)邊距和字體大小。它的字體顏色將是白色，背景顏色將是藍(lán)色。它還將具有圓角邊框和陰影效果。 總的來說，在 HTML CSS 實驗 6 中，我們將學(xué)習(xí)如何創(chuàng)建一個響應(yīng)式網(wǎng)頁，并使用 CSS 屬性來使網(wǎng)頁樣式更加美觀和易于使用。通過學(xué)習(xí)這些技能，您將能夠創(chuàng)建出令人印象深刻的網(wǎng)頁。