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的弹性缩放来实现主要内容块自适应剩余空间的效果，并对标题和段落进行了简单的样式调整。

  总结

  通过上面的示例，我们可以看到如何使用Div+CSS来构建一个基本的网站结构。除了介绍的示例之外，还有许多其他的布局技巧，包括Flex、Grid、Position等，可以根据实际需要进行选择和组合。最后，希望这篇攻略对您有所帮助，祝您在使用Div+CSS构建网站时顺利完成任务！