浮动布局

仍然是打开1024code中的项目，找到style.css，输入以下代码

/* 浮动布局 */ 
.container { 
    overflow: hidden; /* 触发BFC，清除浮动 */ 
} 

.sidebar { 
    float: left; /* 左浮动 */ 
    width: 200px; 
    background-color: #f2f2f2; 
}

同时记得修改index.html中的部分内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>个人网站</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>欢迎来到我的个人网站</h1>
  </header>

  <div class="container">
    <div class="sidebar">
      <ul>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#projects">项目</a></li>
        <li><a href="#contact">联系我</a></li>
      </ul>
    </div>
    
    <div class="main-content">
      <section id="about">
        <h2>关于我</h2>
        <p>在这里写上你自己的介绍和一些个人背景信息。</p>
      </section>

      <section id="skills">
        <h2>技能</h2>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>前端框架（如React、Vue等）</li>
        </ul>
      </section>

      <section id="projects">
        <h2>项目</h2>
        <ul>
          <li>项目1 - 描述项目1</li>
          <li>项目2 - 描述项目2</li>
          <li>项目3 - 描述项目3</li>
        </ul>
      </section>

      <section id="contact">
        <h2>联系我</h2>
        <p>在这里提供你的联系方式，例如电子邮件、电话号码或社交媒体账号。</p>
      </section>
    </div>
  </div>

  <footer>
    <p>版权所有 © 2023 我的个人网站</p>
  </footer>
</body>
</html>

主要是在<body></body>里面添加了很多<div class='xxx'></div>，其中xxx是你定义的CSS名称，你在CSS代码中就是通过使用.xxx来设置好看的格式。

overflow 用于指定元素内容溢出时的处理方式。该属性可以应用于块级元素和表格单元格。

visible：默认值，内容不会被修剪，可能会溢出容器。
hidden：内容被修剪，超出容器的部分将被隐藏。
scroll：添加滚动条，无论内容是否溢出，始终显示滚动条。
auto：根据内容是否溢出自动添加滚动条。

float 用于指定元素的浮动方式。当一个元素设置了 float 属性后，它会从正常的文档流中脱离，并根据指定的浮动方式在父元素中定位。

left：元素向左浮动，其他内容会环绕在其右侧。
right：元素向右浮动，其他内容会环绕在其左侧。
none：默认值，元素不浮动，保持在正常的文档流中。
inherit：继承父元素的浮动属性。

因为我们设置的是左浮动，所以导航栏的内容显示在左边的边栏。

width用于指定元素的宽度。

固定宽度：可以使用像素（px）或其他单位（如em、rem）指定一个固定的宽度值，例如 width: 200px;。
百分比宽度：可以使用百分比指定相对于父元素的宽度，例如 width: 50%;。
自动宽度：使用 auto 值，让元素根据内容自动计算宽度，例如 width: auto;。
继承宽度：使用 inherit 值，使元素继承父元素的宽度，例如 width: inherit;。

background-color 用于指定元素的背景颜色。

颜色名称：可以使用预定义的颜色名称，如 red、blue、green 等。
十六进制值：可以使用六位十六进制值来表示颜色，以 # 开头，例如 #ff0000 表示红色。
RGB 值：可以使用 RGB 函数来指定红、绿、蓝三个通道的颜色值，例如 rgb(255, 0, 0) 表示红色。
RGBA 值：类似于 RGB 值，但增加了一个 alpha 通道，用于指定透明度，例如 rgba(255, 0, 0, 0.5) 表示半透明的红色

定位布局

/* 定位布局 */ 
.main-content { 
    position: relative; 
    left: 220px; 
}

position 用于指定元素的定位方式。

static：默认值，元素处于正常文档流中，不进行特殊定位。
relative：相对定位，元素相对于其正常位置进行定位，可以使用 top、bottom、left、right 属性来调整元素的位置。
absolute：绝对定位，元素相对于其最近的非 static 祖先元素进行定位，如果没有非 static 祖先元素，则相对于文档的初始包含块进行定位。
fixed：固定定位，元素相对于视口进行定位，即无论页面如何滚动，元素始终保持在固定的位置。
sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。

这里选用了relative中的left，这是为了与sidebar的宽度相加，使得内容区域不被它遮挡。

弹性盒子布局

/* 弹性盒子布局 */
ul {
  display: flex;
  flex-direction: column;
}

li {
  margin-bottom: 10px;
}

display用于指定元素的显示方式。

block：将元素显示为块级元素，占据一行，并且默认情况下会在前后添加换行符。
inline：将元素显示为内联元素，不会独占一行，可以与其他元素在同一行显示。
inline-block：将元素显示为内联块级元素，不会独占一行，但可以设置宽度和高度等块级元素的属性。
none：将元素隐藏，不在文档布局中占据空间。
flex：将元素显示为弹性盒子，使用弹性盒子布局模型进行布局。
grid：将元素显示为网格容器，使用网格布局模型进行布局。
table：将元素显示为表格，可以使用表格布局相关的 CSS 属性进行布局。

flex-direction 用于指定弹性容器内弹性项的排列方向。

row：默认值，弹性项水平排列，从左到右。
row-reverse：弹性项水平排列，从右到左。
column：弹性项垂直排列，从上到下。
column-reverse：弹性项垂直排列，从下到上。所以我们的导航栏将是靠左边+垂直排列。

margin-bottom 可以在布局中创建垂直间距，并调整元素之间的垂直位置关系。

其他样式

/* 其他样式 */
body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  color: #333;
}

header, footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

这里不用使用.body了，已经到HTML的标识了

font-family 用于指定元素的字体系列。可以接受多个字体名称作为值，用逗号分隔。浏览器会按照给定的顺序来依次尝试使用这些字体，直到找到用户计算机上已安装的可用字体为止。

通用字体系列：例如 serif（衬线字体，如 Times New Roman）、sans-serif（非衬线字体，如 Arial）、monospace（等宽字体）等。
特定字体名称：例如 Arial、Helvetica、Verdana 等。
自定义字体：可以使用 @font-face 规则来引入自定义字体。

color 属性只能应用于文本内容，而不会影响元素的背景颜色或边框颜色。

padding 属性可以单独指定四个方向的内边距，也可以使用缩写形式同时指定上、右、下、左四个方向的内边距。例如，padding: 10px 20px 10px 20px; 表示上、右、下、左四个方向的内边距分别为 10 像素、20 像素、10 像素、20 像素。

这里参考一下赵文博老师画的图：

最后展示一下我们的网站：

搭建一个属于自己的网站——CSS ｜ 青训营

浮动布局

定位布局

弹性盒子布局

其他样式

搭建一个属于自己的网站——CSS ｜青训营