- 常用布局单位
- 表格常用样式
- 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>
|