html+css 简易后台布局结构

最新推荐文章于 2024-09-05 23:06:58 发布

路克森

最新推荐文章于 2024-09-05 23:06:58 发布

阅读量955

点赞数

分类专栏：整合问题案例文章标签： html css 布局 web

本文链接：https://blog.csdn.net/qq_39057639/article/details/103811542

版权

这篇博客展示了如何使用HTML和CSS创建一个简易的后台布局结构，包括相关的代码实现和预期的效果图。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style type="text/css">

        *{
    
            margin: 0;
            padding: 0;
        }

        html,body{
    
            width:100%;
            height:100%;
            overflow-y: hidden;
        }

        .container{
    
            width:100%;
            height:100%;
        }

        .body-container{
    
            min-width:1000px;
            height:100%;
            position:relative;
        }

        .container  .header{
    
            max-width:100%;
            min-width:1000px;
            height:50px;
            background-color: red;
        }

        .container .left-container{
    
            overflow: scroll;
            min-width: 150px;
            height:100%