華為作為一家知名的科技企業(yè)，網(wǎng)站設(shè)計也一直保持著領(lǐng)先的水平。今天，我們來學(xué)習(xí)一下如何用 CSS3 實現(xiàn)華為網(wǎng)頁的效果。

/* 設(shè)置body的背景色 */
body{
background-color: #f2f2f2;
}
/* 設(shè)置header的樣式 */
header{
background-color: #e60012;
height: 80px;
display: flex;
justify-content: space-between;
padding: 0 50px;
align-items: center;
}
/* 設(shè)置logo的樣式 */
.logo{
font-size: 40px;
font-weight: bold;
color: #fff;
}
/* 設(shè)置導(dǎo)航欄的樣式 */
nav{
display: flex;
justify-content: center;
align-items: center;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
display: block;
padding: 0 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover{
color: #e60012;
}
/* 設(shè)置banner的樣式 */
.banner{
height: 500px;
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
}
/* 設(shè)置main內(nèi)容區(qū)的樣式 */
main{
width: 1200px;
margin: 0 auto;
padding: 50px 0;
}
main h2{
font-size: 36px;
font-weight: bold;
margin-bottom: 30px;
}
main p{
font-size: 24px;
line-height: 1.5;
margin-bottom: 20px;
}
/* 設(shè)置footer的樣式 */
footer{
background-color: #000;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
footer p{
font-size: 24px;
margin-bottom: 0;
}

以上就是實現(xiàn)華為網(wǎng)頁樣式的 CSS3 代碼示例。通過這些樣式設(shè)置，我們可以實現(xiàn)華為網(wǎng)頁的美觀效果，提高用戶體驗。