CSS實(shí)例排行榜是一個(gè)非常有用的工具，可以幫助我們更好地理解和掌握CSS的技能。下面是一些CSS實(shí)例排行榜的示例代碼，供大家參考。

<div style="background-color: #fff; color: #000; font-size: 16px; padding: 10px;">1. 在頁面中心顯示一個(gè)div并添加動畫</div>
<style>
#box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<div id="box"></div>
2. 實(shí)現(xiàn)響應(yīng)式布局
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item {
width: 100%;
max-width: 500px;
height: 200px;
margin: 10px;
background-color: #ccc;
}
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: calc(33.33% - 20px);
margin: 10px;
}
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
3. 實(shí)現(xiàn)導(dǎo)航欄hover效果
<style>
.nav a {
color: #000;
text-decoration: none;
padding: 10px;
}
.nav a:hover {
color: #fff;
background-color: #000;
}
</style>
<nav class="nav">
<a href="#">首頁</a>
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
</nav>