search

博客列表 >表格字体样式和响应式布局

表格字体样式和响应式布局

斗人传说
斗人传说原创
2022年07月11日 23:13:50706浏览

博客已迁移至自建网站,此博客已废弃.请移步至:https://blog.ours1984.top/posts/bgztys/ 欢迎大家访问

常用布局单位

从某个方面来说,分为绝对单位和相对单位.绝对单位使用px,意思是像素,比如font-size: 16px;

相对单位必须要一个参照物,相关知识如下表所示.数值写在单位前

相对单位 参照物 意义 取值范围
% 父级 同名属性相对于父级百分比 无
em 父级元素font-size 相对字号大小 无
rem 根元素html字号(也可使用:root选择器) 相对字号大小 无
vw 当前视口宽度 用于width属性 0~100
vh 当前视口高度 用于height属性 0~100 \

一般设置根元素font-size为10px,其他元素则使用rem
浏览器的自定义字体设置里,有字体的最大最小px,如果超过则会被截取

  1.     <div>
  2.       <p>Hello</p>
  3.     </div>
  4.     <div class="box"></div>
  5.     <style>
  6.       :root {
  7.         font-size: 10px;
  8.       }
  9.       body {
  10.         background-color: lightcyan;
  11.         width: 100vw;
  12.         height: 100vh;
  13.         font-size: 1.6em;
  14.       }
  16.       body .box {
  17.         width: 50vw;
  18.         height: 50vh;
  19.         background-color: lightgreen;
  20.       }
  21.       /* 将p的父级 div 设置字号 */
  22.       div {
  23.         font-size: 26px;
  24.       }
  26.       p{
  27.         /* 默认字号 16px , 用 1em 表示: 1em = 16px */
  28.         /* 以后, 我们可以直接使用em来表示一个绝对值表示的字号 */
  29.         font-size: 1em;
  30.       }
  31.     </style>

表格常用样式

  • 单元格中 td , th表格线 border 1px solid rgb(10, 10, 10)
  • table折叠表格线 border-collapse: collapse
  • table布局设置 margin: auto auto;text-align: center;
  • 标题caption样式 font-size: 1.2em;margin-bottom: 0.6em;
  • 表头thead背景颜色 background-color: lightcyan;
  1. <table class="tableTest">
  2.     <caption>
  3.     合肥市同安小学五年级课程表
  4.     </caption>
  5.     <thead>
  6.     <tr>
  7.         <th>时间</th>
  8.         <th>周一</th>
  9.         <th>周二</th>
  10.         <th>周三</th>
  11.         <th>周四</th>
  12.         <th>周五</th>
  13.     </tr>
  14.     </thead>
  15.     <!-- 第一个tbody  -->
  16.     <tbody>
  17.     <tr>
  18.         <td rowspan="4" class="period">上午</td>
  19.         <td>数学</td>
  20.         <td>数学</td>
  21.         <td>数学</td>
  22.         <td>数学</td>
  23.         <td>数学</td>
  24.     </tr>
  25.     <tr>
  26.         <td>数学</td>
  27.         <td>数学</td>
  28.         <td>数学</td>
  29.         <td>数学</td>
  30.         <td>数学</td>
  31.     </tr>
  32.     <tr>
  33.         <td>语文</td>
  34.         <td>语文</td>
  35.         <td>语文</td>
  36.         <td>语文</td>
  37.         <td>语文</td>
  38.     </tr>
  39.     <tr>
  40.         <td>英语</td>
  41.         <td>英语</td>
  42.         <td>英语</td>
  43.         <td>英语</td>
  44.         <td>英语</td>
  45.     </tr>
  46.     </tbody>
  47.     <!-- 第二个tbody  -->
  48.     <tbody>
  49.     <tr>
  50.         <td colspan="6">中午休息</td>
  51.     </tr>
  52.     </tbody>
  53.     <!-- 下午 -->
  54.     <!-- 第3个tbody  -->
  55.     <tbody>
  56.     <tr>
  57.         <td rowspan="3" class="period">下午</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.     </tr>
  71.     <tr>
  72.         <td>科学</td>
  73.         <td>科学</td>
  74.         <td>科学</td>
  75.         <td>科学</td>
  76.         <td>科学</td>
  77.     </tr>
  78.     </tbody>
  79.     <!-- 表尾 -->
  80.     <tfoot>
  81.     <tr>
  82.         <td>备注:</td>
  83.         <td colspan="5">每天下午15:30-17:30在校写作业</td>
  84.     </tr>
  85.     </tfoot>
  86. </table>
  88. <style>
  89.     /* 1. 添加表格线: 一定要添加到单元格中 td , th */
  90.     tablet.ableTest td,
  91.     table.ableTest th {
  92.     border: 1px solid rgb(10, 10, 10);
  93.     }
  95.     /* 2. 折叠表格线: table */
  96.     table.ableTest {
  97.     border-collapse: collapse;
  98.     }
  100.     /* 3. 对表格进行一些布局设置 */
  101.     table.ableTest {
  102.     width: 90%;
  103.     /* 块级元素在父级中的居中 */
  104.     margin: auto;
  105.     /* 文本水平居中 */
  106.     text-align: center;
  107.     }
  109.     /* 标题 */
  110.     table.ableTest caption {
  111.     font-size: 1.2em;
  112.     margin-bottom: 0.6em;
  113.     }
  115.     table.ableTest thead {
  116.     background-color: lightcyan;
  117.     }
  119.     /* 第二个tbody应该去掉,作用:not 取反的伪类 */
  120.     table.ableTest tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  121.     background-color: lightgreen;
  122.     }
  123. </style>

