综合案例展示

想做出效果如下的页面：

效果图

html代码入下

    
        
        
        
        
    
    
        
        

            
            [退出]
            
        
        
        

            

                
首页
                
角色
                
管理员
                
资费管理
                
账户账号
                
业务账号
                
账单管理
                
报表
                
个人信息
                
修改密码
            
        
        
        

            
            
            

                
                

                    
                
                
                

                    

                        

                            

                                
全选
                                
管理员ID
                                
姓名
                                
角色
                                
操作
                            
                        
                        

                            

                                

                                
1
                                
唐僧
                                
法师、牧师、术士
                                

                                
                                
                                
                            
                            
                            

                                

                                
2
                                
孙悟空
                                
法师、牧师、术士
                                

                                
                                
                                
                            
                            
                            

                                

                                
3
                                
猪八戒
                                
法师、牧师、术士
                                

                                
                                
                                
                            
                            
                            

                                

                                
4
                                
沙僧
                                
法师、牧师、术士
                                

                                
                                
                                
                            
                        
                    
                
                
                

                    上一页
                    1
                    2
                    3
                    4
                    5
                    下一页
                
                
                

                    
                    
操作成功
                
            
        
        
        

            
<快来学JAVA这里有惊喜>
            
程老师现场教学，非常卖力
        
        
    

CSS样式入下：

/*1、设置页面整体布局*/
/*a、因为body默认有外边距，上下左右出现缝隙*/
body{
    margin:0px;
    padding:0px;
}
/*b、同意设置div的边框和外边距
div水平居中*/
div{
    border:1px solid #000;
    margin:0px auto;        
}
/*c、逐个设置div的宽，高，内外边距*/
#logo{
    width:960px;
    height:61px;
}
#nav{
    width:100%;
    height:91px;
}
#content{
    width:100%;
    height:410px;
    padding-top:10px;
}
#copy{
    width:960px;
    height:50px;
}
/*设置内容区里面的div 宽和高*/
#main{
    width:950px;
    height:390px;
    border:5px solid #8ac1db;
}
#operate{
    width:910px;
    height:40px;
}
#data{
    width:910px;
    height:310px;
}
#page{
    width:910px;
    height:40px;
}
/*2、设置背景图片*/
body{
    background-color:#0ea8d8;
}
/*设置logo背景图片，图片大小和div一致，不需要设置平铺*/
#logo{
    background-image:url("../img/top_bg.png")
}
/*设置其他区背景颜色*/
#nav{
    background-color:#0488bb;
}
#main{
    background-color:#e8f3f8;
}
/*设置内容区顶部背景渐变图*/
#content{
    background:url("../img/content_bg.png") repeat-x top
}
/*3、格式化文本*/
body{
    font-family:"微软雅黑";
    font-size:14px;
}
/*设置logo，版权区域的字体颜色*/
#logo,#copy{
    /*超链接自身有默认样式(蓝色) 优先级大于logo，需要单独设置*/
    color:#fff;
}
#logo{
    text-align:right;
    line-height:60px;
}
/*给超链接设置外边距*/
#logo a{
    margin-right:40px;
    /*设置字体和下划线*/
    color:#fff;
    text-decoration: none;
}

#logo a:hover{
    font-weight:bold;
}

/*设置版权区内容样式*/
#copy p{
    text-align: center;
    /*P段落有默认的外边距，这里要把外边距清除，否则会越出*/
    margin:0px;
    line-height:25px;
}

/*设置表格*/
table{
    border:1px solid #aaa;
    width:910px;
    background-color:#fff;
    border-collapse: collapse;
}

/*行标题*/
th{
    border:1px solid #ccc;
    background-color:#fbedce;
    height:40px;
}
td{
    border:1px solid #ccc;
    text-align:center;
    height:32px;
}

/*鼠标悬停在数据行时，改变背景颜色*/

tbody tr:hover{
    background-color:#f7f9fd;
}

