表格字体样式和响应式布局 - 小前端

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

博主信息

博文 11

粉丝 0

访问量 7808

专题推荐

更多>

常用布局单位

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

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

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

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

    <div>
      <p>Hello</p>
    </div>
    <div class="box"></div>
    <style>
      :root {
        font-size: 10px;
      }
      body {
        background-color: lightcyan;
        width: 100vw;
        height: 100vh;
        font-size: 1.6em;
      }
      body .box {
        width: 50vw;
        height: 50vh;
        background-color: lightgreen;
      }
      /* 将p的父级 div 设置字号 */
      div {
        font-size: 26px;
      }
      p{
        /* 默认字号 16px , 用 1em 表示: 1em = 16px */
        /* 以后, 我们可以直接使用em来表示一个绝对值表示的字号 */
        font-size: 1em;
      }
    </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;

<table class="tableTest">
    <caption>
    合肥市同安小学五年级课程表
    </caption>
    <thead>
    <tr>
        <th>时间</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
    </tr>
    </thead>
    <!-- 第一个tbody  -->
    <tbody>
    <tr>
        <td rowspan="4" class="period">上午</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
        <td>英语</td>
    </tr>
    </tbody>
    <!-- 第二个tbody  -->
    <tbody>
    <tr>
        <td colspan="6">中午休息</td>
    </tr>
    </tbody>
    <!-- 下午 -->
    <!-- 第3个tbody  -->
    <tbody>
    <tr>
        <td rowspan="3" class="period">下午</td>
        <td>音乐</td>
        <td>音乐</td>
        <td>体育</td>
        <td>体育</td>
        <td>体育</td>
    </tr>
    <tr>
        <td>美术</td>
        <td>美术</td>
        <td>美术</td>
        <td>美术</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>科学</td>
        <td>科学</td>
        <td>科学</td>
        <td>科学</td>
        <td>科学</td>
    </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot>
    <tr>
        <td>备注:</td>
        <td colspan="5">每天下午15:30-17:30在校写作业</td>
    </tr>
    </tfoot>
</table>
<style>
    /* 1. 添加表格线: 一定要添加到单元格中 td , th */
    tablet.ableTest td,
    table.ableTest th {
    border: 1px solid rgb(10, 10, 10);
    }
    /* 2. 折叠表格线: table */
    table.ableTest {
    border-collapse: collapse;
    }
    /* 3. 对表格进行一些布局设置 */
    table.ableTest {
    width: 90%;
    /* 块级元素在父级中的居中 */
    margin: auto;
    /* 文本水平居中 */
    text-align: center;
    }
    /* 标题 */
    table.ableTest caption {
    font-size: 1.2em;
    margin-bottom: 0.6em;
    }
    table.ableTest thead {
    background-color: lightcyan;
    }
    /* 第二个tbody应该去掉,作用:not 取反的伪类 */
    table.ableTest tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
    background-color: lightgreen;
    }
</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文件里导入使用

    /*导入awesome样式*/
    @import 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css';
    /* 2. 自定义图标样式 */
    .myicon {
    /* 因为是字体图标,本质还是字体,所以可以设置字号来控制大小 */
    font-size: 50px;
    color: red;
    box-shadow: 2px 2px 2px #888;
    border: 1px solid #888;
    background-color: green;
    }

