综合案例展示

想做出效果如下的页面：

效果图

html代码入下

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>管理员列表</title>
        <link rel="stylesheet" type="text/css" href="admin_list.css">
        <style type="text/css"></style>
    </head>
    <body>
        <!-- logo区域 -->
        <div id="logo">
            <img src="../img/logo.png"/>
            <a href="#">[退出]</a>
            
        </div>
        <!-- 导航区域 -->
        <div id="nav">
            <ul class="menu">
                <li><a href="#" id="index"><span>首页</span></a></li>
                <li><a href="#" id="role"><span>角色</span></a></li>
                <li><a href="#" id="admin"><span>管理员</span></a></li>
                <li><a href="#" id="fee"><span>资费管理</span></a></li>
                <li><a href="#" id="account"><span>账户账号</span></a></li>
                <li><a href="#" id="service"><span>业务账号</span></a></li>
                <li><a href="#" id="bill"><span>账单管理</span></a></li>
                <li><a href="#" id="report"><span>报表</span></a></li>
                <li><a href="#" id="info"><span>个人信息</span></a></li>
                <li><a href="#" id="pwd"><span>修改密码</span></a></li>
            </ul>
        </div>
        <!-- 内容区域 -->
        <div id="content">
            <!-- 1、渐变条 -->
            <!-- 2、核心区 -->
            <div id=main>
                <!-- 操作区 -->
                <div id="operate">
                    <input type="button" value="增加"/>
                </div>
                <!-- 数据区 -->
                <div id="data">
                    <table>
                        <thead>
                            <tr>
                                <th><input type="checkbox"/>全选</th>
                                <th>管理员ID</th>
                                <th>姓名</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"/></td>
                                <td>1</td>
                                <td>唐僧</td>
                                <td>法师、牧师、术士</td>
                                <td>
                                <input type="button" value="修改" class="modify"/>
                                <input type="button" value="删除" class="delete"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td><input type="checkbox"/></td>
                                <td>2</td>
                                <td>孙悟空</td>
                                <td>法师、牧师、术士</td>
                                <td>
                                <input type="button" value="修改" class="modify"/>
                                <input type="button" value="删除" class="delete"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td><input type="checkbox"/></td>
                                <td>3</td>
                                <td>猪八戒</td>
                                <td>法师、牧师、术士</td>
                                <td>
                                <input type="button" value="修改" class="modify"/>
                                <input type="button" value="删除" class="delete"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td><input type="checkbox"/></td>
                                <td>4</td>
                                <td>沙僧</td>
                                <td>法师、牧师、术士</td>
                                <td>
                                <input type="button" value="修改" class="modify"/>
                                <input type="button" value="删除" class="delete"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页 -->
                <div id="page">
                    <a href="#">上一页</a>
                    <a href="#">1</a>
                    <a href="#" class="current">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">下一页</a>
                </div>
                <!-- 提示框 -->
                <div id="msg">
                    <img src="../img/close.png"/>
                    <P>操作成功</P>
                </div>
            </div>
        </div>
        <!-- 版权区域 -->
        <div id="copy">
            <p>&lt;快来学JAVA这里有惊喜&gt;</p>
            <p>程老师现场教学，非常卖力</p>
        </div>
        
    </body>
</html>

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;
    /*外边距因为<a>换行不需要设置*/
}

/*鼠标悬停改变样式，边框和前景是色*/
#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");
}

最后编辑于：2017.12.04 21:27:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,752评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,100评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,244评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,099评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,210评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,307评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,346评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,133评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,546评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,849评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,019评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,702评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,331评论 3赞 319
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,030评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,260评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,871评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,898评论 2赞 351

综合案例展示

推荐阅读更多精彩内容