Div+CSS 布局入门教程之二构建网站-前端开发

我会为您讲解“Div+CSS布局入门教程之二构建网站”的完整攻略。

我会为您讲解“Div+CSS布局入门教程之二构建网站”的完整攻略。

简介

本篇攻略是对于前文《Div+CSS布局入门教程之一基本概念和语法》的进一步拓展，主要介绍如何用Div+CSS来构建一个网站的基本布局。

示例

我们以一个简单的网站为例，这个网站主要包含三个部分：顶部导航栏、左侧菜单栏和主要内容栏。整个网站的结构比较简单，但涉及到了常见的布局技巧。

顶部导航栏

在HTML中，我们可以用一个\

标签来表示页面的头部，然后在这个标签中添加具体的内容。这里我们用一个\

标签来表示顶部导航栏，并使用\

标签来创建菜单。

<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

对应的CSS样式为：

header {
  background-color: #333;
  color: #fff;
  height: 60px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-right: 20px;
}

li:last-child {
  margin-right: 0;
}

a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

其中，我们使用了Flex布局来实现横向排列，并对菜单进行了简单的样式调整。

左侧菜单栏

左侧菜单栏通常是一个固定宽度的侧边栏，并且包含若干个菜单项。首先，我们用一个\

标签来表示左侧的侧边栏，然后在这个标签中添加具体的菜单项。

<aside>
    <h2>文章分类</h2>
    <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
    </ul>
</aside>

对应的CSS样式为：

aside {
  background-color: #f5f5f5;
  width: 200px;
  height: calc(100vh - 60px);
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  color: #333;
  text-decoration: none;
}

其中，我们使用了Calc布局计算侧边栏的高度，并对菜单项进行了简单的样式调整。

主要内容栏

主要内容栏通常是一个占据剩余空间的块级元素，我们可以用一个\

标签来表示主要内容栏，然后在这个标签中添加具体的内容。

<main>
    <h1>Welcome to my website</h1>
    <p>This is a simple website created using Div+CSS.</p>
</main>

对应的CSS样式为：

main {
  background-color: #fff;
  flex: 1;
  padding: 20px;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

其中，我们使用了Flex的弹性缩放来实现主要内容块自适应剩余空间的效果，并对标题和段落进行了简单的样式调整。