綜合案例展示

想做出效果如下的頁(yè)面：

效果圖

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區(qū)域 -->
        <div id="logo">
            <img src="../img/logo.png"/>
            <a href="#">[退出]</a>
            
        </div>
        <!-- 導(dǎo)航區(qū)域 -->
        <div id="nav">
            <ul class="menu">
                <li><a href="#" id="index"><span>首頁(yè)</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>資費(fèi)管理</span></a></li>
                <li><a href="#" id="account"><span>賬戶賬號(hào)</span></a></li>
                <li><a href="#" id="service"><span>業(yè)務(wù)賬號(hào)</span></a></li>
                <li><a href="#" id="bill"><span>賬單管理</span></a></li>
                <li><a href="#" id="report"><span>報(bào)表</span></a></li>
                <li><a href="#" id="info"><span>個(gè)人信息</span></a></li>
                <li><a href="#" id="pwd"><span>修改密碼</span></a></li>
            </ul>
        </div>
        <!-- 內(nèi)容區(qū)域 -->
        <div id="content">
            <!-- 1诈乒、漸變條 -->
            <!-- 2涣旨、核心區(qū) -->
            <div id=main>
                <!-- 操作區(qū) -->
                <div id="operate">
                    <input type="button" value="增加"/>
                </div>
                <!-- 數(shù)據(jù)區(qū) -->
                <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>法師勿她、牧師、術(shù)士</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>法師逃贝、牧師脯倚、術(shù)士</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>法師纲酗、牧師脚猾、術(shù)士</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>法師、牧師抡草、術(shù)士</td>
                                <td>
                                <input type="button" value="修改" class="modify"/>
                                <input type="button" value="刪除" class="delete"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分頁(yè) -->
                <div id="page">
                    <a href="#">上一頁(yè)</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="#">下一頁(yè)</a>
                </div>
                <!-- 提示框 -->
                <div id="msg">
                    <img src="../img/close.png"/>
                    <P>操作成功</P>
                </div>
            </div>
        </div>
        <!-- 版權(quán)區(qū)域 -->
        <div id="copy">
            <p>&lt;快來(lái)學(xué)JAVA這里有驚喜&gt;</p>
            <p>程老師現(xiàn)場(chǎng)教學(xué)饰及，非常賣(mài)力</p>
        </div>
        
    </body>
</html>

CSS樣式入下：

/*1、設(shè)置頁(yè)面整體布局*/
/*a康震、因?yàn)閎ody默認(rèn)有外邊距燎含，上下左右出現(xiàn)縫隙*/
body{
    margin:0px;
    padding:0px;
}
/*b、同意設(shè)置div的邊框和外邊距
div水平居中*/
div{
    border:1px solid #000;
    margin:0px auto;        
}
/*c签杈、逐個(gè)設(shè)置div的寬瘫镇，高，內(nèi)外邊距*/
#logo{
    width:960px;
    height:61px;
}
#nav{
    width:100%;
    height:91px;
}
#content{
    width:100%;
    height:410px;
    padding-top:10px;
}
#copy{
    width:960px;
    height:50px;
}
/*設(shè)置內(nèi)容區(qū)里面的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答姥、設(shè)置背景圖片*/
body{
    background-color:#0ea8d8;
}
/*設(shè)置logo背景圖片铣除，圖片大小和div一致，不需要設(shè)置平鋪*/
#logo{
    background-image:url("../img/top_bg.png")
}
/*設(shè)置其他區(qū)背景顏色*/
#nav{
    background-color:#0488bb;
}
#main{
    background-color:#e8f3f8;
}
/*設(shè)置內(nèi)容區(qū)頂部背景漸變圖*/
#content{
    background:url("../img/content_bg.png") repeat-x top
}
/*3鹦付、格式化文本*/
body{
    font-family:"微軟雅黑";
    font-size:14px;
}
/*設(shè)置logo尚粘，版權(quán)區(qū)域的字體顏色*/
#logo,#copy{
    /*超鏈接自身有默認(rèn)樣式(藍(lán)色) 優(yōu)先級(jí)大于logo，需要單獨(dú)設(shè)置*/
    color:#fff;
}
#logo{
    text-align:right;
    line-height:60px;
}
/*給超鏈接設(shè)置外邊距*/
#logo a{
    margin-right:40px;
    /*設(shè)置字體和下劃線*/
    color:#fff;
    text-decoration: none;
}

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

/*設(shè)置版權(quán)區(qū)內(nèi)容樣式*/
#copy p{
    text-align: center;
    /*P段落有默認(rèn)的外邊距敲长，這里要把外邊距清除郎嫁，否則會(huì)越出*/
    margin:0px;
    line-height:25px;
}

/*設(shè)置表格*/
table{
    border:1px solid #aaa;
    width:910px;
    background-color:#fff;
    border-collapse: collapse;
}

/*行標(biāo)題*/
th{
    border:1px solid #ccc;
    background-color:#fbedce;
    height:40px;
}
td{
    border:1px solid #ccc;
    text-align:center;
    height:32px;
}

/*鼠標(biāo)懸停在數(shù)據(jù)行時(shí)，改變背景顏色*/

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

