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

作業(yè)內(nèi)容：

1. 實例演示字體的圖標的使用,重點在class方式
2. 實例演示媒體查詢原理,并描述媒體查詢的順序

阿里iconfont圖標的使用

準備圖標

1.注冊賬號
2.搜索需要的圖標，選擇想要的圖標【添加入庫】

3.點擊網(wǎng)站右上角的【購物車】圖標

4.將圖標【添加至項目】

使用圖標——在線方式

5.更新代碼

6.【點此復制代碼】，在html中引入css文件，其href屬性的值是我們復制的網(wǎng)址

<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3352150_4i5winn91sr.css"/>

7.在網(wǎng)站中選擇自己的目標圖標，點擊【復制代碼】

8.在html中使用圖標。使用span標簽，class屬性上添加上一步復制的圖標代碼

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

9.可以使用CSS調(diào)整圖標樣式

.iconfont.icon-gouwuchekong {
  font-size: 28px;
  color: red;
  text-shadow: 1px 1px 1px #888;
  }

效果

使用圖標——本地方式

5.下載圖標，【下載至本地】

6.解壓文件。將下面的css文件和圖標字體解壓到同一個目錄中，比如這里是iconfont。下圖下面三個是字體文件，有一個就能顯示圖標。

7.html文件中引入本地css文件，注意路徑要正確。

<link rel="stylesheet" href="iconfont/iconfont.css"/>

其他步驟同 在線方式7~9步。

媒體查詢

HTML

        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>

CSS

            .content {
                display: flex;
                justify-content: center;
            }
            .left {
                width: 30rem;
                height: 20rem;
                background-color: red;
            }
            .right {
                float: left;
                width: 30rem;
                height: 20rem;
                background-color: blue;
            }
      @media  (min-width: 1080px) {
                html {
                    font-size: 16px;
                }
      }
            @media  (min-width: 765px) and (max-width: 1080px) {
                html {
                    font-size: 10px;
                }
            }
            @media (max-width: 765px){
                html {
                    font-size: 5px;
                }
            }

效果

媒體查詢的寬度順序:

1. 移動端: 從小往大寫
2. PC端: 反過來寫,從大向下寫

批改老師：PHPz

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

老師批語：完成的很好