Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格字体样式和响应式布局
Blogger Information
Blog 11
fans 0
comment 0
visits 5522
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格字体样式和响应式布局
斗人传说
Original
709 people have browsed it

博客已迁移至自建网站,此博客已废弃.请移步至: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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post