字体图标

可在阿里巴巴字体图标库搜索图标,但是最近删掉了在线链接功能,只能用户自己把样式下下来使用

可在智能LOGO设计生成器生成自己的图标,需要下载

可在国际通用开源图标库查找图标,不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可。可使用以下cdn.github地址https://github.com/FortAwesome/Font-Awesome

fontawesome图标使用规则

使用cdn来加载样式.免费cdn网站https://www.bootcdn.cn/,包含vue/react/font-awesome/angular.js等等

cdn分两种,一种是css,一种是js. js方式需要在Awesome注册账号,生成自己的js在线链接,去这里查看自己的kit

css方式,在自己的css文件里导入使用

  1.     /*导入awesome样式*/
  2.     @import 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css';
  4.     /* 2. 自定义图标样式 */
  5.     .myicon {
  6.     /* 因为是字体图标,本质还是字体,所以可以设置字号来控制大小 */
  7.     font-size: 50px;
  8.     color: red;
  9.     box-shadow: 2px 2px 2px #888;
  10.     border: 1px solid #888;
  11.     background-color: green;
  12.     }
样式类 效果解说
fa-lg fa-lg比常规图标大33%
fa-nx n取值2~5,表示常规图标大小的倍数
fa-fw 用来固定大小
fa-border 可以给图标加一个边框
pull-right 可以控制图标位置,是文字环绕
pull-left 可以控制图标位置,是文字环绕
fa-spin 动画,spin的速度是linear(匀速),一圈2s
fa-pulse 动画,配合fa-spin,分为八步,一圈时间1S
fa-rotate-* 控制旋转的度数
fa-flip-horizontal 水平反转
fa-flip-vertical 竖直反转
fa-stack 堆叠,作为父,组合子元素生成的对象;可以使用规格参数
fa-stack-2x 作为背景的栈,要大于显示图形的栈
fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
fa-inverse 用来反转图标颜色,生成可见图标组 
  1.     <div class="icon-test-list">
  2.       <h3>图标基础样式</h3>
  3.       <ul>
  4.         <li><i class="fa fa-weixin"></i>微信</li>
  5.         <li><i class="fa fa-whatsapp"></i>whatsapp</li>
  6.         <li><i class="fa fa-youtube"></i>youtube</li>
  7.         <li><i class="fa fa-weibo"></i>新浪微博</li>
  8.       </ul>
  9.     </div>
  10.     <div class="icon-test-list">
  11.       <h3>图标规格样式</h3>
  12.       <span></span>
  13.       <ul>
  14.         <li><i class="fa fa-weixin "></i>微信</li>
  15.         <li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
  16.         <li><i class="fa fa-weixin fa-2x"></i>微信</li>
  17.         <li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
  18.         <li><i class="fa fa-weixin fa-4x"></i>信4x</li>
  19.         <li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
  20.       </ul>
  21.     </div>
  22.     <div class="icon-test-list">
  23.       <h3>图标固定大小</h3>
  24.       <ul>
  25.         <li><i class="fa fa-fw fa-weixin"></i>微信</li>
  26.         <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>
  27.         <li><i class="fa fa-fw fa-youtube"></i>youtube</li>
  28.         <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>
  29.       </ul>
  30.     </div>
  31.     <div class="icon-test-list extraHeight">
  32.       <h3>图标边框及图标移动</h3>
  33.       <ul>
  34.         <li><i class="fa fa-tag  pull-right"></i>这是一句测试的文字,图标定位在右边</li>
  35.         <li><i class="fa fa-tag fa-2x pull-left "></i>
  36.           <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>
  37.         </li>
  38.         <li><i class="fa fa-search fa-3x pull-right fa-border"></i>
  39.           <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>
  40.         </li>
  41.       </ul>
  42.     </div>
  43.     <div class="icon-test-list">
  44.       <h3>图标动画</h3>
  45.       <ul>
  46.         <li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>
  47.         <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>
  48.       </ul>
  49.     </div>
  50.     <div class="icon-test-list">
  51.       <h3>图标旋转</h3>
  52.       <ul>
  53.         <li><i class="fa fa-hand-o-up  "></i>手:默认状况</li>
  54.         <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>
  55.         <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>
  56.         <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>
  57.         <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>
  58.         <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>
  59.       </ul>
  60.     </div>
  61.     <div class="icon-test-lise">
  62.       <h3>堆叠图标:合并图形</h3>
  63.       <ul>
  64.         <li>
  65.           <span class="fa-stack">
  66.             <i class="fa fa-stack-2x  fa-bookmark-o"></i>
  67.             <i class="fa fa-stack-1x  fa-child"></i>
  68.           </span>随便找的两个图标合成
  69.         </li>
  70.         <li>
  71.           <span class="fa-stack">
  72.             <i class="fa fa-stack-2x  fa-lemon-o"></i>
  73.             <i class="fa fa-stack-1x  fa-chain "></i>
  74.           </span>随便找的两个图标合成
  75.         </li>
  76.         <li>
  77.           <span class="fa-stack">
  78.             <i class="fa fa-stack-2x fa-wheelchair"></i>
  79.             <i class="fa fa-stack-1x fa-transgender-alt"></i>
  80.           </span>随便找的两个图标合成
  81.         </li>
  82.         <li>
  83.           <span class="fa-stack fa-2x">
  84.             <i class="fa fa-stack-1x  fa-comment"></i>
  85.             <i class="fa fa-stack-2x  fa-linux"></i>
  86.           </span>随便找的两个图标合成
  87.         </li>
  88.         <li>
  89.           <span class="fa-stack fa-3x">
  90.             <i class="fa fa-stack-1x   fa-chain"></i>
  91.             <i class="fa fa-stack-2x  fa-circle-o "></i>
  92.           </span>随便找的两个图标合成
  93.         </li>
  94.         <li>
  95.           <span class="fa-stack fa-lg">
  96.               <i class="fa fa-circle fa-stack-2x"></i>
  97.               <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  98.             </span>随便找的两个图标合成
  99.         </li>
  100.       </ul>
  101.     </div>
  102.     <script src="https://kit.fontawesome.com/14d2acc881.js" crossorigin="anonymous"></script>

