项目-简历-Nancy

该简历主要由bootstrap的栅格组成，其中掺杂了缩略图。
页眉最初是想用巨幕来做的，但做出来的效果不是很理想且代码量较多，因此放弃选用css来布局。个人信息中的小图标也是同理，如果用列表来承载的话则会多出很多步骤。
这个项目给我最大的感触就是：完成一个布局有很多种方式，其中没有正确的方法，只有最优的选择。

HTML

    
    
    
    
    
    
    
    


    
    

        

            

                

                    
                
                

                    

                        
Nancy
                        
求职意向：前端工程师
                        


                        
                        

                            
                             1982  
                             微信：bchen1998  
                             邮箱：[email protected]
                        
                    
                
            
        
        

            
            

                

                    
教育背景
                
                

                    
                    

                        
2018.6-现在
                        
程序园儿童编程
                        
前端学习
                    
                    
                    

                        
主修课程:HTML、CSS、JavaScript、jQuery等
                    
                    
                    

                        
以上课程均顺利完成并掌握
                    
                
            
       
        
        

            

                
项目经验
            
            

                
                

                    
2018.08-现在
                    
动态网页
                    
程序员
                
                
                

                    
项目介绍：学会了JavaScript,我的网页能和别人互动了！！！！
                
                
                

                    
2018.07-2018.08
                    
静态网页
                    
程序员
                
                
                

                    
项目介绍：学会了CSS，调了一天样式，才把网页弄得比较好看，但还是土里土气的。
                
                
                

                    
2018.06-2018.07
                    
网页框架
                    
程序员
                
                
                

                    
项目介绍：用刚学会的超文本语言(HTML)写了一个简单的页面，只有两个词"Hello World"。
                
            
        
        
        

            

                
个人介绍
            
            

                
                

                    
「程序媛计划」创始人。前微软公司程序员。
                
                
                

                    
RoboCup2017 Koov赛团队金牌。
                
                
                

                    
儿童编程专家。好热闹茶市，橙旭园儿童编程创始人。
                
                
            
    
        
        
        

            

                
个人技能
            
            

                
                

                    
熟悉使用office办公软件（Word、Excel、PowerPoint）
                
                
                

                    
编程语言：HTML 和 JavaScript
                
                
                

                    
编程环境：Visual Studio Code
                
                
            
        
        
        

            

                
作品展示
            
            

                
                

                    

                        
                        

                            
静态页面1
                            
Alice的自我介绍
                        
                    
                    

                        
                        

                            
静态页面2
                            
她和他的故事
                        
                    
                
                
                

                

                    

                        
                        

                            
静态页面3
                            
她和他的故事
                        
                    
                    

                        
                        

                            
静态页面4
                            
Alice的自我介绍
                        
                    
                
            
        
    
        

            

                
                

                    关注-微博
                
            
        
    

CSS

/*#img_box{
    display: inline-block;
    height: 350px;
    background-color: rgb(134, 218, 218);
    text-align: center;
}
img{
    border: 1px solid;
    border-radius: 10px;
    padding: 15px;
    margin-top: 70px;
    background-color: antiquewhite;
}
ul{
    display: inline-block;
    list-style-type: none;
    background-color: rgb(70, 122, 168);
    height: 350px;
    padding-top: 50px;
    
}
li{
    line-height: 4;
}*/
/*页眉部分*/
.img_box{
    background-color: #aad2ec;
    height: 262.5px;
}
.text_box{
    color: #fff;
    background-color: #347ab6;
    height: 262.5px;
}
h1{
    font-size: 48px;
}
.img-responsive{
    max-height: 202.5px;
    margin-top: 30px;
    background-color: #eee;
}
#info_box{
    margin: 30px;
    line-height: 18px;
}
.cv-container{
    margin-top: 30px;
}
/*
ul{
    list-style-type: none;
    
}
li{
    display: inline;
}*/
/*中间左侧*/
.left-side{
    width: 130px;
    height: 60px;
    padding: 10px;
    font-weight: bold;
    font-size: 23px;
    color: #347ab6;
    border:5px solid #347ab6;
    text-align: center;
    margin:50px auto;
}
/*中间右侧*/
.fonts{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
.second-border{
    border-bottom: 3px solid #347ab6;
    margin-top: 50px;
}
.textRight{
    color: #85888a;
    font-size: 18px;
}
.image_text{
    padding-left: 10px;
}
.alice{
    font-size: 18px;
    color: #161515;
}
/*为中间部分最后四张图片之间设置间距*/
.thumbnail{
    width: 400px;
    margin-left: 30px;
}
.footer{
    margin:30px 0;
    padding:50px;
    /*height: 100px;直接设置内边距就可以把背景撑大，不需要再单独设置页脚的高度*/
    background: #CCC;
    font-size: 20px;
}

最终成果如下图：

nancy.png