html+css网页开发 之 banner+导航栏悬浮在大背景上

效果图如下： 

将上面效果图划分成四块：

• 蓝色盒子为通栏大盒子
• 灰色盒子为版心，要水平居中对齐
• 紫色盒子在版心内，为subnav侧导航栏，要左对齐版心
• 绿色盒子在版心内，为course课程表，要右对齐版心

index.html

    




    
    

        
        

            

                
前端开发>
                
后端开发>
                
移动开发>
                
人工智能>
                
商业预测>
                
云计算&大数据>
                
运维&测试>
                
UI设计>
                
产品>
            
        
        
        

            
我的课程表
            

                

                    

                        
继续学习 程序语言设计
                        
正在学习-使用对象
                    
                        
继续学习 程序语言设计
                        
正在学习-使用对象
                    

                        
继续学习 程序语言设计
                        
正在学习-使用对象
                    
                    

                        
继续学习 程序语言设计
                        
正在学习-使用对象
                    
                
                全部课程
            
        
    

style.css 

*{
    margin: 0;
    padding: 0;
}
.w{
    width:1200px;
    margin: auto;
}
/* 通栏大盒子 */
li {
    list-style: none;
}
a {
    text-decration: none;
}
.banner {
    height: 421px;
    /* backdround: #blue */
}
/* 版心 */
.banner .w {
    height: 421px;
    /* 在版心内设置背景图 */
    background: url(images/banner2.png) no-repeat top center;
}
/* 侧边栏 */
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0,0.3);
}
.subnav ul li {
    height: 45px;
    line height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a:hover {
    color: #004aff;
}
.subnav ul li a span{
    float: right;
}
/* 课程表 */
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-alight: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd{
    padding-left: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #000;
}
.bd ul li h4{
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p{
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more{
    display: block;
    height: 38px;
    border: 1px solid #00a4fff;
    margin-top: 5px
    text-aligh: center;
    line-height: 38px;
    color: #00a4fff;
    font-size: 16px;
    font-weight: 700;
}