為了讓網(wǎng)頁設(shè)計(jì)變得更加引人注目，CSS的作用就非常的重要。如果想要更快、更有效率的完成網(wǎng)頁設(shè)計(jì)，可以嘗試使用一些常用的CSS代碼。下面我們來分享一些優(yōu)秀的CSS代碼。

/*制作按鈕*/
.btn{
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
text-decoration: none;
font-size: 16px;
}
/*hover樣式*/
.btn:hover{
background-color: #0062cc;
}
/*制作響應(yīng)式文本*/
@media only screen and (max-width: 600px){
.text{
font-size: 12px;
}
}
/*使圖片在容器內(nèi)整體居中*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*去除a標(biāo)簽下的下劃線*/
a{
text-decoration: none;
}
/*使用純CSS制作鼠標(biāo)滾輪滾動動畫*/
body{
scroll-behavior: smooth;
}
/*使用flex布局制作響應(yīng)式導(dǎo)航欄*/
.nav{
display: flex;
justify-content: space-between;
align-items: center;
}
/*添加陰影效果*/
.box{
box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
/*使用CSS3制作圓角矩形*/
.rounded{
border-radius: 10px;
}
/*CSS漸變背景*/
.gradient{
background: linear-gradient(90deg, #ff4b2b, #ff416c);
}

以上就是一些常用的CSS代碼的分享，可以作為我們?nèi)粘ＴO(shè)計(jì)時的參考。當(dāng)然，這些代碼只是基礎(chǔ)的語法，如果想要實(shí)現(xiàn)更加高級的效果，還需要注重細(xì)節(jié)和實(shí)踐。希望這些代碼能夠?qū)Υ蠹矣兴鶐椭?/p>