后台小案例

效果展示

一、总体布局

1.分头部<header>主体<main>尾部<footer>三大块。

<body>
    <!-- 头部 -->
    <header>
    </header>
    <!-- 主体 -->
    <main>
    </main>
    <!-- 尾部 -->
    <footer>
    </footer>
</body>

2.采用弹性盒子模型纵向排列，实现自适应高度。

body{
    display: flex;
    /* 设置头部、主体、尾部纵向排列 */
    flex-direction: column;
    /* 高度最小要填满窗口 */
    min-height: 100vh;
}

二、头部布局

1、头部结构:由标题（.logo）和用户状态（.user_state）组成

<header>
    <h2 class="logo">后台小案例</h2>
    <section class="user_state">
        <em>admin</em>
        <button>退出</button>
    </section>
</header>

2、头部样式

header{
    /* 采用弹性盒子模型实现纵向排列.logo和.user_state*/
    display: flex;
    /* 头部内容上下居中 */
    place-items: center;
    padding: 10px;
    background-color: rgb(119, 188, 72);
}
.user_state{
    /* 用户状态右对齐 */
    margin-left: auto;
}

三、主体布局

1、主体结构

<main>
    <!-- 导航菜单 -->
    <nav>
        <h4 class="menu"><a href="./demo1.html" target="content">菜单一内容</a></h4>
        <h4 class="menu"><a href="./demo1.html" target="content">菜单二内容，菜单二内容</a></h4>
        <h4 class="menu"><a href="./demo1.html" target="content">菜单三内容</a></h4>
    </nav>
    <!-- 内容区 -->
    <iframe src="default.html" frameborder="0" name="content"></iframe>
</main>

2、主体样式:采用弹性盒子模型实现橫向排列导航（nav）和内容（iframe），高度自适应；导航区设置定宽、溢出隐藏；内容区自适应宽度

main{
    /* 设置主体自适应高度且最少500px */
    flex: 1 500px;
    display: flex;
}
nav{
    background-color: rgb(189, 211, 23);
}
.menu {
    padding: 10px;
    /* 每个菜单项不换行 */
    white-space: nowrap;
    width: 150px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 有溢出用...标示 */
    text-overflow: ellipsis;
}
iframe{
    background-color: rgb(73, 185, 25);
    /* 设置内容区自适应宽度 */
    flex: 1;
}

四、主页html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台小案例</title>
    <link rel="stylesheet" href="static/css/homework.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <h2 class="logo">后台小案例</h2>
        <section class="user_state">
            <em>admin</em>
            <button>退出</button>
        </section>
    </header>
    <!-- 主体 -->
    <main>
        <!-- 导航菜单 -->
        <nav>
            <h4 class="menu"><a href="./demo1.html" target="content">菜单一内容</a></h4>
            <h4 class="menu"><a href="./demo1.html" target="content">菜单二内容，菜单二内容</a></h4>
            <h4 class="menu"><a href="./demo1.html" target="content">菜单三内容</a></h4>
        </nav>
        <!-- 内容区 -->
        <iframe src="default.html" frameborder="0" name="content"></iframe>
    </main>
    <!-- 尾部 -->
    <footer>
        <h2>底部</h2>
    </footer>
</body>
</html>

五、主页css

*{
    /* 设置所有的尺寸计算包含内外边距 */
    box-sizing: border-box;
    /* 设置所有的所有的外边距为0*/
    margin: 0;
}
body{
    display: flex;
    /* 设置头部、主体、尾部纵向排列 */
    flex-direction: column;
    /* 调度最小要填满窗口 */
    min-height: 100vh;
}
header{
    display: flex;
    /* 头部内容上下居中 */
    place-items: center;
    padding: 10px;
    background-color: rgb(119, 188, 72);
}
.user_state{
    /* 用户状态右对齐 */
    margin-left: auto;
}
main{
    /* 设置主体自适应高度且最少500px */
    flex: 1 500px;
    display: flex;
}
nav{
    background-color: rgb(189, 211, 23);
}
.menu {
    padding: 10px;
    /* 每个菜单项不换行 */
    white-space: nowrap;
    width: 150px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 有溢出用...标示 */
    text-overflow: ellipsis;
}
iframe{
    background-color: rgb(73, 185, 25);
    /* 设置内容区自适应宽度 */
    flex: 1;
}
footer{
    background-color: rgb(24, 156, 193);
    padding: 10px;
}

后台小案例

后台小案例

一、总体布局

二、头部布局

三、主体布局

四、主页html

五、主页css

相关文章