ASCII码 ASCII码

引入字体图标和自定义样式与媒体查询

发布于：2022-07-11 13:52:22  栏目：技术文档

引入字体库样式

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表格样式展示</title>
  8.  <link rel="stylesheet" href="fontcss.css">
  9. </head>
  10. <body>
  11.     <table>
  12.         <caption>学生考勤表</caption>
  13.         <thead class="hea">
  14.             <tr></tr>
  15.             <tr></tr>
  16.             <tr></tr>
  17.             <tr></tr>
  18.             <tr></tr>
  19.             <tr></tr>
  20.             <tr></tr>
  21.             <tr></tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <td>数学</td>
  26.                 <td>数学</td>
  27.                 <td>数学</td>
  28.                 <td>数学</td>
  29.                 <td>数学</td>
  30.                 <td>数学</td>
  31.                 <td>数学</td>
  32.                 <td>数学</td>
  33.             </tr>
  34.             <tr>
  35.                 <td>数学</td>
  36.                 <td>数学</td>
  37.                 <td>数学</td>
  38.                 <td>数学</td>
  39.                 <td>数学</td>
  40.                 <td>数学</td>
  41.                 <td>数学</td>
  42.                 <td>数学</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>数学</td>
  46.                 <td>数学</td>
  47.                 <td>数学</td>
  48.                 <td>数学</td>
  49.                 <td>数学</td>
  50.                 <td>数学</td>
  51.                 <td>数学</td>
  52.                 <td>数学</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>数学</td>
  56.                 <td>数学</td>
  57.                 <td>数学</td>
  58.                 <td>数学</td>
  59.                 <td>数学</td>
  60.                 <td>数学</td>
  61.                 <td>数学</td>
  62.                 <td>数学</td>
  63.             </tr>
  64.             <tr>
  65.                 <td>数学</td>
  66.                 <td>数学</td>
  67.                 <td>数学</td>
  68.                 <td>数学</td>
  69.                 <td>数学</td>
  70.                 <td>数学</td>
  71.                 <td>数学</td>
  72.                 <td>数学</td>
  73.             </tr>
  74.             <tr>
  75.                 <td>数学</td>
  76.                 <td>数学</td>
  77.                 <td>数学</td>
  78.                 <td>数学</td>
  79.                 <td>数学</td>
  80.                 <td>数学</td>
  81.                 <td>数学</td>
  82.                 <td>数学</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>数学</td>
  86.                 <td>数学</td>
  87.                 <td>数学</td>
  88.                 <td>数学</td>
  89.                 <td>数学</td>
  90.                 <td>数学</td>
  91.                 <td>数学</td>
  92.                 <td>数学</td>
  93.             </tr>
  94.             <tr>
  95.                 <td>数学</td>
  96.                 <td>数学</td>
  97.                 <td>数学</td>
  98.                 <td>数学</td>
  99.                 <td>数学</td>
  100.                 <td>数学</td>
  101.                 <td>数学</td>
  102.                 <td>数学</td>
  103.             </tr>
  104.         </tbody>
  105.     </table>
  106.     <style>
  107. table th,table td{border:1px solid #333;}
  108. /*表格折叠线*/
  109. table{border-collapse: collapse;
  110. width: 80%;
  111. height: auto;
  112. margin:auto; 
  113. text-align: center;
  114. }
  115. table caption{font-size: 1.5em;}
  116. table thead  {background: rgb(122, 61, 61);}
  118.     </style>
  119.     <hr>
  120. <div >
  121.     <span class="iconfont icon-jingdong1"></span>
  122. </div>
  124. </body>
  125. </html>

css代码

  1. @import 'font_ion/iconfont.css';

媒体库设置pc端优先

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>移动端媒体查询</title>
  8. </head>
  9. <body>
  10.     <button class="yu1">按钮1</button>
  11.     <button class="yu2">按钮2</button>
  12.     <button class="yu3">按钮3</button>
  13.     <button>按钮4</button>
  14.     <button>按钮5</button>
  15.     <button>按钮6</button>
  16. <style>
  17.     html{font-size: 10px;}
  18.     .yu1{font-size: 1rem;}
  19.     .yu2{font-size: 2rem;}
  20.     .yu3{font-size: 3rem;}
  21.     button{background: rgb(192, 136, 136);
  22.     border: none;
  23.     color: blue;
  24.  }
  25.     html{font-size: 10px;}
  26.     @media (min-width:1100px){
  27.   html {font-size:2rem;}
  28. }
  29.   @media (min-width:960px) and (max-width:1099){
  30.   html {font-size:1.5rem;}
  31. }
  33. @media (min-width:550px) and (max-width:740){
  34.   html {font-size:1rem;}
  35. }
  36. </style>
  37. </body>
  38. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行