在Web前端設計中，CSS無疑是必不可少的技術之一，王者榮耀作為一款成功的游戲，其官網也需要一個良好的CSS設計來吸引用戶。本文將介紹如何用CSS寫出類似王者榮耀官網的網頁，讓您的網站煥然一新。

.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 10px;
}
.logo {
font-size: 2em;
color: #008fff;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav li {
margin-right: 20px;
list-style: none;
}
.nav li a {
text-decoration: none;
color: #333;
font-weight: bold;
transition: all 0.3s ease;
}
.nav li a:hover {
color: #008fff;
}
.banner {
height: 400px;
position: relative;
}
.banner img {
width: 100%;
height: 100%;
}
.banner h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
font-size: 4em;
color: #fff;
text-shadow: 1px 1px 5px #000;
text-align: center;
}
.main {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.news {
width: 700px;
}
.news h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.news p {
line-height: 1.5;
}
.sidebar {
width: 300px;
}
.sidebar h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.sidebar ul li {
list-style: none;
margin-bottom: 10px;
}
.sidebar ul li a {
text-decoration: none;
color: #008fff;
}
.sidebar ul li a:hover {
color: #333;
}

以上CSS代碼是一個簡單的王者榮耀官網頁面的樣式代碼，您可以根據具體需求進行修改和設計，將其應用于您的網頁中。