首頁 > 博客列表 > 第五課:簡單的頁面結(jié)構(gòu)布局,字體圖標(biāo)和媒體查詢的綜合應(yīng)用

博主信息

博文 12

粉絲 0

評論 0

訪問量 10377

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

頁面結(jié)構(gòu)

最常見的頁面結(jié)構(gòu)就是上中下也即<header></header><main></main><footer></footer>三項(xiàng),通過分別的CSS來將整個頁面做切隔,顯示代碼如下:

  <body>
    <header>頭部</header>
    <main>主體部分</main>
    <footer>腳部</footer>
  </body>

如果只做一個一屏高度的頁面,那問題就來了:頭腳高度都可以定,主體部分的高度如何定呢?
這時就用了新學(xué)的vh這個長度單位,1VH表示整個可視窗口的1/100,這時這些如下CSS設(shè)置

header {
  width: 100vw;
  height: 20vh;
  min-height: 50px;
  background-color: aquamarine;
}
footer {
  width: 100vw;
  height: 10vh;
  background-color: bisque;
}
main {
  background-color: rgb(205, 248, 182);
  height: 70vh;
  outline: 1px solid;
}

這樣一來就把整個窗口用完了.

字體圖標(biāo)

所謂的字體圖標(biāo)就是用到的矢量圖就和一個文字一樣,可以進(jìn)一步設(shè)置他的大小顏色等等,這比單純的一個固定圖片也好用得多.目前國內(nèi)主要用的是阿里圖標(biāo).
在使用上,可以將喜歡的圖標(biāo)保存到對應(yīng)的項(xiàng)目中,生成在線鏈接,復(fù)制對應(yīng)的代碼(注意這個代碼里,包含了所有此項(xiàng)目下的圖標(biāo),使用時需要將整個鏈接導(dǎo)入到項(xiàng)目上,將對應(yīng)項(xiàng)目下的每個圖標(biāo)的名稱拿過來用到項(xiàng)目中,圖片如下

圖標(biāo)導(dǎo)入和使用中,一般會生產(chǎn)一個單獨(dú)的icon.css文件來管理所有的圖標(biāo),在對應(yīng)的html頁面上,再導(dǎo)入css做對應(yīng)處理,代碼如下:

<span class="iconfont icon-fasongtijiao fasongtijiao"></span>

html代碼中,直接把圖標(biāo)放到span標(biāo)簽中即可(像文字一樣),對應(yīng)的圖標(biāo)名,放置在class樣式中,樣式中要寫3項(xiàng)內(nèi)容,分別是”iconfont”,”復(fù)制過來的圖標(biāo)名稱”和”圖標(biāo)名稱簡寫”—-我們在CSS樣式中,一般圖標(biāo)名稱簡寫來設(shè)計

@import url(http://at.alicdn.com/t/c/font_3957852_atsrkm6th2k.css);
.chazhao,.fasongtijiao{
    font-size: 2rem;
    color: blueviolet;
    margin-top: 0.2em;
}
.fasongtijiao:hover{
    /* font-size: 2rem; */
    color: red;
    cursor: pointer;
}

注意導(dǎo)入時,對應(yīng)的地址為http://*鏈接
*通過上面的操作,就實(shí)現(xiàn)了阿里圖標(biāo)在自己項(xiàng)目中的使用

媒體查詢

一般使用上,媒體查詢也會單獨(dú)作為一個CSS引入,為的了針對不同寬度的終端來做針對性的顯示,包括元素是否顯示以及顯示樣式等等.

媒體查詢語句

媒體查詢語句為”@media (min-width: 740px) {}”,具體在設(shè)置上通過是從大到小,或從小到大來設(shè)計
注意中間and,在寫的時候,前后必須要有空格,要不然等于沒設(shè)置

媒體查詢中,通常通過改變rem值來達(dá)到改變顯示內(nèi)容大小,比如:

@media (min-width: 740px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 375px) and (max-width: 740px) {
  html {
    font-size: 12px;
  }
  .markword {
    display: none;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 8px;
  }
  .markword{
    display: none;
  }
  .fasongtijiao {
    display: none;
  }
}

最后的綜合效果

對應(yīng)的html代碼

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>0316簡單的頁面結(jié)構(gòu)布局 字體圖標(biāo)和媒體查詢的綜合應(yīng)用</title>
    <link rel="stylesheet" href="0316.css">
    <link rel="stylesheet" href="icon.css" />
    <link rel="stylesheet" href="media.css" />
  </head>
  <body>
    <header>
      <!-- <span class="markword">請輸入到查詢的關(guān)鍵字</span> -->
      <input type="text" class="keyword" placeholder="請輸入到查詢的關(guān)鍵字" autofocus/>
      <span class="iconfont icon-fasongtijiao fasongtijiao"></span>
      <!-- <span class="iconfont icon-chazhao chazhao"></span> -->
    </header>
    <main>主體部分</main>
    <footer>腳部</footer>
  </body>
</html>
其它一些元素的css樣式
```css
.keyword {
  margin-left: 1rem;
  margin-top: 1rem;
  width: calc(100vw - 5rem);
  height: 2rem;
  font-size: 1.5rem;
}
.fasongtijiao {
  vertical-align: middle;
}
.keyword:active + .fasongtijiao {
  color: yellow;
}

最后一個知識點(diǎn),如何保持input框+對應(yīng)的元素,為整個窗口寬度呢?這里就用了CSS里的寬度計算公式,如keyword樣式里的 width: calc(100vw - 5rem)

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

第二課:html基礎(chǔ)認(rèn)識

2023-03-10 22:29:56