CSS3：个人资料卡片

 

包含左右2个部分，且左边涉及到js的简单classList切换达到动态显示效果。

1.index.html:

    
    
    
    
    


    

        

            

                

                    个人简介
                    工作经历
                    

                
                

                    

                        

                            
YinLei
                            
Android开发
                        
                        
                            点赞
                        
                    
                    

                        

                            我是菜鸟。请各位多多指教!hahhahahahhhhhahha
                        
                    
                    

                        

                            

                            

                            

                            

                        
                    
                

                

                    

                        

                            
Android
                            

                            

                                
2017~2020.02 
                                
四川成都xxxx
                            
                        
                        

                            
Flutter
                            

                            

                                
2017~2020.02 
                                
四川成都xxxx
                            
                        
                        

                            
Web
                            

                            

                                
2017~2020.02 
                                
四川成都xxxx
                            
                        
                    
                
            
 
            

                
            
        
    
    

2.index.css:

:root{
    --primary-color:#71b3dd;
    --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: Arial, Helvetica, sans-serif;
}

.wrapper{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.profile-card{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    column-gap: 12px;
    width: 627px;
    height: 374px;
    box-shadow: 0 0 22px 3px rgba(0, 0, 0, .18);
}

.profile-img{
    grid-column: 8 / 13;
    max-width: 238px;
    height: 100%;
    overflow: hidden;
    align-self: start;
    justify-self: end;
}

.profile-img img{
    width: 180%;
    object-fit: cover;
    transform: translate(-80px,-30px);
}

.content{
    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;
    /* width: 75px; */
    background: var(--primary-dark-color);
    position: absolute;
    bottom: -7px;
    left: 0;
    transition: .4s;
}

.content section{
    position: absolute;
    opacity: 0;
    transition: .3s ease-out;
}

.content section.active-section{
    opacity: 1;
}

.personal-info{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.title h1{
    font-size: 2em;
    font-weight: 500;
}

.title p{
    color: var(--text-color-gray);
    margin: 6px 0 18px 0;
}

.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;
}

.follow-btn .fas{
    font-size: 10px;
    margin-right: 6px;
}

.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;
}



/* 工作经历 */
.work-exps{
    color: var(--text-color-gray);
    display: grid;
    grid-template-rows: repeat(3,minmax(80px,auto));
}

.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;
    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;
}

3.index.js:

const navMenuItems = document.querySelectorAll('#nav-menu a');
const indicator = document.querySelector('.indicator');

// 设置指示器的点击切换
function handleMenuItemClick(target){
    navMenuItems.forEach(item=>{
        item.classList.remove('active');
        item.style='';
    });
    target.classList.add('active');
    indicator.style.width =`${target.offsetWidth}px`;
    indicator.style.left = `${target.offsetLeft}px`;

    //设置要展示的内容
    const cueerntSection = document.querySelector('.active-section');
    cueerntSection.classList.remove('active-section');
    const newCurrentSection = document.querySelector(`.${target.getAttribute('data-rel')}`);
    newCurrentSection.classList.add('active-section');
}

navMenuItems.forEach(item=>{
    item.addEventListener('click',e=>handleMenuItemClick(e.target));
    item.classList.contains('active') && handleMenuItemClick(item);
});