web网页首页布局

效果展示：

html代码：

	
	 
	
	
	
    




    

        
        

            
            

            	个人空间站
                
                

                    
主页
                    
发展历程
                    
演讲力训练专家
                
            
            

                所有人可见
                
                

                    
张嘴就来”寄托的三个愿望
                    
发展历程
                    
演讲力训练专家
                
            
            

                输入暗号可见
                
                

                    
职场精英演讲力训练营
                    
总裁演讲力训练营
                    
青少年演讲力训练营
                    
演讲专题
                
            
            

                仅自己可
                 
                 

                    
口才树”理论体系
                    
演讲一阳指”模板
                    
三子”教育演讲体系
                
            
            

                群聊
                
                

                    
线上一对一辅导
               		
课后一对一辅导
                
            
            

                文件管理
                
                

                    
                    
14年只专注于演讲力训练
                    
演讲力训练总裁班
                    
成功人士的演讲班
                
            
            
        
	
 
 

	

    	
             
    	         
    	

        
    	
    	
    	
        
        
    


    

css代码：

@charset "utf-8";
/* CSS Document */
	*{
		margin:0 auto;
		padding:0;
		text-decoration:none;
	}
	
	body{
		background: url(../images/1.jpg);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#heada{
		width: 100%;
		position: absolute;
		top: 0;
}
	.nav li a{
		color: #000;
		font-size: 18px;
		}
	.nav ul{width: 1700px;}	
	.nav li{	
		color: #FFF;
		padding: 7px 10px;
		list-style: none;
		z-index: 999;
		}
	.nav{
		width: 100%;
		height: 39px;
		text-align: center;			
		background-color: #1f78dd;	
		background-color: rgba(255, 255, 255, 0.5);		
	}
	.navItem{	
		float: left;
		width: 0 auto;
		display: block;
	}
	.navItem:hover{
		background-color: #f1f0f5;
		color: #FFF;
	}
	.dropList{
		background-color:#f2f2f2;
		clear: both;
		text-align:left;
		position: absolute;
		top:38px;
		border:1px solid #000;
		border-radius:5px;
		display: none;
		width: 260px !important;
	}
	.dropItem a{color:#1e60b6;}
	.dropItem {
		margin:0px;
		position:static;
		z-index:999;
		border-bottom:1px solid #000;
		padding:5px 10px;
		color:#FFF;
		}
	.dropItem:hover{
		background-color:#eb7f0a;
		color: white;		
	}
	.navItem:hover .dropList{
		display:block;
	}
	
	.register{
		float:right;
		position:relative;
		top:5px;
		z-index:99px;
		padding:0 15px;
		}
	.ahead-image{padding:0 5px;}
/* self */	
	.self{
		background-color:#f2f2f2;
		clear: both;
		text-align:left;
		position: absolute;
		top:41px;
		border:1px solid #000;
		border-radius:5px;
		display: none;
		width: 260px !important;
	}
	.php a{color:#1e60b6;}
	.php {
		margin:0px;
		position:static;
		z-index:999;
		border-bottom:1px solid #000;
		padding:5px 0px;
		color:#FFF;
		}
	.php:hover{
		background-color:#eb7f0a;
		color: white;		
	}
	.self,.self img{
		display:block;
	}
/* main */
	#main{
		width:1300px;
		height:100vh;
		position: relative;
		top:40px;
		z-index:-11;
		background-color: rgba(255, 255, 255, 0.5)
		}
	.c{
		position:relative;
		bottom:33px;}
	.tex{
		height:20px;
		position:relative;
		bottom:5px;
		border-style:none;
		}