靜態(tài)網(wǎng)站部署，上線你的個(gè)人網(wǎng)站【修復(fù)版】
<!DOCTYPE html>
<html lang="zh-CN">
? <head>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1" />
? ? <title>這個(gè)老白有點(diǎn)憨</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 >這個(gè)老白有點(diǎn)憨</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>"這個(gè)老白有點(diǎn)憨"</b>，因?yàn)橐巡皇悄贻p小伙兒的編程小白所以叫老白，看我頭像，相信也能看出來確實(shí)有點(diǎn)憨。這是我的第一個(gè)網(wǎng)站，不知道要做成什么樣的，也不知道寫些什么內(nèi)容，就把我的一篇筆記寫進(jìn)來吧，希望能和各位一起交流學(xué)習(xí)認(rèn)識(shí)一下，在康教主的帶領(lǐng)下都把編程這門技術(shù)學(xué)好。學(xué)習(xí)編程或許是興趣吧也或許是想新學(xué)一門技術(shù)，反正就開始學(xué)了。
這兩天學(xué)習(xí)了一下CSS，我就先分享一下關(guān)于flex彈性盒子的筆記吧
? ? ? </p>
? ? ? <h3> flex彈性盒子屬性</h3>
? ? ? <h4>justify-content 屬性 ?用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。</h4>
? ? ? <p class="sj">center 將項(xiàng)目居中對(duì)齊到容器的中心。</p>
? ? ? <p class="sj">center 將項(xiàng)目居中對(duì)齊到容器的中心。</p>
? ? ? <p class="sj">flex-start(dedefault) {彈性啟動(dòng)（默認(rèn)）}在容器的開頭對(duì)齊項(xiàng)目。</p>
? ? ? <p class="sj">flex-end 對(duì)齊容器末尾的項(xiàng)目。</p>
? ? ? <p class="sj">space-between ?第一個(gè)和最后一個(gè)項(xiàng)目將與容器的末端齊平，并且所有空間在項(xiàng)目之間平均共享。</p>
? ? ? <p class="sj">space-around ?項(xiàng)目的兩端都有一半的空間。</p>
? ? ? <p class="sj">space-evenly ?物品周圍具有相等的空間。</p>
? ? ? <h4> 屬性對(duì)齊項(xiàng) ? align-items:center</h4>
? ? ? ? <p class="sj">stretch ?默認(rèn)值。元素被拉伸以適應(yīng)容器。</p>
? ? ? ? <p class="sj">center ?元素位于容器的中心。</p>
? ? ? ? <p class="sj">flex-start ?元素位于容器的開頭。</p>
? ? ? ? <p class="sj">flex-end ? 元素位于容器的結(jié)尾。</p>
? ? ? ? <p class="sj">baseline ? 元素位于容器的基線上。</p>
? ? ? <h4>flex-direction屬性 彈性盒元素的方向</h4>
? ? ? ? <p class="sj"> row 默認(rèn)值。靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣。</p>
? ? ? ? <p class="sj"> row-reverse ? 與 row 相同，但是以相反的順序。</p>
? ? ? ? <p class="sj">column ? 靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。</p>
? ? ? ? <p class="sj">column-reverse ? 與 column 相同，但是以相反的順序。</p>
? ? ? <h4>order 屬性 ?設(shè)置彈性盒對(duì)象元素的順序</h4>
? ? ? <h4>align-self 屬性 ?居中對(duì)齊彈性對(duì)象元素內(nèi)的某個(gè)項(xiàng)；</h4>
? ? ? ? <p class="sj">auto ? 默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。</p>
? ? ? ? <p class="sj">stretch ? 元素被拉伸以適應(yīng)容器。</p>
? ? ? ? <p class="sj">center ? 元素位于容器的中心。</p>
? ? ? ? <p class="sj">flex-start ? 元素位于容器的開頭。</p>
? ? ? ? <p class="sj">flex-end ? ?元素位于容器的結(jié)尾。</p>
? ? ? ? <p class="sj">baseline ? ?元素位于容器的基線上。</p>
? ? ? <h4>flex-wrap ?屬性 ?規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。</h4>
? ? ? ? <p class="sj">nowrap ? 默認(rèn)值。規(guī)定靈活的項(xiàng)目不拆行或不拆列。</p>
? ? ? ? <p class="sj">wrap ? 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列。</p>
? ? ? ? <p class="sj">wrap-reverse ? 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列，但是以相反的順序。</p>
? ? ? <h4>align-content 屬性 ?對(duì)齊彈性盒的元素的各項(xiàng)</h4>
? ? ? ? <p class="sj">stretch ? 默認(rèn)值。元素被拉伸以適應(yīng)容器。</p>
? ? ? ? <p class="sj">center ? 元素位于容器的中心。</p>
? ? ? ? <p class="sj">flex-start ? 元素位于容器的開頭。</p>
? ? ? ? <p class="sj">flex-end ? ?元素位于容器的結(jié)尾。</p>
? ? ? ? <p class="sj">space-between ? 元素位于各行之間留有空白的容器內(nèi)。</p>
? ? ? ? <p class="sj">space-around ? 元素位于各行之前、之間、之后都留有空白的容器內(nèi)。</p>
? ? </div>
? ? <div style="
? ? ? background-color:#f1f1f1;
? ? ? text-align:center;
? ? ? padding:50px
? ? ? font-size:12px
? ? ? ">
? ? ? ? <p class=p1>我的網(wǎng)站</p>
? ? ? ? <a href="https//www.midorg.com">友情鏈接</a>
? ? ? ? </div>
? </body>
</html>
