CSS模板代碼可以讓網(wǎng)站變得更加好看和舒適，今天我們來分享一些好看的CSS模板代碼。 首先，我們來看一下預設(shè)模板代碼：

/* Reset CSS */
body,html,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em, img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; }
body { font-size: 12px; line-height: 1.5; }
ol,ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
/* End of Reset CSS */
/* Global CSS */
body {
background-color: #f5f5f5;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.container {
margin: 0 auto;
max-width: 1200px;
padding: 20px;
}
/* End of Global CSS */

可以看到，這是一個包含重置樣式和基本頁面樣式的模板。通過這個模板，我們可以使網(wǎng)頁更加穩(wěn)定和統(tǒng)一。 接下來，我們來看看一些可以為網(wǎng)頁增添美感的模板代碼：

/* Button CSS */
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #3498db;
border: 2px solid #2980b9;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
transition: all .3s ease;
}
.button:hover {
background-color: #2980b9;
border-color: #3498db;
cursor: pointer;
}
/* End of Button CSS */
/* Table CSS */
.table {
border-collapse: collapse;
font-size: 14px;
width: 100%;
max-width: 1200px;
margin: 20px auto;
}
.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.table th {
background-color: #f5f5f5;
}
/* End of Table CSS */
/* Hero Image CSS */
.hero {
background-image: url('img/hero.jpg');
background-size: cover;
min-height: 400px;
position: relative;
}
.hero-overlay {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
text-align: center;
z-index: 2;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 24px;
}
.hero-content p {
font-size: 24px;
margin-bottom: 24px;
}
/* End of Hero Image CSS */

以上模板代碼分別是按鈕樣式、表格樣式和英雄圖像（hero image）樣式。可以看到，通過這些模板代碼，網(wǎng)站可以變得更加美觀和舒適。 總結(jié)一下，CSS模板代碼可以為網(wǎng)站提供一致的基礎(chǔ)樣式和增添美感的高級樣式。希望以上代碼能夠幫助你創(chuàng)建出更好的網(wǎng)站。