样式类	效果解说
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	用来反转图标颜色,生成可见图标组

    <div class="icon-test-list">
      <h3>图标基础样式</h3>
      <ul>
        <li><i class="fa fa-weixin"></i>微信</li>
        <li><i class="fa fa-whatsapp"></i>whatsapp</li>
        <li><i class="fa fa-youtube"></i>youtube</li>
        <li><i class="fa fa-weibo"></i>新浪微博</li>
      </ul>
    </div>
    <div class="icon-test-list">
      <h3>图标规格样式</h3>
      <span></span>
      <ul>
        <li><i class="fa fa-weixin "></i>微信</li>
        <li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
        <li><i class="fa fa-weixin fa-2x"></i>微信</li>
        <li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
        <li><i class="fa fa-weixin fa-4x"></i>信4x</li>
        <li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
      </ul>
    </div>
    <div class="icon-test-list">
      <h3>图标固定大小</h3>
      <ul>
        <li><i class="fa fa-fw fa-weixin"></i>微信</li>
        <li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>
        <li><i class="fa fa-fw fa-youtube"></i>youtube</li>
        <li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>
      </ul>
    </div>
    <div class="icon-test-list extraHeight">
      <h3>图标边框及图标移动</h3>
      <ul>
        <li><i class="fa fa-tag  pull-right"></i>这是一句测试的文字,图标定位在右边</li>
        <li><i class="fa fa-tag fa-2x pull-left "></i>
          <p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>
        </li>
        <li><i class="fa fa-search fa-3x pull-right fa-border"></i>
          <p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>
        </li>
      </ul>
    </div>
    <div class="icon-test-list">
      <h3>图标动画</h3>
      <ul>
        <li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>
        <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>
      </ul>
    </div>
    <div class="icon-test-list">
      <h3>图标旋转</h3>
      <ul>
        <li><i class="fa fa-hand-o-up  "></i>手:默认状况</li>
        <li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>
        <li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>
        <li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>
        <li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>
        <li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>
      </ul>
    </div>
    <div class="icon-test-lise">
      <h3>堆叠图标:合并图形</h3>
      <ul>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x  fa-bookmark-o"></i>
            <i class="fa fa-stack-1x  fa-child"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x  fa-lemon-o"></i>
            <i class="fa fa-stack-1x  fa-chain "></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack">
            <i class="fa fa-stack-2x fa-wheelchair"></i>
            <i class="fa fa-stack-1x fa-transgender-alt"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-2x">
            <i class="fa fa-stack-1x  fa-comment"></i>
            <i class="fa fa-stack-2x  fa-linux"></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-3x">
            <i class="fa fa-stack-1x   fa-chain"></i>
            <i class="fa fa-stack-2x  fa-circle-o "></i>
          </span>随便找的两个图标合成
        </li>
        <li>
          <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
            </span>随便找的两个图标合成
        </li>
      </ul>
    </div>
    <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进行递增式媒体查询

<div class="wapTest">
    <h3 >移动优先</h3>
    <button class="btn small">Btn1</button>
    <button class="btn middle">Btn2</button>
    <button class="btn large">Btn3</button>
</div>
<style>
    .wapTest {
        font-size: 20px;
    }
    @media only screen and (min-width: 300px) {
        .wapTest {
            font-size: 40px;
        }
    }
    @media only screen and (min-width: 700px) {
        .wapTest {
            font-size: 60px;
        }
    }
    .wapTest .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
    }
    .wapTest .small {
        /* 小按钮: 12px  */
        /* font-size: 12px; */
        /* px: 绝对值,不能用在媒体查询中 */
        font-size: 1.2rem;
    }
    .wapTest .middle {
        /* 中等按钮: 16px; */
        /* font-size: 16px; */
        font-size: 1.6rem;
    }
    .wapTest .large {
        /* 大按钮: 20px */
        /* font-size: 20px; */
        font-size: 2rem;
    }
</style>

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


<div class="pcTest">
    <h3 >pc优先</h3>
    <button class="btn small">Btn1</button>
    <button class="btn middle">Btn2</button>
    <button class="btn large">Btn3</button>
</div>
<style>
    .pcTest {
        font-size: 60px;
    }
    @media only screen and (max-width: 700px) {
        .pcTest {
            font-size: 40px;
        }
    }
    @media only screen and (max-width: 300px) {
        .pcTest {
            font-size: 20px;
        }
    }
    .pcTest .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
    }
    .pcTest .small {
        /* 小按钮: 12px  */
        /* font-size: 12px; */
        /* px: 绝对值,不能用在媒体查询中 */
        font-size: 1.2rem;
    }
    .pcTest .middle {
        /* 中等按钮: 16px; */
        /* font-size: 16px; */
        font-size: 1.6rem;
    }
    .pcTest .large {
        /* 大按钮: 20px */
        /* font-size: 20px; */
        font-size: 2rem;
    }
</style>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开始学习大前端的若干问题

2022-07-01 00:40:18