综合案例展示

作者: itachi | 来源:发表于2016-12-01 20:01 被阅读32次

综合案例展示
UI设计师常用的网站（持续更新）
多线程网络03
css3学习--css3动画详解一(animation属性）
css3学习--css3动画详解一(animation属性）
案例展示
无标题文章
综合案例
CEO基因：常见的管理者类型
SwiftUI-抖音Logo动画

想做出效果如下的页面：

效果图

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");
}

综合案例展示
想做出效果如下的页面： html代码入下 CSS样式入下：
UI设计师常用的网站（持续更新）
设计师作品展示+灵感来源 Dribbble Behance 综合优设网站酷 UI中国应用案例展示（截图） p...
多线程网络03
1 多图下载综合案例包含数据展示、缓存处理、子线程下载图片以及内存警告处理 2 SDWebImage的使用和说明...
css3学习--css3动画详解一(animation属性）
***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~ Keyframes介绍...
css3学习--css3动画详解一(animation属性）
介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示一.Keyframes介绍： ...
案例展示
焦点幸福教师坚持分享第1324天2020.10.23周五今天再次回到刘老师课堂上，心平气和，一身轻松，眼前一亮...
无标题文章
案例展示
综合案例
来自拉钩教育-JAVA就业集训营 1.商城案例表设计通过对商城项目的部分表关系进行分析,完成数据库表的设计 1....
CEO基因：常见的管理者类型
「CEO基因」这本书，展示了近70多个CEO被开除的案例，综合分析究期原因，都是因为其已经很不适合这个职位了。作者...
SwiftUI-抖音Logo动画
案列展示案例源码