响应式布局基础

关于css的@规则,可参考css @规则详解

  • 媒体: 屏幕(手机,pc), 打印机
  • 查询: 获取媒体当前的状态
  • 布局前提: 用户在一个”宽度受限,而高度随内容增长的空间内,进行布局
  • 用户不可能在一个无限空间内进行布局, 宽度, 或高度, 必须要有一个固定下来
  • 使用 @media (min-width: 375px) and (max-width: 413px)查询视口大小

移动优先，默认你是用手机浏览该网页的，当你用pc浏览时，就会以min-width进行递增式媒体查询

  1. <div class="wapTest">
  2.     <h3 >移动优先</h3>
  3.     <button class="btn small">Btn1</button>
  4.     <button class="btn middle">Btn2</button>
  5.     <button class="btn large">Btn3</button>
  6. </div>
  7. <style>
  8.     .wapTest {
  9.         font-size: 20px;
  10.     }
  11.     @media only screen and (min-width: 300px) {
  12.         .wapTest {
  13.             font-size: 40px;
  14.         }
  15.     }
  16.     @media only screen and (min-width: 700px) {
  17.         .wapTest {
  18.             font-size: 60px;
  19.         }
  20.     }
  21.     .wapTest .btn:hover {
  22.         cursor: pointer;
  23.         opacity: 0.8;
  24.         transition: 0.3s;
  25.     }
  27.     .wapTest .small {
  28.         /* 小按钮: 12px  */
  29.         /* font-size: 12px; */
  30.         /* px: 绝对值,不能用在媒体查询中 */
  31.         font-size: 1.2rem;
  32.     }
  34.     .wapTest .middle {
  35.         /* 中等按钮: 16px; */
  36.         /* font-size: 16px; */
  37.         font-size: 1.6rem;
  38.     }
  39.     .wapTest .large {
  40.         /* 大按钮: 20px */
  41.         /* font-size: 20px; */
  42.         font-size: 2rem;
  43.     }
  44. </style>

pc优先与之相反，默认你是用pc浏览该网页，当屏幕缩小时以max-width递减式进行媒体查询

  2. <div class="pcTest">
  3.     <h3 >pc优先</h3>
  4.     <button class="btn small">Btn1</button>
  5.     <button class="btn middle">Btn2</button>
  6.     <button class="btn large">Btn3</button>
  7. </div>
  9. <style>
  10.     .pcTest {
  11.         font-size: 60px;
  12.     }
  13.     @media only screen and (max-width: 700px) {
  14.         .pcTest {
  15.             font-size: 40px;
  16.         }
  17.     }
  18.     @media only screen and (max-width: 300px) {
  19.         .pcTest {
  20.             font-size: 20px;
  21.         }
  22.     }
  24.     .pcTest .btn:hover {
  25.         cursor: pointer;
  26.         opacity: 0.8;
  27.         transition: 0.3s;
  28.     }
  30.     .pcTest .small {
  31.         /* 小按钮: 12px  */
  32.         /* font-size: 12px; */
  33.         /* px: 绝对值,不能用在媒体查询中 */
  34.         font-size: 1.2rem;
  35.     }
  37.     .pcTest .middle {
  38.         /* 中等按钮: 16px; */
  39.         /* font-size: 16px; */
  40.         font-size: 1.6rem;
  41.     }
  42.     .pcTest .large {
  43.         /* 大按钮: 20px */
  44.         /* font-size: 20px; */
  45.         font-size: 2rem;
  46.     }
  47. </style>
上一条：绝对定位和固定定位的区别下一条：绝对定位与固定定位写法和区别
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多