CSS好看布局是一個網頁設計中非常重要的部分,它可以使網頁看起來更加美觀和專業。下面我們來分享一些CSS好看布局代碼。
/* 標題樣式 */ h1 { font-size: 2.5rem; text-align: center; } /* 導航樣式 */ nav { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: #fff; padding: 1rem; } nav a { color: #fff; text-decoration: none; font-size: 1.2rem; margin: 0 1rem; } /* 主體布局 */ .container { margin: 0 auto; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: space-between; } /* 卡片布局 */ .card { background-color: #fff; border-radius: 5px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); margin: 1.5rem 0; padding: 1rem; width: 30%; box-sizing: border-box; } .card img { width: 100%; height: auto; border-radius: 5px; margin-bottom: 1rem; } .card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .card p { font-size: 1.2rem; }
上述代碼展示了一個典型的網頁布局。標題、導航和主體布局都擁有一定的特色,但也有一些相似之處,比如使用了一致的字體、顏色和間距。卡片布局則是一個非常流行的設計元素,其代碼使用了靈活的盒子模型和相對尺寸,使得卡片大小可以自適應各種設備。
下一篇css好看的噴漆