后台管理系统样式布局写法

最新推荐文章于 2024-04-09 16:58:43 发布

谭CV

最新推荐文章于 2024-04-09 16:58:43 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： css html5 html css3 前端

本文链接：https://blog.csdn.net/THcoding_Cat/article/details/106441653

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

我也是刚开始学布局，对后台管理系统的布局并不了解，但想尝试一下，最后呈现的结果如下：

将布局划分为三块：顶部，左侧，右侧

html代码呈现为：

top为顶部，nav-container为左侧导航栏，main为右侧内容区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
   <div class="view">
      <div class="top"></div>
      <div class="nav-container"></div>
      <div class="main"></div>
   </div> 
</body>
</html>

css样式（采用的less写法）：

注意：若要cpoy此段代码，请先将样式初始化（reset.css），否则呈现效果不正常

html,body{
    width: 100%;
    height: 100%;
}

.view{
    position: relative;
    width: 100%;
    height:100%;
    overflow: hidden;
    .top{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height: 54px;
        background-color: #ffc0cb;
    }
    .nav-container{
        position: absolute;
        left:0;
        top:54px;
        bottom:0;//在不能设置高度的情况使用定位bottom结合top会产生高度,同理，宽度也可以
        width:208px;
        background-color: #87ceeb;
    }
    .main{
        position: absolute;
        right:0;
        top:54px;
        bottom:0;
        left:208px;//结合一边已经有宽度来给无边框无宽度的盒子通过定位给到宽度
        background-color: yellow;
    }
}

在布局中所遇到的问题：

首先根据UI图可知：

1.顶部的宽高（宽：100%，高：UI图中测量）

2.左侧的宽（宽：UI图中测量），左侧的高度未知？

3.右侧的宽高未知

如果只想要通过UI图测量出每一块大盒子的宽高这是不可能的，但盒子与盒子之间是有关系的

盒子之间的关系（解决问题）：

1.左侧的高度不知，但知道左侧距顶部的距离，即顶部的高度

2.右侧内容区宽高都不知，但知道右侧距顶部的距离（100%(高)-top(高)），即顶部的高度；右侧距左侧的距离（100%(宽)-左侧（宽）），即左侧的宽度

根据盒子之间的关系，可使用定位来解决不知道盒子宽高的问题：

顶部：

顶部宽高都知道，使用固定定位：

.top{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height: 54px;
        background-color: #ffc0cb;
    }

左侧：

只知宽，使用绝对定位（子绝父相），同时设置top(拉开和顶部的距离)和bottom（即设置top有设置bottom,可将盒子拉伸）

.nav-container{
        position: absolute;
        left:0;
        top:54px;
        bottom:0;//在不能设置高度的情况使用定位bottom结合top会产生高度,同理，宽度也可以
        width:208px;
        background-color: #87ceeb;
    }

右侧：

宽高皆不知，最依赖与顶部和左侧，使用绝对定位，同时设置top(拉开和顶部的距离)和bottom（即设置top又设置bottom,可将盒子拉伸），同时设置left(拉开和左侧的距离)和right(即设置left又设置right,可将盒子拉伸)

.main{
        position: absolute;
        right:0;
        top:54px;
        bottom:0;
        left:208px;//结合一边已经有宽度来给无边框无宽度的盒子通过定位给到宽度
        background-color: yellow;
    }

如果有遇到其他布局后台管理的方式，有空的话，我会更新上，最后呢，学到这种程度，我还是觉得布局真的很难。

谭CV

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统样式布局写法

我也是刚开始学布局，对后台管理系统的布局并不了解，但想尝试一下，最后呈现的结果如下：将布局划分为三块：顶部，左侧，右侧html代码呈现为： top为顶部，nav-container为左侧导航栏，main为右侧内容区<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de.
复制链接

扫一扫