CSS是一種網(wǎng)頁設(shè)計語言，它可以讓網(wǎng)站變得更加美觀和易于導(dǎo)航。在此篇文章中，我們將介紹10個頁面上常用的CSS技巧，并且將使用pre標(biāo)簽來演示相關(guān)代碼。

1. 導(dǎo)航欄：使用CSS可以輕松地創(chuàng)建一個漂亮的導(dǎo)航欄。以下是其基本代碼：

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.nav li {
list-style: none;
margin-right: 20px;
}
.nav a {
color: #fff;
text-decoration: none;
}

2. 效果按鈕：CSS可以為按鈕添加效果，如陰影和漸變。以下是其基本代碼：

.button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}
.button:hover {
background-color: #555;
cursor: pointer;
}

3. 背景圖片：CSS可以為頁面添加背景圖片。以下是其基本代碼：

body {
background-image: url("image/background.jpg");
background-size: cover;
background-repeat: no-repeat;
}

4. 三欄布局：CSS可以輕松創(chuàng)建三欄布局，可用于分別放置內(nèi)容。以下是其基本代碼：

.layout {
display: flex;
}
.left,
.right {
width: 30%;
background-color: #eee;
}
.center {
width: 40%;
}

5. 圖片邊框：CSS可以為圖片添加邊框，以增加視覺效果。以下是其基本代碼：

img {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
}

6. 注釋框：CSS可以為內(nèi)容添加注釋框，以突顯重點。以下是其基本代碼：

.comment {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}

7. 標(biāo)題樣式：CSS可以為標(biāo)題添加樣式，如顏色和字體。以下是其基本代碼：

h1 {
font-size: 32px;
font-family: "Arial", sans-serif;
color: #333;
}

8. 表格樣式：CSS可以為表格添加樣式，以增強可讀性。以下是其基本代碼：

table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #555;
color: #fff;
}

9. 列表樣式：CSS可以為列表添加樣式，以增加視覺效果。以下是其基本代碼：

ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
li:last-child {
border-bottom: none;
}

10. 文本樣式：CSS可以為文本添加樣式，如顏色和字體。以下是其基本代碼：

p {
font-size: 16px;
line-height: 1.5;
color: #333;
}

總結(jié)：以上這些CSS技巧可以用于頁面設(shè)計的不同方面，從導(dǎo)航欄到文本樣式，都可以給網(wǎng)站帶來更好的效果。我們鼓勵你在使用這些技巧時自己動手實踐，并且適當(dāng)?shù)馗鶕?jù)您的需要進行調(diào)整。