開心餐廳是一個非常流行的餐廳品牌，它的網站的設計非常重要，用css進行網站的設計是非常必要的。下面我們介紹如何使用css制作開心餐廳的網站。

/* 定義全局樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
/* 定義導航欄樣式 */
nav {
background-color: #F77F30;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 20px;
}
nav h1 {
margin: 0;
color: #FFFFFF;
font-size: 24px;
}
nav ul {
list-style: none;
display: flex;
margin: 0;
}
nav li {
margin-left: 20px;
}
nav a {
text-decoration: none;
color: #FFFFFF;
}
/* 定義banner樣式 */
.banner {
background-image: url('banner.jpg');
background-size: cover;
height: 400px;
}
.banner h2 {
color: #FFFFFF;
font-size: 48px;
margin-top: 150px;
margin-left: 100px;
text-shadow: 2px 2px 2px #000000;
}
/* 定義菜單樣式 */
.menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
padding: 40px;
}
.menu-item {
background-color: #FFFFFF;
box-shadow: 2px 2px 2px #000000;
padding: 20px;
text-align: center;
}
.menu-item h3 {
font-size: 24px;
margin-top: 0;
}
/* 定義底部樣式 */
footer {
background-color: #EBEBEB;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
footer p {
margin: 0;
}

使用以上代碼可以為開心餐廳網站設計一個簡單而又美觀的頁面，導航欄、banner、菜單和底部都被定義了樣式。當改變html的內容，css樣式可以自適應變化，提高網站的可擴展性和可維護性。