静态网站部署，上线你的个人网站【修复版】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>这个老白有点憨</title>
<style>
body {
margin: 0;
height:100vh;
background-color:#fcfcfc
}
.sj {text-indent:30px;}
</style>
</head>
<body>
<div style="
background-color:#e9e7e7;
text-align:center;
padding:10px;
font-size:15px;
color:#757575"
>
<img src=https://i.328888.xyz/2023/02/21/gCkKp.png alt="原来是小白" width="100px" height="100px">
<p >这个老白有点憨</p>
</div>
<div style="
max-width:700px;
margin:30px auto;
padding:15px;
line-height:1.7;
color:#707070;
">
<p class="sj"><b>hello!</b> 我是<b>"这个老白有点憨"</b>，因为已不是年轻小伙儿的编程小白所以叫老白，看我头像，相信也能看出来确实有点憨。这是我的第一个网站，不知道要做成什么样的，也不知道写些什么内容，就把我的一篇笔记写进来吧，希望能和各位一起交流学习认识一下，在康教主的带领下都把编程这门技术学好。学习编程或许是兴趣吧也或许是想新学一门技术，反正就开始学了。
这两天学习了一下CSS，我就先分享一下关于flex弹性盒子的笔记吧
</p>
<h3> flex弹性盒子属性</h3>
<h4>justify-content 属性 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。</h4>
<p class="sj">center 将项目居中对齐到容器的中心。</p>
<p class="sj">center 将项目居中对齐到容器的中心。</p>
<p class="sj">flex-start(dedefault) {弹性启动（默认）}在容器的开头对齐项目。</p>
<p class="sj">flex-end 对齐容器末尾的项目。</p>
<p class="sj">space-between 第一个和最后一个项目将与容器的末端齐平，并且所有空间在项目之间平均共享。</p>
<p class="sj">space-around 项目的两端都有一半的空间。</p>
<p class="sj">space-evenly 物品周围具有相等的空间。</p>
<h4> 属性对齐项 align-items:center</h4>
<p class="sj">stretch 默认值。元素被拉伸以适应容器。</p>
<p class="sj">center 元素位于容器的中心。</p>
<p class="sj">flex-start 元素位于容器的开头。</p>
<p class="sj">flex-end 元素位于容器的结尾。</p>
<p class="sj">baseline 元素位于容器的基线上。</p>
<h4>flex-direction属性 弹性盒元素的方向</h4>
<p class="sj"> row 默认值。灵活的项目将水平显示，正如一个行一样。</p>
<p class="sj"> row-reverse 与 row 相同，但是以相反的顺序。</p>
<p class="sj">column 灵活的项目将垂直显示，正如一个列一样。</p>
<p class="sj">column-reverse 与 column 相同，但是以相反的顺序。</p>
<h4>order 属性 设置弹性盒对象元素的顺序</h4>
<h4>align-self 属性 居中对齐弹性对象元素内的某个项；</h4>
<p class="sj">auto 默认值。元素继承了它的父容器的 align-items 属性。</p>
<p class="sj">stretch 元素被拉伸以适应容器。</p>
<p class="sj">center 元素位于容器的中心。</p>
<p class="sj">flex-start 元素位于容器的开头。</p>
<p class="sj">flex-end 元素位于容器的结尾。</p>
<p class="sj">baseline 元素位于容器的基线上。</p>
<h4>flex-wrap 属性 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。</h4>
<p class="sj">nowrap 默认值。规定灵活的项目不拆行或不拆列。</p>
<p class="sj">wrap 规定灵活的项目在必要的时候拆行或拆列。</p>
<p class="sj">wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。</p>
<h4>align-content 属性 对齐弹性盒的元素的各项</h4>
<p class="sj">stretch 默认值。元素被拉伸以适应容器。</p>
<p class="sj">center 元素位于容器的中心。</p>
<p class="sj">flex-start 元素位于容器的开头。</p>
<p class="sj">flex-end 元素位于容器的结尾。</p>
<p class="sj">space-between 元素位于各行之间留有空白的容器内。</p>
<p class="sj">space-around 元素位于各行之前、之间、之后都留有空白的容器内。</p>
</div>
<div style="
background-color:#f1f1f1;
text-align:center;
padding:50px
font-size:12px
">
<p class=p1>我的网站</p>
<a href="https//www.midorg.com">友情链接</a>
</div>
</body>
</html>