/*3设置修改按钮样式*/
.modify{
    /*设置内边距，给图片腾出位置*/
    padding:5px 5px 5px 15px;
    /*将图片作为背景，不用平铺*/
    background:url(../img/modification.png) no-repeat left;
    /*去边框*/
    border:0px;
}

.delete{
    /*设置内边距，给图片腾出位置*/
    padding:5px 5px 5px 15px;
    /*将图片作为背景，不用平铺*/
    background:url(../img/delete.png) no-repeat left;
    /*去边框*/
    border:0px;
}

/*修改和删除按钮上增加图片后，鼠标悬停时不再是手形*/
tbody input:hover{
    cursor:pointer;
}

/*设置操作区样式*/
/*整体设置*/
#operate{
    text-align:right;
    line-height:40px;
}

/*给按钮设置样式*/
#operate input{
    /*按钮的高和宽要为背景图片的大小*/
    width:71px;
    height:26px;
    background:url("../img/btn_bg.png");
    color:#fff;
    border:0px;
}

/*设置分页区*/
#page{
    text-align:center;
    line-height:40px;
}
#page a {
    text-decoration: none;
    color:#000;
    padding:5px 10px;
    border:1px solid #e8f3f8;
    /*外边距因为换行不需要设置*/
}

/*鼠标悬停改变样式，边框和前景是色*/
#page a:hover{
    border:1px solid #97b9c9;
    color:#067db5
    background-color:#cddde4;
}

/*设置当前页样式*/
#page .current{
    border:1px solid #97b9c9;
    background-color:#fff;
}
/*5、定位图片 logo图片*/
#logo img{
    float:left;
}

/*依照main为基准提示定位*/
#main{
    position:relative;
    
}

#msg{
    position:absolute;
    left:250px;
    top:100px;
    border:1px solid #f68a8a;
    width:400px;
    height:50px;
    /*设置内边距，解决文本贴边问题
    将左内边距设置为40，是为了放背景图片*/
    padding:10px 10px 10px 40px;
    background:#fdecec url("../img/ok.png") no-repeat 10px 26px
    
}

/*将提示框中的X图片移动到右上角*/
#msg img{
    float:right;
}

/*鼠标悬停变成手形*/
#msg img:hover{
    cursor: pointer;
}

/*设置导航区*/
ul,li{
    border:0px solid red;
}
.menu{
    width:960px;
    margin:0px auto;
    list-style-type:none;
}
.menu li{
    width:68px;
    height:77px;
    margin:7px 14px;
    float:left;
}

.menu a{
    width:68px;
    height:77px;
    display:block;
}

.menu span{
    display:none;
}

#index{
    background-image:url("../img/index_out.png");
}
#index:hover{
    background-image:url("../img/index_on.png");
}

#role{
    background-image:url("../img/role_out.png");
}
#role:hover{
    background-image:url("../img/role_on.png");
}

#admin{
    background-image:url("../img/admin_out.png");
}
#admin:hover{
    background-image:url("../img/admin_on.png");
}

#fee{
    background-image:url("../img/fee_out.png");
}
#fee:hover{
    background-image:url("../img/fee_on.png");
}

#account{
    background-image:url("../img/account_out.png");
}
#account:hover{
    background-image:url("../img/account_on.png");
}

#service{
    background-image:url("../img/service_out.png");
}
#service:hover{
    background-image:url("../img/service_on.png");
}

#bill{
    background-image:url("../img/bill_out.png");
}
#bill:hover{
    background-image:url("../img/bill_on.png");
}

#report{
    background-image:url("../img/report_out.png");
}
#report:hover{
    background-image:url("../img/report_on.png");
}
#info{
    background-image:url("../img/information_out.png");
}
#info:hover{
    background-image:url("../img/information_on.png");
}
#pwd{
    background-image:url("../img/password_out.png");
}
#pwd:hover{
    background-image:url("../img/password _on.png");
}