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

搜索
博主信息
博文 27
粉絲 1
評(píng)論 2
訪問量 96903
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
字體圖標(biāo)和媒體查詢實(shí)例
          
原創(chuàng)
1007人瀏覽過
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>1025作業(yè)</title>
  7. <!--    作業(yè)內(nèi)容：-->
  8. <!--    1. 實(shí)例演示字體的圖標(biāo)的使用,重點(diǎn)在class方式 -->
  9. <!--    2. 實(shí)例演示媒體查詢?cè)?并描述媒體查詢的順序-->
  10. </head>
  11. <link rel="stylesheet" href="../img/iconfont/iconfont.css">
  12. <style>
  13.     .icon-shouye{
  14.         color: green;
  15.         font-size: 21px;
  16.     }
  17.     .icon-zhuce:hover{
  18.         color: blue;
  19.     }
  20. </style>
  21. <body>
  22. <h3>1. 實(shí)例演示字體的圖標(biāo)的使用,重點(diǎn)在class方式</h3>
  23. <!--注意：圖標(biāo)采用下載本地引用-->
  24. <!--字體圖標(biāo)的字體代碼需要放到clas類里面-->
  25. <i class="iconfont icon-shouye">首頁圖標(biāo)</i>
  26. <span><i class="iconfont icon-zhuce">注冊(cè)圖標(biāo)</i> </span>
  27. <h3>2. 實(shí)例演示媒體查詢?cè)?并描述媒體查詢的順序</h3>
  28. <pre>媒體查詢字面含義：
  29.      媒體: 屏幕, 手機(jī), 打印機(jī)
  30.      查詢: 查詢媒體寬度來確定元素展示方式</pre>
  31. <div class="iup1"><label>1 <input type="text" placeholder="框1:設(shè)置字體大小56px"></label></div>
  32. <div class="iup2"><label>2 <input type="text" placeholder="框2:設(shè)置紅色字體"></label></div>
  33. <div class="iup3"><label>3 <input type="text "placeholder="框3:設(shè)置邊框線藍(lán)色"></label></div>
  35. <style>
  36.     /*默認(rèn)字體大小1rem =10px*/
  37.     html{font-size: 10px}
  40.     .iup1>label{font-size: 1rem}
  41.     /*如果設(shè)備尺寸小于于400px,設(shè)置框1字體大小為56px,框2的字體顏色為紅色，框3的邊框線藍(lán)色*/
  42.     @media (max-width: 400px) {
  43.        html{ font-size:10px;}
  44.         .iup1>label{font-size:4rem }
  45.         .iup2{color: red}
  46.         .iup3{border: 1px solid blue}
  47.     }
  48.     /*如果設(shè)備尺寸在450px~475pxpx之間，框1背景顏色修改為綠色，body背景顏色改為#d9dbda，html根字號(hào)改為15px */
  49.     @media (min-width: 450px) and (max-width: 475px){
  50.         .iup1{background-color: green}
  51.         body {background-color: #d9dbda}
  52.         html {font-size: 15px}
  53.     }
  54. </style>
  55. </body>
  56. </html>

運(yùn)行結(jié)果：

要求解析：設(shè)備尺寸小于400px,設(shè)置框1字體大小為56px,框2的字體顏色為紅色，框3的邊框線藍(lán)色

設(shè)備尺寸小于400px時(shí)的變化

要求解析： 如果設(shè)備尺寸在450px~475pxpx之間，框1背景顏色修改為綠色，body背景顏色改為#d9dbda，html根字號(hào)改為15px

批改老師：PHPzPHPz

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

老師批語：完成的很好，繼續(xù)加油
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)