7、第九 - WEB开发基础 - 后台页面管理布局 - C.Q&CHEN

7、第九 - WEB开发基础 - 后台页面管理布局

　　页面布局分为两种方式，一种是主站，另外一种是后台管理的页面布局，如下：

1、网页主站：

主站页面的布局格式：
     <div class="pg_header">
        <div style="width: 980px;margin: 0 auto">
            内容自动居中
        </div>
    </div>
    <div class="pg_body"> </div>
    <div class="pg_bottom"> </div>

主站页面主要分为三个部分：头部，中部，底部

2、后台页面管理布局

后台页面布局的方式：
posistion：
	fiexd     -- 永远固定在窗口的某个位置
	relative  -- 单独无意义
	absolute  -- 第一次定位，可以在指定位置，滚轮滑动时，不在。。。

后台页面管理布局：
1、左侧滑动、右边滑动
2、左侧固定、右边滑动
3、左边滑动、右边滑动
这三种模式，可以在变动少的时候，进行切换。制作站点页面一般分为两种：一种是主站；一种是后台管理

插曲一下：使用CSS可以使字体变颜色，不需要捕获鼠标事件（onlinck）操作。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            background-color: #dddddd;
        }
        .item:hover{
            color: red;
        }
        .item:hover .b {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="a">123 </div>
        <div class="b">456</div>
    </div>

</body>
</html>

效果：

后台页面管理布局案例

主要应用的是html、css来实现。

一些小图标的按钮接口，参考：https://fontawesome.com/?from=io 。对应的代码，连接方式，先下载完下来。

模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .pg_header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;  /* 使的文字居中 */
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
        }
        .pg_header .logo{
            background-color: blue;
            text-align: center;
            width: 200px; /* 参考左侧的菜单栏像素*/

        }
        .pg_header .icon {
            padding: 0 20px;

        }
        .pg_header .icon:hover {
            background-color: #2459a2;

        }
        .pg_header .user {
            margin-right: 60px;
            padding: 0 20px;
            background-color:firebrick;
            color: white;
            height: 48px;

        }
        .pg_header .user:hover {
            background-color:lemonchiffon;
        }
        .pg_header .icon .span_font {
            border-radius: 50%;
            display: inline-block;
            padding: 3px 7px;
            font-size: 12px;
            color: white;
            background-color: red;
            line-height: 12px;

        }
        .pg_header .user .b{
            z-index:20;
            position: absolute;
            top:48px;
            right: 44px;
            background-color: #804668;
            width: 160px;
            display: none;
        }
        .pg_header .user .b a{
            display: block;
        }

        .pg_header .user:hover .b{
            display: block;
        }

        .pg_content .menu{
            /*position: fixed;*/
            /*top:48px;*/
            /*left: 0;*/
            /*bottom: 0;*/
            /*width: 200px;*/
            /*background-color: #dddddd;*/
            /*min-width: 100px;*/
            /*overflow: auto;*/
            position: absolute;
            top:48px;
            left:0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;

        }
        .pg_content .content{
            /*position: fixed;*/
            /*top:48px;*/
            /*right: 0;*/
            /*bottom: 0;*/
            /*left: 200px;*/
            /*background-color: aliceblue;*/
            /*overflow: auto;*/
            position: absolute;
            top:48px;
            right: 0;
            left:200px;
            bottom: 0;
            background-color: green;
            overflow:auto;
            z-index: 9;
        }

    </style>
    <!-- 图表导入，https://fontawesome.com/icons-先从网站上面下载，下载图表样式，保持目录结构不变-->
    <link rel="stylesheet" href="fontawesome-free-5.3.1-web/css/fontawesome.css">

</head>
<body>
    <div class="pg_header" >
        <div class="logo left">
            <div>37互娱 </div>
        </div>

        <!-- 用户的位置往往是一张图片替代 -->
        <div class="user right" style="position: relative">
            <a href="###"> <!-- 设置点击图片设置跳转 -->
                <!-- 设计图片为原型，设计为原型其实就是50% -->
                <img style="height: 40px;width: 40px;margin-top: 4px;border-radius: 50%" src="1537511971641.jpg">
            </a>

            <div class="b">
                <a>我的资料</a>
                <a>信息设置</a>
                <a>账单管理</a>
            </div>
        </div>
        <div class="right icon">
            <!-- 可以对应的网站中，找到对应 i节点标签 -->
            <i class="fa fa-bell-slash" aria-hidden="true" style="font-size: 48px;"></i>
            <span class="span_font">5</span>
        </div>
        <div class="right icon">
            <i class="fa fa-comment-alt" aria-hidden="true" style="font-size: 48px;"></i>
        </div>
    </div>
    <div class="pg_content">
        <div class="menu left">a</div>
        <div class="content left">
            <!--  测试宽度 -->
            <p>faffasdasff</p>
            <p>faffasdasff</p>
        </div>
    </div>
    <div class="pg_footer"></div>
</body>
</html>

简单的模板页面布局，效果如下：

注意，右边图片还隐藏了一个下拉框的位置，模拟用户登录之后的后台页面。

posted on 2018-09-21 17:28 C.Q&CHEN 阅读(1016) 评论(0) 收藏举报

刷新页面返回顶部

chen170615

7、第九 - WEB开发基础 - 后台页面管理布局

导航

公告