а√天堂资源中文在线官网,激情亚洲一区国产精品,xxxxx性bbbbb欧美

首頁 > 博客列表 > 字體圖標(biāo)的引入和通過媒體查詢改變導(dǎo)航樣式

博主信息

博文 29

粉絲 1

評論 0

訪問量 22130

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

字體圖標(biāo)

流程

引入字體 css 文件
引入圖標(biāo)類，修改圖標(biāo)編碼
修改字體圖標(biāo)樣式

<!DOCTYPE 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>字體圖標(biāo)</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- class引入 -->
    <div><span class="iconfont icon-cc-visa visa"></span></div>
    <div><span class="iconfont icon-cc-mastercard mastercard"></span></div>
    <!-- JS引入 -->
    <div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-visa-"></use>
      </svg>
    </div>
    <div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon_zhifumastercard"></use>
      </svg>
    </div>
    <!-- 引入字體圖標(biāo)JS文件 -->
    <script src="font_icon/iconfont.js"></script>
  </body>
</html>

/* CSS代碼 */
/* 引入圖標(biāo)字體的CSS文件 */
@import url(font_icon/iconfont.css);
.visa {
  font-size: 2em;
  color: lightgreen;
}
.mastercard {
  font-size: 2em;
  color: coral;
}

媒體查詢

媒體：屏幕平板手機(jī) 打印機(jī)
查詢：獲取媒體當(dāng)前狀態(tài)
布局前提：寬度固定，高度增長，用戶不可能在一個無限空間內(nèi)進(jìn)行布局, 寬度, 或高度, 必須要有一個固定下來
當(dāng)你使用 min-width 時，需要從小到大
當(dāng)你使用 max-width 時，需要從大到小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PC媒體查詢</title>
    <link rel="stylesheet" href="style2.css" />
  </head>
  <body>
    <div>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">教程</a></li>
        <li><a href="#">博客</a></li>
        <li><a href="#">論壇</a></li>
      </ul>
    </div>
  </body>
</html>

/* css文件 */
body {
  width: 100vw;
}
div {
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
  margin: auto;
}
/* 導(dǎo)航 */
li {
  float: left;
  margin-left: 15px;
  list-style: none;
}
a:link {
  color: black;
  text-decoration: none;
}
/*  寬度大于1024像素的窗口，導(dǎo)航背景色為紅色*/
@media (min-width: 1025px) {
  div {
    background-color: red;
  }
}
/*  寬度在861-1024像素的窗口，導(dǎo)航背景色為綠色*/
@media (min-width: 861px) and (max-width: 1024px) {
  div {
    background-color: chartreuse;
  }
}
/*  寬度小于等于860像素的窗口，導(dǎo)航背景色為藍(lán)色*/
@media (max-width: 860px) {
  div {
    background-color: aqua;
  }
}

批改老師：

PHPz

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

老師批語：

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

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

0條評論

作者最新博文

markdown基礎(chǔ)語法和emmet基礎(chǔ)語法

2022-07-05 06:03:09

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

字體圖標(biāo)

媒體查詢