在構建網站的過程中，CSS是不可或缺的一部分。而為了讓網站更為美觀，很多時候我們需要使用一些CSS模板代碼。但是，有一些人可能擔心使用這些代碼會產生版權問題或需要付費。其實，有很多優秀的CSS模板代碼可以免費使用，下面我們來分享一些。

/* 響應式導航欄 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
color: #333;
position: relative;
z-index: 1;
height: 80px;
padding: 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
nav ul {
display: flex;
}
nav li {
margin-left: 20px;
}
@media (max-width: 800px) {
nav {
flex-direction: column;
height: auto;
padding: 20px;
}
nav ul {
margin-top: 20px;
flex-direction: column;
}
nav li {
margin: 0;
}
}

以上代碼就是一個響應式導航欄的例子。這段代碼使用了flex布局，可以自適應不同分辨率的屏幕。同時，這個模板代碼可以通過修改顏色、間距等樣式來實現不同的導航欄效果。

/* 簡單的圖片卡片 */
.card {
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
.card .description {
padding: 20px;
}
.card h2 {
font-size: 24px;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
color: #333;
}
.card a {
display: block;
margin-top: 20px;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 5px;
}
.card a:hover {
background-color: #444;
}

這是一個簡單的圖片卡片，可以用于展示產品或服務。它使用了圓角、陰影和漸變等樣式，讓卡片看起來更具立體感。同時，這個模板代碼可以通過修改文字大小、顏色等樣式來適應不同的需求。

總之，使用免費的CSS模板代碼可以大大簡化我們的工作，同時還可以更快速地構建出一個美觀的網站。但同時要注意，使用別人的代碼也要遵循一些原則，比如不要盜用他人的作品或者修改別人的標識。只有尊重他人的工作，才是正確的道路。