個人博客CSS樣式設計

每個人的博客都有自己獨特的氣息，CSS樣式也是如此，本篇文章將給大家分享個人清新博客CSS的設計。

整體風格

個人博客整體風格以清新為主，色調以淡藍色為主調搭配白色作為底色，背景使用淡雅的卉草圖案，整體布局簡潔明了。

CSS樣式

/* body樣式 */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #444;
background-color: #f5f5f5;
background-image: url(images/bg.png);
background-repeat: repeat;
margin: 0;
padding: 0;
}
/* header樣式 */
header {
background-color: #fff;
height: 50px;
line-height: 2.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* main樣式 */
main {
margin-top: 50px;
padding: 20px;
}
/* footer樣式 */
footer {
margin-top: 50px;
padding: 20px;
background-color: #fff;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
text-align: center;
}
/* 標題樣式 */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-top: 20px;
margin-bottom: 10px;
}
/* 鏈接樣式 */
a {
color: #46b8da;
text-decoration: none;
}
a:hover {
color: #23527c;
text-decoration: underline;
}
/* 圖片樣式 */
img {
max-width: 100%;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}

總結

個人博客CSS的設計要符合個人的氣質，善用色調搭配，將整體風格表現出來。希望以上CSS樣式對有需要的人士提供一些借鑒性的幫助。