/*3設(shè)置修改按鈕樣式*/
.modify{
    /*設(shè)置內(nèi)邊距祈噪，給圖片騰出位置*/
    padding:5px 5px 5px 15px;
    /*將圖片作為背景泽铛，不用平鋪*/
    background:url(../img/modification.png) no-repeat left;
    /*去邊框*/
    border:0px;
}

.delete{
    /*設(shè)置內(nèi)邊距，給圖片騰出位置*/
    padding:5px 5px 5px 15px;
    /*將圖片作為背景辑鲤，不用平鋪*/
    background:url(../img/delete.png) no-repeat left;
    /*去邊框*/
    border:0px;
}

/*修改和刪除按鈕上增加圖片后盔腔，鼠標(biāo)懸停時(shí)不再是手形*/
tbody input:hover{
    cursor:pointer;
}

/*設(shè)置操作區(qū)樣式*/
/*整體設(shè)置*/
#operate{
    text-align:right;
    line-height:40px;
}

/*給按鈕設(shè)置樣式*/
#operate input{
    /*按鈕的高和寬要為背景圖片的大小*/
    width:71px;
    height:26px;
    background:url("../img/btn_bg.png");
    color:#fff;
    border:0px;
}

/*設(shè)置分頁(yè)區(qū)*/
#page{
    text-align:center;
    line-height:40px;
}
#page a {
    text-decoration: none;
    color:#000;
    padding:5px 10px;
    border:1px solid #e8f3f8;
    /*外邊距因?yàn)?lt;a>換行不需要設(shè)置*/
}

/*鼠標(biāo)懸停改變樣式，邊框和前景是色*/
#page a:hover{
    border:1px solid #97b9c9;
    color:#067db5
    background-color:#cddde4;
}

/*設(shè)置當(dāng)前頁(yè)樣式*/
#page .current{
    border:1px solid #97b9c9;
    background-color:#fff;
}
/*5月褥、定位圖片 logo圖片*/
#logo img{
    float:left;
}

/*依照main為基準(zhǔn)提示定位*/
#main{
    position:relative;
    
}

#msg{
    position:absolute;
    left:250px;
    top:100px;
    border:1px solid #f68a8a;
    width:400px;
    height:50px;
    /*設(shè)置內(nèi)邊距弛随，解決文本貼邊問(wèn)題
    將左內(nèi)邊距設(shè)置為40，是為了放背景圖片*/
    padding:10px 10px 10px 40px;
    background:#fdecec url("../img/ok.png") no-repeat 10px 26px
    
}

/*將提示框中的X圖片移動(dòng)到右上角*/
#msg img{
    float:right;
}

/*鼠標(biāo)懸停變成手形*/
#msg img:hover{
    cursor: pointer;
}

/*設(shè)置導(dǎo)航區(qū)*/
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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末宁赤，一起剝皮案震驚了整個(gè)濱河市舀透，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌决左，老刑警劉巖愕够，帶你破解...
沈念sama閱讀 217,734評(píng)論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件走贪，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡链烈，警方通過(guò)查閱死者的電腦和手機(jī)厉斟，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,931評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)挚躯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)强衡，“玉大人，你說(shuō)我怎么就攤上這事码荔′銮冢” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 164,133評(píng)論 0贊 354
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵缩搅，是天一觀的道長(zhǎng)越败。經(jīng)常有香客問(wèn)我，道長(zhǎng)硼瓣，這世上最難降的妖魔是什么究飞？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,532評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮堂鲤，結(jié)果婚禮上亿傅，老公的妹妹穿的比我還像新娘。我一直安慰自己瘟栖，他們只是感情好葵擎，可當(dāng)我...
茶點(diǎn)故事閱讀 67,585評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著半哟，像睡著了一般酬滤。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上寓涨，一...
開(kāi)封第一講書(shū)人閱讀 51,462評(píng)論 1贊 302
城市分裂傳說(shuō)
那天盯串，我揣著相機(jī)與錄音，去河邊找鬼戒良。笑死体捏，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的蔬墩。我是一名探鬼主播译打，決...
沈念sama閱讀 40,262評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼拇颅！你這毒婦竟也來(lái)了奏司？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,153評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤樟插，失蹤者是張志新（化名）和其女友劉穎韵洋，沒(méi)想到半個(gè)月后竿刁，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,587評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡搪缨，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,792評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年食拜，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片副编。...
茶點(diǎn)故事閱讀 39,919評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡负甸，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出痹届，到底是詐尸還是另有隱情呻待，我是刑警寧澤，帶...
沈念sama閱讀 35,635評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布队腐，位于F島的核電站蚕捉，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏柴淘。R本人自食惡果不足惜迫淹，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,237評(píng)論 3贊 329
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望为严。院中可真熱鬧敛熬，春花似錦、人聲如沸梗脾。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,855評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)炸茧。三九已至瑞妇，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間梭冠，已是汗流浹背辕狰。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,983評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留控漠，地道東北人蔓倍。一個(gè)月前我還...
沈念sama閱讀 48,048評(píng)論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像盐捷，于是被迫代替她去往敵國(guó)和親偶翅。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,864評(píng)論 2贊 354

綜合案例展示

推薦閱讀更多精彩內(nèi)容