search

博客列表 >字体单位尺寸、可视窗口大小、表格常用样式、移动端自适应、PC端自适用

字体单位尺寸、可视窗口大小、表格常用样式、移动端自适应、PC端自适用

P粉314265155
P粉314265155原创
2022年07月10日 17:12:10639浏览

字体大小

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>CSS常用单位</title>
  9.   <style>
  11. .em{
  12.     font-size: 2em;
  13.     color: aqua;
  14. }
  15. .px{
  16.     font-size: 15px;
  17.     color: blue ;
  18. }
  19. .rem{
  20.     font-size: 2rem;
  21.     color: rebeccapurple;
  22. }
  23. .baifen{
  24.     background-color: aqua;
  25.     font-size: 6em;
  26. }
  27. .baifen>.bai {
  29.     font-size: 50%;
  30. }
  31. /* 根元素就是 html = :root */
  32. :root{
  33.     font-size: 8px;
  34.     font-size: 16px;
  35. }
  36. .rot {
  37.     background-color: blue;
  38.     font-size: 2rem;
  39. }
  40. body{
  41.     width: 100vw;
  42.     /* 如果高度不写，高度就是很宽度成比例变化 */
  43.     height: 100vh;
  44. }
  45. .box{
  46.     width: 50vh;
  47.     height: 50vh;
  48.     background-color: brown;
  49. }![](https://img.php.cn/upload/image/568/864/168/1657431142259767.jpg)
  50.   </style>
  51. </head>
  52. <body>
  53.     <!-- 1em =1rem=16px  浏览器默认16px    像素是 默认矩形的框   1英寸=96px   1英寸约等于25.4毫米  1mm=(10/43)px≈0.2325px    43mm≈10px
  54.       1 厘米=0.3937 英寸  1 英寸=2.54 厘米  72像素/英寸=28.346像素/厘米 300像素/英寸=118.11像素/厘米
  55.     -->
  56. <p class="em">我是em单位尺寸 绝对尺寸单位</p>
  57. <p class="px">我是px单位尺寸 绝对尺寸单位</p>
  58. <p class="rem">我是rem单位尺寸</p>
  59. <div class="baifen">
  60.     <p>我是父级尺寸</p>
  61.      <p  class="bai">我是百分比%  我是相对单位，参照父级单位</p>
  62.     </div>
  63. <div class="rot">
  64.    我是根尺寸
  65. </div>
  67. <div class="box">
  68.   我是可视化窗口盒子我是相对单位：vw   高度：  vh
  69. </div>
  71. </body>
  72. </html>

表格常用样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.         /* 1、添加表格线 border */
  10.         table th,
  11.         table tr,
  12.         table td{
  13.             border: 2px solid rebeccapurple;
  15.         }
  16.         /* 2、折叠表格线     border-collapse: collapse;*/
  17.         table{
  18.             border-collapse: collapse;
  19.         }
  21.        /* 3、表格进行布局设置 */
  22.        table{
  23.         width: 80%;
  24.         /* table  块级元素在父级中的居中 有margin-left   margin-right */
  25.         margin: auto;
  26.         /* 表格内容文字居中 */
  27.         text-align: center;
  28.        }
  29.        table caption {
  30.         font-size: 1.2em;
  31.         /* 增加外边距，远离标题 */
  32.         margin-bottom: 0.6em; 
  33.       }
  35.       table thead {
  36.         background-color: lightcyan;
  37.       }
  39. /* 给上午添加背景 常规方式  .属性名  或者 table tboday .shangwu */
  40.  /* .shangwu{
  41.     background-color: blue;
  42. }  */
  43. /* 简化写法  ,用伪类写 ，可以进行删选、个性化书写
  44. table tbody tr:first-of-type td:first-of-type
  45. 注意空格
  46.   table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  47. */
  48. /* table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{ */
  49.     table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  50.     background-color: firebrick;
  51. }
  52.     </style>
  53. </head>
  54. <body>
  56. <!-- table>caption+(thead>tr>th)+(tbody>tr>td) -->
  57. <table>
  58.     <caption>我是课程表</caption>
  59.     <thead>
  60.         <tr>
  61.             <th>时间</th>
  62.             <th>星期一</th>
  63.             <th>星期二</th>
  64.             <th>星期三</th>
  65.             <th>星期四</th>
  66.             <th>星期五</th>
  68.         </tr>
  69.     </thead>
  70.     <!-- 我是第一个tbody -->
  71.     <tbody>
  72.         <tr>
  73.            <td rowspan="2" class="shangwu">上午</td>
  74.             <td>语文</td>
  75.             <td>数学</td>
  76.             <td>英语</td>
  77.             <td>物理</td>
  78.             <td>化学</td>
  80.         </tr>
  81.         <tr>
  83.              <td>语文</td>
  84.              <td>数学</td>
  85.              <td>英语</td>
  86.              <td>物理</td>
  87.              <td>化学</td>
  89.          </tr>
  90.         </tbody>
  91.          <!-- 我是第二tbody -->
  92.          <tbody>
  93.         <tr>
  94.             <td colspan="6">中午</td>
  96.         </tr>
  97.     </tbody>
  98.          <!-- 我是第三tbody -->
  99.          <tbody>
  100.         <tr>
  101.             <td rowspan="2">下午</td>
  102.             <td>语文</td>
  103.             <td>数学</td>
  104.             <td>英语</td>
  105.             <td>物理</td>
  106.             <td>化学</td>
  108.         </tr>
  109.         <tr>
  111.             <td>语文</td>
  112.             <td>数学</td>
  113.             <td>英语</td>
  114.             <td>物理</td>
  115.             <td>化学</td>
  117.         </tr>
  118.     </tbody>
  119. </table>
  120. </body>
  121. </html>

