個人簡歷是我們向招聘者展示自己能力和成就的重要方式之一。借助CSS,我們可以為簡歷增加設計感和美觀度。下面是一個簡單的個人簡歷CSS代碼示例。
/*設置頁面樣式*/ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /*設置頭部樣式*/ header { background-color: #333; color: #fff; height: 80px; display: flex; justify-content: center; align-items: center; } /*設置頭部文字樣式*/ header h1 { font-size: 36px; } /*設置內容區樣式*/ section { max-width: 800px; margin: 0 auto; padding: 40px; } /*設置姓名樣式*/ .name { font-size: 36px; margin-bottom: 20px; } /*設置聯系方式樣式*/ .contact { font-size: 20px; margin-bottom: 20px; } /*設置工作經歷樣式*/ .job { margin-bottom: 20px; } /*設置工作經歷時間樣式*/ .job .time { font-weight: bold; margin-bottom: 10px; } /*設置工作經歷標題樣式*/ .job .title { font-size: 24px; font-weight: bold; margin-bottom: 10px; } /*設置工作經歷描述樣式*/ .job .description { font-size: 18px; margin-bottom: 10px; }
使用以上CSS代碼,我們可以為個人簡歷增加一些樣式和排版。例如,在HTML文件中,你可以使用以下代碼創建一個簡單的個人簡歷:
<header> <h1>個人簡歷</h1> </header> <section> <h2 class="name">張三</h2> <p class="contact">電話:13800000000 | 郵箱:zhangsan@example.com</p> <div class="job"> <p class="time">2020年6月 - 至今</p> <p class="title">市場部經理</p> <p class="description">負責公司市場推廣及銷售工作。</p> </div> <div class="job"> <p class="time">2018年3月 - 2020年5月</p> <p class="title">市場部主管</p> <p class="description">協助市場部經理進行市場推廣工作。</p> </div> </section>
以上簡歷示例中,我們將姓名和聯系方式放在了最上方,下面是工作經歷的列表。通過CSS,我們設置了姓名和聯系方式的樣式,為工作經歷增加了樣式和排版。這樣的個人簡歷既簡潔明了,又不失美觀感。接下來,你可以根據自己的需要修改CSS樣式,高效地打造出適合自己的個人簡歷。