個人簡歷css

這篇具有很好參考價值的文章主要介紹了個人簡歷css。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
         :root {
            /* 主藍(lán)色，按鈕，社交圖標(biāo) */
            --primary-color: #71b3dd;
            /* 主藍(lán)色，深，導(dǎo)航 */
            --primary-dark-color: #4489b5;
            --text-color-gray: #8b979f;
            --text-color-light-gray: #c1c7cb;
            --text-color-dark-gray: #5a6f7c;
        }
        
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            box-sizing: border-box;
            font-family: "Raleway", "PingFang SC", "Microsoft Yahei", sans-serif;
        }
        
        .wrapper {
            /* 柵格布局，居中卡片 */
            display: grid;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        
        .profile-card {
            display: grid;
            /* 12格柵格 */
            grid-template-columns: repeat(12, 1fr);
            /* 每個列之間的空隙是12px */
            column-gap: 12px;
            /* 卡片總寬度為627px */
            width: 627px;
            /* 卡片總高度為374px */
            height: 374px;
            box-shadow: 0px 0px 22px 3px rgba(0, 0, 0, 0.18);
        }
        
        .profile-image {
            /* 圖片占5列 */
            grid-column: 8 / 13;
            max-width: 238px;
            height: 100%;
            /* 隱藏圖片超出區(qū)域 */
            overflow: hidden;
            /* 垂直為靠上對齊 */
            align-self: start;
            /* 水平為靠右對齊 */
            justify-self: end;
        }
        
        .profile-image img {
            /* 圖片放大，然后只顯示一部分 */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .content {
            /* 左邊內(nèi)容占7列 */
            grid-column: 1 / 8;
            padding: 38px 28px 20px 33px;
            position: relative;
        }
        
        nav {
            margin-bottom: 24px;
            display: flex;
            position: relative;
        }
        
        nav a {
            color: var(--text-color-gray);
            text-decoration: none;
        }
        
        nav a.active {
            color: var(--primary-dark-color);
        }
        
        nav a:not(:last-child) {
            margin-right: 40px;
        }
        
        nav .indicator {
            height: 2px;
            background: var(--primary-dark-color);
            bottom: -7px;
            left: 0;
            position: absolute;
            transition: 0.4s;
        }
        
        .content section {
            /* 堆疊個人簡介和工作經(jīng)歷部分 */
            position: absolute;
            /* 默認(rèn)都不顯示  */
            opacity: 0;
            /* 淡出淡入效果 */
            transition: 0.3s ease-out;
        }
        
        .content section.active-section {
            /* 顯示active-section */
            opacity: 1;
        }
        /* 名字、身份與關(guān)注按鈕左右布局，各占一列，子?xùn)鸥癫皇芨笘鸥裼绊?，是個全新的柵格布局 */
        
        .personal-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        /* 名字 */
        
        .title h1 {
            font-size: 2em;
            font-weight: 500;
        }
        /* 身份 */
        
        .title p {
            color: var(--text-color-gray);
            font-size: 1em;
            margin: 6px 0 18px 0;
        }
        /* 關(guān)注按鈕 */
        
        .follow-btn {
            justify-self: end;
            height: 30px;
            background: var(--primary-color);
            border: none;
            color: white;
            padding: 0 27px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 30px;
        }
        /* 關(guān)注按鈕的加號 */
        
        .follow-btn .fas {
            font-size: 10px;
            margin-right: 6px;
        }
        /* 關(guān)于我部分 */
        
        .about-me {
            color: var(--text-color-dark-gray);
            font-weight: 300;
            text-align: justify;
        }
        /* 社交按鈕部分 */
        
        footer {
            margin-top: 70px;
        }
        
        footer ul {
            display: flex;
        }
        
        footer ul li {
            list-style: none;
        }
        
        footer ul li:not(:last-child) {
            margin-right: 30px;
        }
        
        footer .fab {
            color: var(--primary-color);
            font-size: 24px;
        }
        /* ********************************* */
        /* 工作經(jīng)歷，一共3條工作經(jīng)歷，所以創(chuàng)建了3行柵格布局 */
        
        .work-exps {
            color: var(--text-color-gray);
            display: grid;
            grid-template-rows: repeat(3, minmax(80px, auto));
        }
        /* 每個工作經(jīng)歷為三列柵格布局，分別為職位，分隔線、公司名和工作時間部分 */
        
        .work-exp-item {
            display: grid;
            /* 列之間的比例 */
            grid-template-columns: 5fr 1fr 7fr;
            align-items: center;
            justify-content: center;
        }
        /* 職位 */
        
        .position {
            font-size: 18px;
            font-weight: 500;
        }
        /* 分隔線 */
        
        .seperator {
            height: 43px;
            /* width: 1px; */
            border-left: 2px dotted #eaeff2;
        }
        /* 工作時間 */
        
        .time {
            color: var(--text-color-light-gray);
        }
        /* 公司 */
        
        .company {
            font-size: 14px;
            color: var(--text-color-dark-gray);
            margin-top: 9px;
        }
    </style>
</head>

<body>
    <!-- 個人卡片容器，居中卡片 -->
    <div class="wrapper">
        <!-- 個人卡片 -->
        <div class="profile-card">
            <!-- 卡片內(nèi)容，導(dǎo)航，個人簡介和工作經(jīng)歷 -->
            <div class="content">
                <!-- 導(dǎo)航 -->
                <nav id="nav-menu">
                    <!-- data-rel，在js里獲取當(dāng)前要展示哪個section，是個人簡介還是工作經(jīng)歷 -->
                    <a class="active" href="#" data-rel="about-me-section">個人簡介</a>
                    <a href="#" data-rel="work-exp-section">工作經(jīng)歷</a>
                    <!-- 當(dāng)前選中菜單的指示條 -->
                    <div class="indicator"></div>
                </nav>
                <!-- 關(guān)于我部分 -->
                <section class="about-me-section active-section">
                    <!-- 名字和身份信息 -->
                    <div class="personal-info">
                        <div class="title">
                            <h1>張金虎</h1>
                            <p>前端工程師</p>
                        </div>
                        <!-- 關(guān)注按鈕 -->
                        <button class="follow-btn">
                <i class="fas fa-plus"></i>關(guān)注
              </button>
                    </div>
                    <!-- 個人簡介的內(nèi)容 -->
                    <div class="about-me">
                        <p>
                            我是張金虎，我是一名前端工程師，畢業(yè)于美國斯蒂文斯理工學(xué)院，計算機(jī)科學(xué)碩士。曾在XX公司負(fù)責(zé)產(chǎn)品前端開發(fā)。擅長使用 React, Styled-components 開發(fā)可復(fù)用的視圖組件。
                        </p>
                    </div>
                    <!-- 社交圖標(biāo) -->
                    <footer>
                        <ul>
                            <li>
                                <a href="#"><i class="fab fa-weixin"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fab fa-weibo"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fab fa-github"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fab fa-linkedin"></i></a>
                            </li>
                        </ul>
                    </footer>
                </section>
                <!-- 工作經(jīng)歷部分 -->
                <section class="work-exp-section">
                    <!-- 工作經(jīng)歷容器 -->
                    <div class="work-exps">
                        <!-- 每條工作經(jīng)歷 -->
                        <div class="work-exp-item">
                            <!-- 職位 -->
                            <div class="position">前端工程師</div>
                            <!-- 分隔線 -->
                            <div class="seperator"></div>
                            <!-- 公司信息 -->
                            <div class="work-info">
                                <!-- 工作時間 -->
                                <div class="time">
                                    2018.07 ~ 2019.08 <i class="far fa-calendar"></i>
                                </div>
                                <!-- 公司名稱 -->
                                <div class="company">北京某某互聯(lián)網(wǎng)金融公司</div>
                            </div>
                        </div>
                        <div class="work-exp-item">
                            <div class="position">軟件工程師</div>
                            <div class="seperator"></div>
                            <div class="work-info">
                                <div class="time">
                                    2013.07 ~ 2016.07 <i class="far fa-calendar"></i>
                                </div>
                                <div class="company">北京某美國信息技術(shù)公司</div>
                            </div>
                        </div>
                        <div class="work-exp-item">
                            <div class="position">軟件工程師</div>
                            <div class="seperator"></div>
                            <div class="work-info">
                                <div class="time">
                                    2010.07 ~ 2010.12 <i class="far fa-calendar"></i>
                                </div>
                                <div class="company">北京某大軟件有限公司</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!-- 頭像 -->
            <aside class="profile-image"><img src="https://img2.baidu.com/it/u=3879468893,1797088383&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="我" /></aside>
        </div>
    </div>
    <script>
        // 獲取導(dǎo)航菜單項
        const navMenuItems = document.querySelectorAll("#nav-menu a");
        // 獲取指示條實例，用來做動畫
        const indicator = document.querySelector(".indicator");

        // 點擊菜單項時的事件處理函數(shù)
        function handleMenuItemClick(target) {
            // 取消所有active狀態(tài)和style樣式，為了重新觸發(fā)動畫
            navMenuItems.forEach(item => {
                item.classList.remove("active");
                item.style = "";
            });
            target.classList.add("active");
            // 設(shè)置指示條為菜單項的寬度
            indicator.style.width = `${target.offsetWidth}px`;
            // 設(shè)置指示條位置為菜單項的起始位置
            indicator.style.left = `${target.offsetLeft}px`;

            // 改變section，舊的active的section移除active狀態(tài)，并且淡出
            const currentSection = document.querySelector(".active-section");
            currentSection.classList.remove("active-section");

            // 獲取點擊的菜單項對應(yīng)的分區(qū)實例，如個人簡介或工作經(jīng)歷
            const newCurrentSection = document.querySelector(
                `.${target.getAttribute("data-rel")}`
            );
            newCurrentSection.classList.add("active-section");
        }

        navMenuItems.forEach(item => {
            // 每個菜單項點擊時調(diào)用事件處理函數(shù)
            item.addEventListener("click", e => handleMenuItemClick(e.target));

            // 首次頁面展示時，工作簡介菜單是active的，先觸發(fā)一次點擊處理
            item.classList.contains("active") && handleMenuItemClick(item);
        });
    </script>
</body>

</html>