CSS 代碼往往難以理解，但對于旅游網站來說，CSS 編寫至關重要。

/* 常見的布局樣式 */
.container {
width: 960px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #f5f5f5;
height: 60px;
/* 使 logo 居中 */
display: flex;
align-items: center;
}
nav {
float: right;
margin-right: 20px;
}
.nav-link {
display: inline-block;
padding: 10px;
}
.hero {
position: relative;
height: 400px;
background-image: url(../images/hero-image.jpg);
background-size: cover;
/* 深色蒙版制造明顯對比 */
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
/* 垂直水平居中并設置寬度 */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero h1 {
font-size: 50px;
margin-top: 0;
}
.hero p {
font-size: 24px;
}
.cta {
height: 100px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.cta h2 {
margin: 0;
}
.cta p {
margin: 0;
}
/* 處理主要內容區域樣式 */
.main-content {
display: flex;
}
.content {
width: 70%;
margin-right: 30px;
}
.sidebar {
width: 30%;
background-color: #f5f5f5;
padding: 20px;
}
.footer {
margin-top: 20px;
background-color: #f5f5f5;
height: 100px;
text-align: center;
/* 固定在底部 */
position: absolute;
bottom: 0;
width: 100%;
}

以上樣式代碼描述了一個典型的旅游網站的頁面結構。通過這些 CSS 樣式，可以創建優美且易于瀏覽的網站。