HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿正达管理后台首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <!-- header 部分 -->
    <header id="header">
        <hgroup class="header_logo fl">
            <h1 class="fl">
                <img src="./images/logo.png" alt="logo">
            </h1 class="fl">
            <h2 class="fl">正达建筑内部管理平台</h2>
        </hgroup>
        <ul class="header_nav fr">
            <li>
                <i class="iconfont iconwode"></i>欢迎您,武建 管理员
            </li>
            <li>
                <i class="iconfont iconyaochi"></i><a href="#">修改密码</a>
            </li>
            <li>
                <i class="iconfont iconindex-0"></i><a href="#">公司官网</a>
            </li>
            <li>
                <i class="iconfont icontuichu"></i><a href="#">退出</a>
            </li>
        </ul>
    </header>
    <!-- end -->
    <!-- 侧边栏 部分 -->
    <aside id="menu" class="fl">
        <ul>
            <li class="active"><a href="#">
                    <i class="iconfont iconlou"></i class="iconfont iconlou">
                    <p>项目管理</p>
                </a></li>
            <li><a href="#">
                    <i class="iconfont iconkehu"></i>
                    <p>用户管理</p>
                </a></li>
            <li><a href="#">
                    <i class="iconfont iconwsdzb_zzgzt_dyfw_zyhd_hdgl"></i>
                    <p>系统设置</p>
                </a></li>
        </ul>
    </aside>
    <!-- end -->
    <!-- 内容 部分 -->
    <main id="main">
        <section class="main_container">
            <section id="projectTitle" class="clear">
                <div class="projectTitle_text fl">
                    <h2>青田高湾绿园一期、二期工程<i class="iconfont iconbianji"></i></h2>
                    <p>项目编号:<span>CN0000507</span><br>
                        项目类型:<span>在建工程</span><br>
                        项目负责人:<span>梅*丽</span><br>
                        手机号码:<span>158*****967</span></p>
                </div>
                <div class="projectTitle_img fr">
                    <img src="./images/project_img.jpg" alt="青田高湾绿园">
                </div>
            </section>
            <section id="projectList">
                <div class="projectList_btns">
                    <ul>
                        <li>视频监控</li>
                        <li>考勤管理</li>
                        <li>安全巡查</li>
                        <li class="active">资料管理</li>
                    </ul>
                </div>
                <div class="projectList_cons">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div class="show">
                        <div class="zl_upload1 fl">
                            <label>
                                <input type="file">
                                <i class="iconfont iconshangchuan"></i>&nbsp;&nbsp;&nbsp;单个上传
                            </label>
                        </div>
                        <div class="zl_upload2 fl">
                            <label>
                                <input type="file">
                                <i class="iconfont iconshangchuan1"></i>&nbsp;&nbsp;&nbsp;批量上传
                            </label>
                        </div>
                        <div class="zl_search fr">
                            <input type="text" placeholder="请输入关键字">
                            <button class="fr">
                                <i class="iconfont iconsearch"></i>
                            </button>
                        </div>
                        <table class="zl_table">
                            <thead>
                                <tr>
                                    <th width="49"><input type="checkbox"></th>
                                    <th>文档名称</th>
                                    <th width="167">文档大小</th>
                                    <th width="148">上传者</th>
                                    <th width="168">上传时间</th>
                                    <th width="81">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈*耀</td>
                                    <td>2019-03-14</td>
                                    <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;<i
                                            class="iconfont iconchushaixuanxiang"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈*耀</td>
                                    <td>2019-03-14</td>
                                    <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;<i
                                            class="iconfont iconchushaixuanxiang"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈*耀</td>
                                    <td>2019-03-14</td>
                                    <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;<i
                                            class="iconfont iconchushaixuanxiang"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td><i class="iconfont iconword"></i>安全专项方案.doc</td>
                                    <td>21.3kb</td>
                                    <td>陈*耀</td>
                                    <td>2019-03-14</td>
                                    <td><i class="iconfont iconxiazai"></i>&nbsp;&nbsp;&nbsp;<i
                                            class="iconfont iconchushaixuanxiang"></i>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="zl_footer">
                            <button class="zl_remove">批量删除</button>
                            <button class="zl_download">批量下载</button>
                            <div class="zl_page fr">
                                <a href="#">共12条</a>
                                <a href="#">首页</a>
                                <a href="#">上一页</a>
                                <a href="#" class="active">1</a>
                                <a href="#">2</a>
                                <a href="#">3</a>
                                <a href="#">下一页</a>
                                <a href="#">尾页</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </main>
    <!-- end -->
    <!-- footer 部分 -->
    <footer id="footer">
        <p>Copyright © 2009 -2016 丽水市正达建筑工程有限公司 All rights reserved. 技术支持:红点智能</p>
    </footer>
    <!-- end -->
</body>
</html>

公共样式部分

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
img {
    display: block;
}
h1,
h2,
h3 {
    font-size: 16px;
    font-weight: normal;
}
a {
    text-decoration: none;
    color: 333333;
}
html,
body {
    height: 100%;
    overflow-y: hidden;
    font-family: Arial;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.clear:after {
    content: "";
    display: block;
    clear: both;
}

附件

此处内容需要评论回复后方可阅读。

不起眼的小广告