大家好,我是一位前端工程師,今天我要向大家分享我的自我介紹網站代碼中的CSS部分。以下是我的代碼:
body { background-color: #F9FAFB; font-family: Arial, sans-serif; font-size: 16px; margin: 0; padding: 0; color: #4A4A4A; } header { background-color: #FFFFFF; height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 20px; } h1 { margin: 0; font-size: 32px; } nav { display: flex; justify-content: center; } nav ul { display: flex; list-style: none; margin: 0; padding: 0; } nav li { padding: 10px; } nav a { text-decoration: none; color: #4A4A4A; } main { display: flex; justify-content: center; align-items: center; height: 500px; margin-top: 50px; } section { background-color: #FFFFFF; padding: 50px; border-radius: 10px; box-shadow: 0px 4px 6px #00000029; }
以上代碼是我自我介紹網站頁面CSS部分的完整代碼。其中,我首先定義了body的背景顏色、字體樣式和大小等基礎樣式,然后針對頁面的header、nav、main以及section區域進行了具體的樣式定義。
通過使用flex布局,我使得頁面看起來更加整齊、美觀。同時,我也使用了陰影等效果,增加了3D效果。
通過以上的CSS代碼,不僅讓我的自我介紹網站頁面看起來更加美觀,也帶來了更好的用戶體驗。感謝大家閱讀!
上一篇css自帶請填寫此字段
下一篇css自我介紹代碼模板