Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
博客已迁移至自建网站,此博客已废弃.请移步至: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,如果超过则会被截取
<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)
border-collapse: collapse
margin: auto auto;text-align: center;
font-size: 1.2em;margin-bottom: 0.6em;
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
使用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 @规则详解
@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>