大家好,我是一名前端開發(fā)工程師。今天我來介紹一下自己的CSS個人簡介。
/*------------------------個人信息樣式------------------------*/ .personal-info { display: flex; flex-direction: row; } .avatar { width: 100px; height: 100px; border-radius: 50%; margin-right: 20px; } .name { font-size: 24px; font-weight: bold; } .job { font-size: 18px; color: #666; margin-top: 10px; } /*------------------------自我介紹樣式------------------------*/ .self-introduction { margin-top: 30px; } .title { font-size: 20px; font-weight: bold; } .content { margin-top: 10px; font-size: 16px; } /*------------------------技能樣式------------------------*/ .skills { margin-top: 30px; } .skill-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .skill-list { display: flex; flex-wrap: wrap; } .skill { background-color: #eee; border-radius: 20px; padding: 5px 15px; margin-right: 10px; margin-bottom: 10px; font-size: 14px; } /*------------------------聯(lián)系方式樣式------------------------*/ .contact { margin-top: 30px; } .contact-title { font-size: 20px; font-weight: bold; } .contact-list { margin-top: 10px; } .contact-item { margin-bottom: 10px; font-size: 16px; }
個人信息模塊包含頭像、姓名和職位,使用flex布局實現(xiàn)左右對齊,頭像使用圓形邊框,姓名字體加粗,職位使用灰色字體。
自我介紹模塊包含標題和內(nèi)容,標題使用粗體字體,內(nèi)容使用適當?shù)淖煮w大小。
技能模塊包含標題和技能列表,其中技能使用灰色背景色和圓角邊框,使用flex-wrap實現(xiàn)自動換行。
聯(lián)系方式模塊包含標題和聯(lián)系信息列表,使用統(tǒng)一的字體樣式和間距,聯(lián)系方式列表使用margin-bottom實現(xiàn)間距。
上一篇css兩邊固定中間可伸縮
下一篇css個性滾動條