字体图标

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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="./iconfont.css"> -->
  9.     <link rel="stylesheet" href="../0708/css/zuoye3.css">
  10. <style>
  13. /* .myicon1{
  14.         font-size: 300px;
  15.         color: red;
  16.         box-shadow: 2px 2px 2px #888;
  17.         border: 1px solid #888;
  18.         background-color: green;
  19.       } */
  20.   /* 可以使用  .myicon进行对图标大小的定义，定义属性参考 文字 注意 里面要有myicon属性  */
  21. </style>
  23. </head>
  24. <body>
  25.     <!-- 注意  icon-shouye  是字体图标的名称    另外可从下载的 demo_index.html 打开获取操作指导 -->
  26.     <span id="shouye" class="iconfont icon-shouye myicon1"></span>
  27.     <br>
  28.     首页
  30. </body>
  31. </html>
  1. 注意：引入的css 后面要跟分号，且 在自定义样式的前面，否则不显示
  2. @import '../font_icon/iconfont.css';
  5. /* 2. 自定义图标样式 */
  6. .myicon1{
  7.     font-size: 300px;
  8.     color: red;
  9.     box-shadow: 2px 2px 2px #888;
  10.     border: 1px solid #888;
  11.     background-color: green;
  12. }

响应式/移动端布局基础：媒体查询

1、按钮随着 根属性变化

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. :root{
  10. /* 设置根字号的尺寸 */
  11. font-size: 20px;
  12. /* 等于1.6rem */
  13. }
  14. button{
  15.     background-color: blue;
  16.     color: aqua;
  17.     border: none;
  18.     /* outline: 1.875rem; */
  19.     /* border: none;   没有边框，背景 */
  20.      outline: none;
  21. }
  22. /* :hover  鼠标悬停的基本样式 */
  23. .bin:hover{
  24.     /* cursor: pointer; 鼠标变成一个小手 */
  25.     cursor: pointer;
  26.     /* opacity 选择后的背景透明度变化 80% */
  27.     opacity: 0.8;
  28.    /* 缓冲过度  注意后面跟着秒数*/
  29.    transition: 0.5s;
  32. }
  33. .small{
  34.     /* 小按钮  可以用字体大小调节按钮大小.,按钮默认尺寸是 13.333333 */
  35.     font-size: 1.5rem;
  36.     /* px是绝对值不能用在媒体查询中 往后不要用了 ,在跟字体设置，用rem表示尺寸
  37.     ，修改 root 根字体后，这些按键就会动态改变 */
  38. }
  39. .middle{
  40.     font-size: 0.6rem;
  41. }
  42. .large{
  43.     font-size: 2.5rem;
  44. }
  45. </style>
  46. </head>
  47. <body>
  49.     <!-- 媒体、打印机、PC端屏幕显示长宽高等 -->
  50. <!-- 布局前提条件：假设布局固定宽度，高度随着内容自动增长 -->
  52. <!-- 用户使用的布局也是这样的，宽度固定，高度随内容增长
  53. 不会在无限空间进行操作,因为无限空间不能布局
  54. -->
  55. <button class="bin small">提交</button>
  56. <button class="bin middle">重置</button>
  57. <button class="bin large">返回上一页</button>
  61. </body>
  62. </html>

