77.建立一个Web应用程序的布局第一部分-Toy模板网

这篇具有很好参考价值的文章主要介绍了77.建立一个Web应用程序的布局第一部分。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本次我们需要设计的布局是这样样子，这个很想一个邮件系统的基本布局；
77.建立一个Web应用程序的布局第一部分

● 首先我们生成基础代码，基础代码很简单，不用过多解释

<!DOCTYPE html>
<html lang="en">
<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>App Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            color: #343a40;
            font-size: 23px;
        }

        nav {
            background-color: #343a40 ;
        }

        menu {
            background-color: #7048e8;
            color: #fff;
        }

        section {
            background-color: #e9ecef;;
        }

    </style>
</head>
<body>
    <nav>Nav</nav>
    <menu>Menu</menu>
    <section>Inbox</section>
    <main>Email View</main>
    <aside>Additional info</aside>
</body>
</html>

77.建立一个Web应用程序的布局第一部分

● 我们分析一下下图，这个一个两行四列的一个布局，当然，我们肯定会选择使用CSS grid去实现这个布局，生成一个两行四列的一个布局

body {
    font-family: sans-serif;
    color: #343a40;
    font-size: 23px;

    display: grid;
    grid-template-columns: 80px 400px 1fr 250px;
    grid-template-rows: 80px 1fr;
}

77.建立一个Web应用程序的布局第一部分

● 对比实现的图，我们想让body的高度占据整个视图

 height: 100vh;

77.建立一个Web应用程序的布局第一部分

● 之后我们想要我们的导航占据整列，菜单占据整行

   nav {
            background-color: #343a40 ;
            grid-row: 1 / -1;
          	color: white;
        }

        menu {
            background-color: #7048e8;
            color: #fff;
            grid-column: 2 / -1;
        }

77.建立一个Web应用程序的布局第一部分

● 接着我们将字体居中并设计一下字体
77.建立一个Web应用程序的布局第一部分

● 接着我们给这些元素添加一下填充

nav, menu, section, main, aside {
            padding-top: 20px;
        }

77.建立一个Web应用程序的布局第一部分

这样一个布局就已经出来了，剩下的部分我们在下一节再展现吧！文章来源地址https://www.toymoban.com/news/detail-455396.html

到了这里，关于77.建立一个Web应用程序的布局第一部分的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

77.建立一个Web应用程序的布局第一部分

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2