- 常用布局单位
- 表格常用样式
- fontawesome图标使用
- 响应式布局基础
常用布局单位
从某个方面来说,分为绝对单位和相对单位.绝对单位使用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;
}
div {
font-size: 26px;
}
p{
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>
<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>
<tr>
<td colspan="6">中午休息</td>
</tr>
</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>
tablet.ableTest td,
table.ableTest th {
border: 1px solid rgb(10, 10, 10);
}
table.ableTest {
border-collapse: collapse;
}
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;
}
table.ableTest tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
background-color: lightgreen;
}
</style>
|
合肥市同安小学五年级课程表
| 时间 |
周一 |
周二 |
周三 |
周四 |
周五 |
| 上午 |
数学 |
数学 |
数学 |
数学 |
数学 |
| 数学 |
数学 |
数学 |
数学 |
数学 |
| 语文 |
语文 |
语文 |
语文 |
语文 |
| 英语 |
英语 |
英语 |
英语 |
英语 |
| 中午休息 |
| 下午 |
音乐 |
音乐 |
体育 |
体育 |
体育 |
| 美术 |
美术 |
美术 |
美术 |
美术 |
| 科学 |
科学 |
科学 |
科学 |
科学 |
| 备注: |
每天下午15:30-17:30在校写作业 |
字体图标
可在阿里巴巴字体图标库搜索图标,但是最近删掉了在线链接功能,只能用户自己把样式下下来使用
可在智能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文件里导入使用
@import 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css';
.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>
|
图标动画
- fa-arrow-right-匀速旋转,2s一圈
- fa-spinner--一圈分为八次转完,时间1S
图标旋转
- 手:默认状况
- 手:旋转90度
- 手:旋转180度
- 手:旋转270度
- 手:水平(90%)
- 手:垂直(180%)
堆叠图标:合并图形
-
随便找的两个图标合成
-
随便找的两个图标合成
-
随便找的两个图标合成
-
随便找的两个图标合成
-
随便找的两个图标合成
-
随便找的两个图标合成
响应式布局基础
关于css的@规则,可参考css @规则详解
- 媒体: 屏幕(手机,pc), 打印机
- 查询: 获取媒体当前的状态
- 布局前提: 用户在一个"宽度受限,而高度随内容增长的空间内,进行布局
- 用户不可能在一个无限空间内进行布局, 宽度, 或高度,
必须要有一个固定下来
- 使用
@media (min-width: 375px) and (max-width: 413px)查询视口大小
移动优先，默认你是用手机浏览该网页的，当你用pc浏览时，就会以min-width进行递增式媒体查询
<div class="wapTest">
<h3 >移动优先</h3>
<p class="small">Btn1</p>
<p class="middle">Btn2</p>
<p class="large">Btn3</p>
</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 .small {
font-size: 1.2rem;
}
.wapTest .middle {
font-size: 1.6rem;
}
.wapTest .large {
font-size: 2rem;
}
</style>
|
pc优先与之相反，默认你是用pc浏览该网页，当屏幕缩小时以max-width递减式进行媒体查询
<div class="pcTest">
<h3 >pc优先</h3>
<p class="small">Btn1</p>
<p class="middle">Btn2</p>
<p class="large">Btn3</p>
</div>
<style>
.pcTest {
font-size: 35px;
}
@media only screen and (max-width: 700px) {
.pcTest {
font-size: 25px;
}
}
@media only screen and (max-width: 300px) {
.pcTest {
font-size: 15px;
}
}
.pcTest .small {
font-size: 1.2em;
}
.pcTest .middle {
font-size: 1.6em;
}
.pcTest .large {
font-size: 2em;
}
</style>
|