作用:使用字体图标技巧实现网页中简洁的图标效果
展示的是图标,本质上是字体,处理简单的颜色单一的图片。
每个网站的标题栏图标:网站网址+/favicon.ico
素材库: Iconfont:https://www.iconfont.cn/
使用字体图标 - 类名
<link rel="stylesheet" href="./iconfont/iconfont.css">
<body>
<i class="iconfont icon-favorites-fill">i>
body>
如果想要的图标没有,可以问设计师要svg格式的图,上传后再下载即可。
作用:使用transform属性实现元素的位移、旋转、缩放等效果
.father:hover .son {
transform: translate(100px, 50px);
/* 百分比: 盒子自身尺寸的百分比 */
transform: translate(100%, 50%);
/* 只给出一个值表示x轴移动距离 */
transform: translate(100px);
transform: translateY(100px);
}
步骤:
left:50%;top:50%;
,子级左上角在父级中心点。transform: translate(-50%, -50%);
.father {
position: relative;
width: 500px;
height: 300px;
border: 1px solid #000;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 203px;
height: 100px;
background-color: pink;
}
向左侧移动盒子自身宽度大小
向右侧移动盒子自身宽度大小
<head>
<style>
* {
margin: 0;
padding: 0;
}
/*背景盒子设置,采用背景图*/
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');
/* 关键细节1:超出父级的隐藏 */
overflow: hidden;
}
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
/*关键细节2:设置转换时间*/
transition: all .5s;
}
.box::after {
/*关键细节3:要背景的右半部分*/
background-position: right 0;
}
/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
style>
head>
<body>
<div class="box">
div>
body>
必须有过渡属性,旋转才能生效
img {
width: 250px;
/* 旋转效果必须设置过渡 */
transition: all 2s;
}
img:hover {
/* transform: rotate(角度); */
/* 顺 */
transform: rotate(360deg);
/* 逆 */
transform: rotate(-360deg);
}
作用:使用transform-origin属性改变转换原点
默认旋转圆点是盒子中心点,旋转后会改变坐标轴向,修改效果设置在标签上,hover时设置旋转效果
transform-origin: 原点水平位置 原点垂直位置;
/*transform-origin: left、top、right bottom center;*/
transform-origin: left bottom;
边走边转,顺序不能反
transform: translate(600px) rotate(360deg);
使用scale改变元素尺寸
使用时要注意transform设置定位和缩放会存在层叠特性,导致部分设置不生效
/*transform: scale(x轴缩放倍数, y轴缩放倍数);*/
/*transform: scale(缩放倍数)*/
/* scale值大于1表示放大, scale值小于1表示缩小*/
transform: scale(1.2);
设置背景透明度渐变的步骤:
1.用伪元素书写盒子控制位置,设置渐变效果并设置过渡属性和opacity:0;
2.用hover显示,设置opacity:1
/*background-image: linear-gradient(color1,color2,color3);*/
background-image: linear-gradient(pink,green,blue);
/*常用为透明度变化*/
background-image: linear-gradient(transparent,rgba(0,0,0, .6));
设置图片大小渐变的步骤:
1.给图片设置过渡属性transition:all 0.5s
,给hover设置放大属性transform:scale(1.2)
2.给父元素设置overflow:hidden
,使图片超出的部分隐藏
设置文字移动渐变步骤:
hover设置txt的位置移动transform:translate()
作用:使用transform属性实现元素在空间内的位移、旋转、缩放等效果
Z轴的变化需要设置透视效果才能看到
加在hover上
.box:hover {
/* transform: translate3d(50px, 100px, 200px); */
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
作用:产生近大远小,近清晰,远模糊的效果
标签加在父级上,取值为800-1200之间的数值
数值给的小代表距离屏幕近,给的大代表距离屏幕非常远
body {
perspective: 1000px;
/* perspective: 200px; */
/* perspective: 10000px; */
}
都加在hover上
绕中心旋转,可以用以下命令:
transform:rotateZ(值)
或者transform: rotate(360deg);
绕x轴旋转:
transform: rotateX(60deg);
transform: rotateY(60deg);
左手法则:判断旋转方向,左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
构建立体图形,给盒子设置该属性
transform-style: preserve-3d;
空间缩放
transform: scale3d(0.5,1.1,2);
/*animation: 动画名称 动画时间*/
animation: change 1s;
/*变化两步*/
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
/*多个动画过程*/
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线:steps(3)分三阶段执行
重复次数:infinite(无限循环)/3
动画方向:alternate为反向
执行完毕时的状态:forwards最后一帧状态/backwards第一帧状态
animation-name: 动画名称;
animation-duration: 动画时间;
animation-delay: 延迟时间;
animation-fill-mode: 动画执行完毕时状态;
animation-timing-function: 速度曲线;
animation-iteration-count: 重复次数;
animation-direction: 动画执行方向;
animation-play-state: 暂停动画;
使用steps实现逐帧动画,制作步骤
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
}
@keyframes move {
from {
background-position: 0 0;
}
to {
/* 1680: 精灵图的宽度 */
background-position: -1680px 0;
}
}
.box {
animation: move 1s steps(12) infinite;
}
forwards:停留在最终状态
.box {
animation: run 1s forwards;
}
@keyframes run {
/* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
/* from {
transform: translateX(0);
} */
to {
transform: translateX(800px);
}
}
@keyframes move
,给ul设置动画animation:move 5s infinite linear
pc端和移动端网页区别:pc端有版心,版心居中
移动端:网页充满屏幕
分辨率:
物理分辨率出厂就被固定,不可被改变。
逻辑分辨率:软件决定的,可以改变,写代码参考的分辨率
视口:使用meta标签设置视口宽度,制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0">
二倍图:一般给的都是二倍图,将设计图改为2x,再测量进行开发
百分比布局也叫流式布局,实现效果为宽度自适应,高度固定
.toolbar {
/* 百分比布局 流式布局 */
width: 100%;
height: 50px;
}
.toolbar li img {
height: 100%;
}
.toolbar li {
float: left;
width: 20%;
height: 50px;
}
子级浮动脱标,父级必须设置宽度,采用flex可以不设置浮动,也不会脱标
给父级设置display: flex;
.box {
display: flex;
/* height: 200px; */
border: 1px solid #000;
}
Flex布局是一种浏览器提倡的布局模型,可以避免浮动脱标的问题,布局网页更简单灵活,非常适合结构化布局。
但是Flex布局仅适用于高 版本浏览器,可以查询caniuse.com
搜索兼容性
/* 居中 */
justify-content: center;
/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
使用align-items
调节元素在侧轴的对齐方式,添加到弹性容器上。
当盒子没给高,按内容大小撑开高度,
给了宽高,则对应给定的宽高
/* 居中 */
align-items: center;
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度,高度为父级的100%) */
align-items: stretch;
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2) {
align-self: center;
}
单独设置在某一个子盒子上,去掉剩下和盒子宽度剩下的宽度独占份数
flex:1;
主轴默认是水平方向, 侧轴默认是垂直方向
/*修改主轴方向*/
flex-direction:column;
/*视觉效果:实现盒子水平居中*/
align-items:center;
当一行显示不完时,flex可以自动将子级压缩成一行
实现换行:flex-wrap:wrap
/* 和主轴对齐方式一样 */
align-content: center;
align-content: space-around;
align-content: space-between;
1. 手机屏幕大小不同,分辨率不同, 如何设置不同的HTML标签字号?
可以检测视口的宽度,编写差异化的css样式,当某个条件成立, 执行对应的CSS样式。
<style>
/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
@media (width:375px) {
html {
font-size: 40px;
}
}
@media (width:320px) {
html {
font-size: 30px;
}
}
style>
2. 设备宽度不同,HTML标签字号设置多少合适?
目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10
3. 如何确定rem数值?
使用flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
优点:rem需要多个视口,移动端尺寸较多,每一个都需要设置太麻烦
写在body最下边。
<body>
<script src="../js/flexible.js">script>
body>
使用less运算完成px到rem单位的转换
less是一个CSS预处理器,后缀为.less,网页引入对应的css文件。
单行注释://
块注释:/**/
.less
.box {
width: 100 + 10px;
width: 100 - 20px;
width: 100 * 2px;
// 除法,两种表示方法
// 68 > rem
width: (68 / 37.5rem);//推荐用法
height: 29 ./ 37.5rem;
}
对应的.css:
.box {
width: 110px;
width: 80px;
width: 200px;
width: 1.81333333rem;
height: 0.77333333rem;
}
.less
.father {
width: 100px;
.son {
color: pink;
// & 表示当前选择器
&:hover {
color: green;
}
}
&:hover {
color: orange;
}
}
对应的.css:
.father {
width: 100px;
}
.father .son {
color: pink;
}
.father .son:hover {
color: green;
}
.father:hover {
color: orange;
}
能够使用Less变量设置属性值。
.less
//1.定义变量
@colora:pink;
.box {
color:@colora;
}
.aa {
background-color:@colora;
}
对应的.css:
.box {
color: pink;
}
.aa {
color: pink;
}
.less内容:
@import 'less路径';
less导出CSS文件
**方法1:**配置EasyLess插件, 实现所有Less有相同的导出路径
在less.compile当中添加导出路径:
"out": "../css/";
**方法2:**控制当前Less文件导出路径
/*导出到qqq文件夹,改名字为daqiu.css*/
// out: ./qqq/daqiu.css
/*导出到abc文件夹,不改名字*/
// out: ./abc/
不想导出:
// out: false
目标:能够根据设备宽度的变化,设置差异化样式
/* 视口宽度小于等于768px, 网页背景色是粉色 */
@media (max-width: 768px) {
body {
background-color: pink;
}
}
/* 视口宽度大于等于1200px, 网页背景色是skyblue */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
能够根据设备宽度的变化,设置差异化样式
/*
视口宽度 >= 768px,网页背景色是 粉色
视口宽度 >= 992px,网页背景色是 绿色
视口宽度 >= 1200px,网页背景色是 skyblue
*/
@media (min-width: 768px) {
body {
background-color: pink;
}
}
@media (min-width: 992px) {
body {
background-color: green;
}
}
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
外链式css属性:media里一定要加小括号
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
当视口宽度发生变化时,显示的内容发生改变,部分内容隐藏
<head>
<style>
/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
@media (max-width: 768px) {
.left {
display: none;
}
}
style>
head>
<body>
<div class="box">
<div class="left">bbbbbbdiv>
<div class="main">aaaaadiv>
div>
body>
UI框架:将常见效果进行统一封装后形成的一套代码, 例如:BootStrap,使用 BootStrap框架快速开发响应式网页。
BootStrap3默认将网页分成12等份
栅格系统布局:
在BootStrap.com
里找到合适的样式,支持定制,下载导入,再将对应的盒子添加对应效果的类即可。
opacity: 0;
或者display:none;
background-size:cover
:设置背景的时候,图片等比例缩放,图片可以完全覆盖整个盒子,可能会导致图片显示不全;background-size:contain
:设置背景,图片等比例缩放,当宽度或者高度和盒子尺寸相等,图片就不再缩放。i
标签加类名显示,字体图标旁边的字用span
,整体用p
标签包裹,<p>
<span>文字span>
<i class="iconfont 类名">i>
p>
垂直居中:line-height: 行高; 水平居中:text-align:center
flex-wrap: wrap;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
再给文字父级设置:
flex:1;
width:0;
给弹性盒子宽度设置为0.则多出的文字就不会撑开盒子。