2、移动端按钮随着 屏幕大小变化属性变化

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. /* html { */
  10. /* 设置根字号的尺寸 */
  11. /* font-size: 20px; */
  12. /* 等于1.6rem */
  13. /* } */
  14. html {
  15.         /* 根字号 */
  16.         /* 为了计算方便: 把根字号设置为 10px  */
  17.         font-size: 10px;
  19.         /* 10px = 1rem; */
  20.       }
  21. /* button{
  22.     background-color: blue;
  23.     color: aqua;
  24.     border: none; */
  25.     /* outline: 1.875rem; */
  26.     /* border: none;   没有边框，背景 */
  27.      /* outline: none;
  28. } */
  29. /* :hover  鼠标悬停的基本样式 */
  30. /* .btn:hover{ */
  31.     /* cursor: pointer; 鼠标变成一个小手 */
  32.     /* cursor: pointer; */
  33.     /* opacity 选择后的背景透明度变化 80% */
  34.     /* opacity: 0.8; */
  35.    /* 缓冲过度  注意后面跟着秒数*/
  36.    /* transition: 0.5s; */
  39. /* }
  40.  */
  42.  .btn {
  43.         background-color: seagreen;
  44.         color: white;
  45.         border: none;
  46.         outline: none;
  47.       }
  48. /* .small{ */
  49.     /* 小按钮  可以用字体大小调节按钮大小.,按钮默认尺寸是 13.333333 */
  50.     /* font-size: 1.5rem; */
  51.     /* px是绝对值不能用在媒体查询中 往后不要用了 ,在跟字体设置，用rem表示尺寸
  52.     ，修改 root 根字体后，这些按键就会动态改变 */
  53. /* } */
  54. /* .middle{ */
  55.     /* font-size: 0.6rem; */
  56. /* } */
  57. /* .large{
  58.     font-size: 2.5rem;
  59. } */
  60. .small {
  61.         /* 小按钮: 12px  */
  62.         /* font-size: 12px; */
  63.         /* px: 绝对值,不能用在媒体查询中 */
  65.         font-size: 1.2rem;
  66.       }
  68.       .middle {
  69.         /* 中等按钮: 16px; */
  70.         /* font-size: 16px; */
  72.         font-size: 1.6rem;
  73.       }
  74.       .large {
  75.         /* 大按钮: 20px */
  76.         /* font-size: 20px; */
  77.         font-size: 2rem;
  78.       }
  82. /* 移动优先：一定要从小屏幕开始写 ,安卓的乱七八遭尺寸都有,苹果的比较同意 */
  84. /* 注意：@media是引入的属性，max-width是最大尺寸，是大于
  85.                                                   min-width是最小的尺寸是不包含的，小于
  86. 随着改变屏幕的尺寸/手持机的类型，按键大小会变化的 */
  87. /* 375px < width < 414px   注意中间用and连接 */
  88. @media (max-width: 374px) {
  89.         html {
  90.           font-size: 12px;
  91.         }
  92.       }
  94.       /* 375px < width < 414px */
  95.       @media (min-width: 375px) and (max-width: 413px) {
  96.         html {
  97.           font-size: 14px;
  98.         }
  99.       }
  101.       /* > 414px */
  102.       @media (min-width: 414px) {
  103.         html {
  104.           font-size: 16px;
  105.         }
  106.       }
  108.       @media (min-width: 600px) {
  109.         html {
  110.           font-size: 18px;
  111.         }
  112.       }
  114. </style>
  115. </head>
  116. <body>
  118.     <!-- 媒体、打印机、PC端屏幕显示长宽高等 -->
  119. <!-- 布局前提条件：假设布局固定宽度，高度随着内容自动增长 -->
  121. <!-- 用户使用的布局也是这样的，宽度固定，高度随内容增长
  122. 不会在无限空间进行操作,因为无限空间不能布局
  123. -->
  124. <button class="btn small">提交</button>
  125. <button class="btn middle">重置</button>
  126. <button class="btn large">返回上一页</button>
  128. </body>
  129. </html>

2、PC端端按钮随着 屏幕大小变化属性变化

```
/ 上面 style 代码增加一下部分。PC端 设置 600 <width< 1200px /
@media (min-width: 600px) and (max-width: 1200px) {
html {

  1.      background-color: hotpink;
  2.     }
  3.   }

``


上一条：字体图标与媒体查询下一条：引入字体图标和自定义样式与媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多