亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

響應(yīng)式布局：媒體查詢

響應(yīng)式布局的最大特點(diǎn)就是隨著設(shè)備屏幕的大小改變，頁(yè)面布局發(fā)生改變。
而我們一般的布局前提是寬度受限而高度不受限的空間。
以下，我們一PC端布局為例，進(jìn)行響應(yīng)式布局的解析：
首先頁(yè)面中有三個(gè)按鈕

<button class="btn small">按鈕1</button>
<button class="btn middle">按鈕2</button>
<button class="btn large">按鈕3</button>
<style>
    /* 小按鈕 */
    .btn.small {
      font-size: 1.2rem;
    }
    /* 中按鈕 */
    .btn.middle {
      font-size: 1.6rem;
    }
    /* 大按鈕 */
    .btn.large {
      font-size: 1.8rem;
    }
</style>

如何實(shí)現(xiàn)隨著瀏覽器窗口的大小變化而按鈕的大小也發(fā)生變化呢？

• 我們先設(shè)置頁(yè)面的默認(rèn)文本大小為16px;(不設(shè)置的話，默認(rèn)就是16px);

html {
 font-size: 16px;
 }

• 當(dāng)屏幕大小小于1366px的時(shí)候，我們規(guī)定他的字體變小，為13.66px;

@media (max-width ： 1366px) {
    html {
        font-size:13.66px;
    }
}

• 當(dāng)屏幕大小大于1920px時(shí)，我們規(guī)定他的字體變大，為19.2px;

@media (min-width : 1920px){
    html {
        font-size:19.2px;
    }
}

• 當(dāng)屏幕大小介于1366到1920px之間時(shí)，我們?cè)O(shè)置他的根文本字號(hào)為18px;

@media (min-width:1366px) and (max-width:1919px) {
    html {
        font-size:18px;
    }
}

綜上，我們可以總結(jié)一下響應(yīng)式布局的寫(xiě)法，首先基本語(yǔ)法是@media開(kāi)頭，有兩種寫(xiě)法：@media only screen and (max-width:XXXpx)=@media (max-width:XXXpx);
其中的max-width的含義為當(dāng)屏幕寬度小于XX值的時(shí)候，min-width的含義為當(dāng)屏幕寬度大于XX值的時(shí)候。即畫(huà)一條軸來(lái)表示：

利用固定定位，寫(xiě)一個(gè)登錄的蒙層

首先分析一下需求，我們需要一個(gè)登錄頁(yè)面的蒙層，那么勢(shì)必是有一個(gè)原始頁(yè)面，然后點(diǎn)擊登錄按鈕之后，觸發(fā)蒙層頁(yè)面顯示。

那么我這寫(xiě)了一個(gè)很簡(jiǎn)單的原始頁(yè)面，有個(gè)頭部，頭部有個(gè)登錄按鈕,然后有一些簡(jiǎn)單的樣式

<header>
      <h1 class="title">霍格沃茲魔法學(xué)院</h1>
      <button onclick="document.querySelector('.modal').style.display='block'">
        登錄
      </button>
    </header>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-image: url('images/bg.jpg');
      }
      header {
        background-image: url('images/mao.jpg');
        background-size: 100% 100%;
        padding: 0.5em 1em;
        display: flex;
      }
      header .title {
        font-weight: lighter; /*設(shè)置文本的粗細(xì)，normal默認(rèn)，bold加粗，bolder更粗的，lighter更細(xì)的，或數(shù)字*/
        font-style: italic; /*設(shè)置文本樣式，normal默認(rèn)，italic斜體，oblique傾斜的*/
        color: azure;
        text-shadow: 1px 1px 1px #555; /*文本陰影效果 水平陰影位置，垂直陰影位置，模糊距離，顏色*/
        letter-spacing: 1px; /*設(shè)置h1,h2字母間距*/
      }
      header button {
        margin-left: auto;
        width: 5em;
        border: none;
        border-radius: 0.5em;
      }
      header button:hover {
        background-color: blueviolet;
        color: white;
        cursor: pointer; /*圓角*/
        box-shadow: 0 0 10px white;
        transition: 0.3s;
      }
      </style>

重點(diǎn)來(lái)了，寫(xiě)一個(gè)登錄表單，在頁(yè)面點(diǎn)擊登錄的時(shí)候跳出來(lái)

<!-- 模態(tài)框表單 -->
    <div class="modal">
      <div
        class="modal-bg"
        onclick="this.parentNode.style.display='none'"
      ></div>
      <form action="a.php" method="post" class="modal-form">
        <fieldset style="display: grid; gap: 1em;">
          <legend>用戶登錄</legend>
          <input type="email" name="email" placeholder="email@email.com" />
          <input type="password" name="password" placeholder="******" />
          <button>登錄</button>
        </fieldset>
      </form>
    </div>

/* 模態(tài)框表單 */
      .modal .modal-form fieldset {
        background-color: lightcyan;
        border: none;
        padding: 2em;
        box-shadow: 0 0 5px #888;
      }
/* 模態(tài)框表單標(biāo)題 */
      .modal .modal-form fieldset legend {
        padding: 5px 1em;
        background-color: rebeccapurple;
        color: white;
      }
      .modal .modal-form {
        /* 固定定位 */
        position: fixed;
        /* 頂部留出預(yù)留 */
        top: 15em;
        /* 左右相等，把表單放正中間 */
        left: 20em;
        right: 20em;
      }
      .modal .modal-bg {
        position: fixed;
        /*全部鋪滿*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(0, 0, 0, 0.5); /*0.5透明度*/
      }
      .modal {
        display: none;
      }

那么來(lái)看一下神奇的效果吧

flex布局

定義一個(gè)flex布局的容器：
display：flex
flex容器中的子元素被稱為彈性項(xiàng)目或flex項(xiàng)目；
flex容器上只要記住三個(gè)屬性就可以了：
flex-flow：主軸方向 換行,例：flex-flow:row nowrap(不換行【wrap為可換行】)

place-content:項(xiàng)目在主軸上的排列和剩余空間的分配
【值：start起始邊對(duì)齊，end結(jié)束邊對(duì)齊，center居中對(duì)齊，space-between兩端對(duì)齊，space-around分散對(duì)齊，space-evenly平均對(duì)齊】

place-items:項(xiàng)目在交叉軸上的對(duì)齊方式
【值：stretch如果子項(xiàng)加起來(lái)的尺寸小于對(duì)齊容器的尺寸，則任何未尺寸為 auto 的項(xiàng)將增加同等的大?。ú皇前幢壤?，但也會(huì)受到 max-height/max-width （或等同的功能）的限制，因此所有項(xiàng)剛好能填滿對(duì)齊容器；start：起始邊對(duì)齊；end：結(jié)束邊對(duì)齊；center：居中對(duì)齊】

flex容器上的flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性。
注意：如果元素不是彈性盒模型對(duì)象的子元素，則 flex 屬性不起作用。
flex:放大因子 收縮因子 計(jì)算寬度

另外flex的項(xiàng)目上還可以設(shè)置order屬性，order=0的時(shí)候是默認(rèn)值，order=1的時(shí)候會(huì)往后排，order=-1會(huì)往前排，也就是order越小越靠前！

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：