用html5做课程教学网站,东莞网约车驾驶员资格证网上报名,企业管理系统软件开发,阿里云有域名之后怎么建设网站CSS 文章目录 CSS1.概念2.CSS 引入方式3.选择器基础选择器:标签选择器类选择器id 选择器通配符选择器 复合选择器:**后代选择器****子代选择器****并集选择器****交集选择器-了解****伪类选择器** 结构伪类选择器#xff1a;**:nth-child#xff08;公式#xff09;**伪元素…CSS 文章目录 CSS1.概念2.CSS 引入方式3.选择器基础选择器:标签选择器类选择器id 选择器通配符选择器 复合选择器:**后代选择器****子代选择器****并集选择器****交集选择器-了解****伪类选择器** 结构伪类选择器**:nth-child公式**伪元素选择器伪类选择器 **选择器的优先级** 4.盒子模型**盒子模型-边框线****盒子模型-padding**盒子模型-外边距外边距问题-合并现象!外边距问题-塌陷问题行内元素-内外边距问题 盒子模型-尺寸计算盒子模型-元素溢出盒子模型-圆角盒子模型-阴影拓展 5.字体修饰属性6.调试工具7.CSS特性继承性层叠性优先级 8.背景属性渐变线性渐变径向渐变 9.显示模式转换显示模式 10.清除默认样式10.清除默认样式11.CSS 书写顺序12.标准流13.浮动清除浮动**方法一额外标签法****方法二单伪元素法****方法三双伪元素法推荐****方法四overflow****浮动-总结** 14.flex布局Flex-组成**Flex 布局****主轴对齐方式****侧轴对齐方式****修改主轴方向**弹性伸缩比-可进行50天50个项目的第一个弹性盒子换行行对齐方式 15.网页设计技巧清除默认样式并将其设置为一个css文件设置版心区域logo的设置导航制作技巧搜索区域imgspan 16.定位相对定位绝对定位定位居中固定定位堆叠层级 z-index定位-总结 17.CSS 精灵18.字体图标字体图标-下载字体字体图标-使用字体字体图标-上传矢量图 19.垂直对齐方式 vertical-align20.过渡 transition21.透明度 opacity22.光标类型 cursor23.SEO 三大标签24.Favicon 图标25.input注意点26.平面转换 transform1.平面转换-平移平移实现居中效果 2.平面转换-旋转平面转换-改变转换原点平面转换-多重转换 3.平面转换-缩放4.平面转换-倾斜 27.空间转换1.空间转换-平移视距 perspective 2.空间-旋转3.立体呈现 transform-style4.空间转换-缩放 28.动画-animation动画-多组动画 29.移动适配1.rem视口二倍图适配方案remrem-flexible.js 2.vw(推荐使用)总结 30.媒体查询rem-flexible.js 31.lessless-简介less-注释less-运算less-嵌套less-变量less-导入less-导出less-禁止导出 32.图片的细节33.响应式网页1.媒体查询媒体特性媒体查询-书写顺序媒体查询-完整写法-了解媒体查询-外部CSS 2.BootstrapBootstrap-简介Bootstrap-下载Bootstrap-使用Bootstrap-栅格系统Bootstrap-全局样式Button类表格类 Bootstrap-组件ComponentsBootstrap-字体图标 34.页面光滑滚动 1.概念
层叠样式表Cascading Style Sheets缩写为CSS是一种样式表语言用来描述HTML文档的呈现美化内容。
2.CSS 引入方式 内部样式表学习使用 CSS 代码写在 style 标签里面 外部样式表开发使用 CSS 代码写在单独的 CSS 文件中.css 在HTML 使用link 标签引入 link relstylesheethref./my.css行内样式配合 JavaScript 使用 CSS 写在标签的 style 属性值里 div stylecolor:red;font-size:20px;这是 div 标签/div3.选择器
作用查找标签设置样式。
基础选择器: 标签选择器 标签名{} 类选择器 .类名{} id 选择器 #id名{} 通配符选择器 *{}
复合选择器:
定义由两个或多个基础选择器通过不同的方式组合而成。 作用更准确、更高效的选择目标元素标签。 后代选择器 后代选择器选中某元素的后代元素。 选择器写法父选择器 子选择器CSS 属性}父子选择器之间用空格隔开。 div span{color:red;
}
选中div的后代span子代选择器 子代选择器选中某元素的子代元素最近的子级。 选择器写法父选择器 子选择器{CSS 属性}父子选择器之间用 隔开。 divspan{color:red;
}
选中div的儿子span并集选择器 并集选择器选中多组标签设置相同的样式。 选择器写法选择器1选择器2…选择器N{CSS 属性选择器之间用隔开。 div,
p,
span{color:red;
}交集选择器-了解 交集选择器选中同时满足多个条件的元素。 选择器写法选择器1选择器2{CSS 属性}选择器之间连写没有任何符号。 p.box{color:red;
}伪类选择器 伪类选择器伪类表示元素状态选中元素的某个状态设置样式。 鼠标悬停状态选择器:hoverCSS属性。 a:hover{color:red;
}拓展 伪类-超链接拓展 超链接一共有四个状态 选择器作用:link访问前:visited访问后:hover鼠标悬停:active点击时激活提示如果要给超链接设置以上四个状态需要按LVHA的顺序书写。工作通常不会一个 a 标签选择器设置超链接的样式hover状态特殊设置
结构伪类选择器
选择器说明E:first-child查找第一个E元素E:last-child查找最后一个 E 元素E:nth-childN查找第 N 个E元素第一个元素 N 值为1
:nth-child公式
作用根据元素的结构关系查找多个元素。n从0开始
功能公式偶数标签2n奇数标签2n12n-1找到5的倍数的标签5n找到第5个以后的标签包括5n5找到第5个以前的标签包括5-n5
伪元素选择器
作用创建虚拟元素伪元素用来摆放装饰性的内容。
选择器说明E::before在E 元素里面最前面添加一个伪元素E::after在E 元素里面最后面添加一个伪元素
注意点 必须设置content:属性用来设置伪元素的容如果没有内容则引号留空即可 伪元素默认是行内显示模式 权重和标签选择器相同
伪类选择器
input{width:200px;transition:all 0.2s linear;
}
//选中input时宽度变宽
input:focus{width:300px;
}//对于 checkbox的input checked可用于全选反选案例中
input:checked{width:50px;
}选择器的优先级
简单点范围越小优先级越高。在不考虑层叠样式的情况下。
4.盒子模型
面试点分为标准盒模型和怪异盒模型又称为IE盒模型
作用布局网页摆放盒子和内容。
属性名作用width宽度height高度background-color背景色 盒子模型-边框线
属性名borderbd 属性值边框线粗细线条样式颜色不区分顺序 常用线条样式
属性值线条样式solid实线dashed虚线dotted点线
盒子模型-padding
取值个数示例含义一个值padding:10px;四个方向内边距均为10px四个值padding:10px 20px 40px 80px;上10px右20px下40px左80px三个值padding:10px 40px 80px;上10px左右40px下80px两个值padding:10px 80px;上下10px左右80px
盒子模型-外边距
作用拉开两个盒子之间的距离 属性名margin 提示与padding属性值写法、含义相同
版心居中/水平居中margin:0 auto;注意该元素需要有宽度。对于不可设置宽高的行内标签span是无效的
外边距问题-合并现象!
场景垂直排列的兄弟元素上下margin会合并
现象取两个margin中的较大值生效
外边距问题-塌陷问题
场景父子级的标签子级的添加 上外边距 会产生塌陷问题
现象导致父级一起向下移动
解决方法
取消子级margin父级设置padding父级设置overflow:hidden父级设置 border-top
行内元素-内外边距问题
场景行内元素添加margin和padding无法改变元素垂直位置
解决方法给行内元素添加line-height可以改变垂直位置
盒子模型-尺寸计算
内减模式下widthcontentpaddingborder 盒子模型-元素溢出
作用控制溢出元素的内容的显示方式。 属性名overflow
属性值效果hidden溢出隐藏scroll溢出滚动无论是否溢出都显示滚动条位置auto溢出滚动溢出才显示滚动条位置
盒子模型-圆角
作用设置元素的外边框为圆角。 属性名border-radius
属性值数字px/百分比
提示属性值是圆角半径
从左上角顺时针赋值没有取值的角与对角取值相同
最大值是50%。超过50%没有效果 常见应用-正圆形状 给正方形盒子设置圆角属性值为 宽高的一半/50% 常见应用-胶囊形状 给长方形盒子设置圆角属性值为 盒子高度的一半
盒子模型-阴影拓展
作用给元素设置阴影效果 属性名box-shadow 属性值x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意
x轴偏移量和Y轴偏移量必须书写默认是外阴影内阴影需要添加inset
5.字体修饰属性 注意 font-size: 需要单位px在谷歌浏览器默认16px。 font-weight: 正常400normal);加粗700bold)。 font-style: normal/italic. line-height: 数字 px 数字当前标签font-size属性值的倍数。 从一行文字的最顶最底测量到下一行文字的最顶最底。垂直居中技巧行高属性值等于盒子高度属性值。 font-family: 例如font-familyMicrosoft YaHeiHeiti SCtahomaarialHiragino Sans GB“\5B8B\4F53”sans-serif 拓展了解font-family属性值可以书写多个字体名各个字体名用逗号隔开执行顺序是从左向右依次查找。 font-family 属性最后设置一个字体族名网页开发建议使用无衬线字体。 font: div{
/*font是否倾斜 是否加粗 字号/行高 字体*/
fontitalic 700 30px/2 楷体;
}注意字号和字体值必须书写否则font属性不生效。其他写不写无所谓。 text-indent: 常用于段落第一行缩进两字符 数字 px 数字em推荐1em 当前标签的字号大小(常用) text-align:水平方向。文字内容不是标签。也适用于图片img。 left 左对齐默认 center 居中对齐 right 右对齐 text-decoration: none 无 underline 下划线 line-through 删除线 overline 上划线 color:
6.调试工具 7.CSS特性 继承性 子级默认继承父级的文字控制属性。 一般开发中默认先设置body标签的文字属性。如果标签自己有样式则生效自己的样式不继承。 层叠性 相同的属性会覆盖后面的CSS属性覆盖前面的CSS属性不同的属性会叠加不同的 CSS 属性都生效 优先级 优先级也叫权重当一个标签使用了多种选择器时基于不同种类的选择器的匹配规则。 规则选择器优先级高的样式生效。 公式通配符选择器标签选择器类选择器id选择器行内样式!important 选中标签的范围越大优先级越低
叠加计算如果是复合选择器则需要权重叠加计算。 公式每一级之间不存在进位 行内样式id选择器个数类选择器个数标签选择器个数 规则 从左向右依次比较选个数同一级个数多的优先级高如果个 数 相同则向后比较 important 权重最高 继承权重最低
8.背景属性
属性名background-imagebgi 属性值url背景图 URL
div{width:400px;height:400px;background-image:url(./images/1.png);
}
背景图默认是平铺复制的效果描述属性属性值背景色background-color背景图background-image背景图平铺方式background-repeat(bgr)no-repeat不平铺、repeat平铺默认效果、repeat-x水平方向平铺、repeat-y垂直方向平铺背景图位置background-position(bgp)left左侧、right右侧、center居中、top顶部、bottom底部、坐标数字 px正负都可以。左上角为00背景图缩放background-size(bgz)关键字cover等比例缩放背景图片以完全覆盖背景区可能背景图片部分看不见contain等比例缩放背景图片以完全装入背景区可能背景区部分空白百分比根据盒子尺寸计算图片大小100%数字 单位例如px背景图固定background-attachment(bga)fixed背景不会随着元素的内容滚动。背景复合属性background背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定空格隔开各个属性值不区分顺序
渐变
渐变是多个颜色逐渐变化的效果一般用于设置盒子背景
分类
线性渐变从上到下之类的径向渐变从中心向四周
线性渐变
属性
background-image:linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);background-image: linear-gradient(
transparent,
rgba(0, 0, 0, 0.6)
);取值
渐变方向可选
to 方位名词角度度数
终点位置可选
百分比
径向渐变
作用给按钮添加高光效果 属性
background-image: radial-gradient
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);取值
半径可以是2条则为椭圆圆心位置取值像素单位数值/百分比/方位名词
9.显示模式
类型代表特点块级元素div独占一行宽度默认是父级的100%添加宽高属性生效行内元素span一行可以显示多个设置宽高属性不生效宽高尺寸由内容撑开行内块元素img一行可以显示多个设置宽高属性生效宽高尺寸也可以由内容撑开
转换显示模式
属性名display
属性值效果block块级inline-block行内块inline行内
10.清除默认样式
10.清除默认样式
/* 基础公共样式清除默认样式 设置通用样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}
input{border:0;//去除边框background-color:transparent;//去除默认背景颜色设置为透明outline:none;//去除点击input框时的边框
}
//input::placeholder{}
//::placeholder 选中就是 placeholder 属性文字样式/* 去除常见标签默认的 margin 和 padding */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {font: 16px/1.5 Microsoft Yahei,Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}/* 去除列表默认样式 */
ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐去除img默认下间隙 */
img {width: 100%;height: 100%;vertical-align: middle;
}/* 去除input默认样式 */
input {border: none;outline: none;color: #333;
}h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 400;
}
11.CSS 书写顺序
盒子模型属性文字样式圆角、阴影等修饰属性
12.标准流
标准流也叫文档流指的是标签在页面中默认的排布规则例如块元素独占一行行内元素可以一行显示多个。
13.浮动
作用让块元素水平排列。
属性名float 属性值
left左对齐right右对齐
注意脱标即脱离标准流。
清除浮动
场景浮动元素会脱标如果父级没有高度子级无法撑开父级高度可能导致页面布局错乱。底部的元素会向上顶。 解决方法清除浮动清除浮动带来的影响
方法一额外标签法
在父元素内容的最后添加一个块级元素设置 CSS 属性 clearboth
方法二单伪元素法
.clearfix::after{
content:;
display:block;
clear:both;
}
给浮动的父级元素添加.clearfix类名方法三双伪元素法推荐
/*before 解决外边距塌陷问题*/
.clearfix::before,.clearfix::after{content:;display:table;
}
.clearfix::after{clear:both;
}
给浮动的父级元素添加.clearfix类名方法四overflow
给浮动的父元素添加 CSS 属性 overflowhidden
浮动-总结
浮动属性 floatleft 表示左浮动right 表示右浮动
特点 1.浮动后的盒子顶对齐 2.浮动后的盒子具备行内块特点 3.父级宽度不够浮动的子级会换行 4.浮动后的盒子脱标 清除浮动子级浮动父级没有高度子级无法撑开父级高度影响布局效果 1.双伪元素法 拓展浮动本质作用是实现图文混排效果
14.flex布局
Flex布局也叫弹性布局是浏览器提倡的布局模型非常适合结构化布局提供了强大的空间分布和对齐能力。 Flex 模型不会产生浮动布局中脱标现象布局网页更简单、更灵活。
Flex-组成
设置方式给父元素设置 displayflex子元素可以自动挤压或拉伸。
组成部分 弹性容器 弹性盒子 主轴默认在水平方向 侧轴/交叉轴默认在垂直方向 Flex 布局
描述属性创建flex容器display:flex主轴对齐方式justify-content侧轴对齐方式align-items某个弹性盒子侧轴对齐方式align-self修改主轴方向flex-direction弹性伸缩比flex弹性盒子换行flex-wrap行对齐方式align-content
主轴对齐方式
属性名justify-content
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等弹性盒子与弹性盒子之间间距相等。
侧轴对齐方式
属性名 align-items当前弹性容器内所有弹性盒子的侧轴对齐方式给弹性容器设置 align-self单独控制某个弹性盒子的侧轴对齐方式给弹性盒子设置
属性值效果stretch弹性盒子沿着侧轴线被拉伸至铺满容器弹性盒子没有设置侧轴方向尺寸即高度则默认拉伸center弹性盒子沿侧轴居中排列flex-start弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列
默认情况下主轴方向尺寸是靠内容撑开侧轴默认拉伸
修改主轴方向
主轴默认在水平方向侧轴默认在垂直方向
属性名flex-direction
属性值效果row水平方向从左向右默认column垂直方向从上向下row-reverse水平方向从右向左column-reverse垂直方向从下向上
弹性伸缩比-可进行50天50个项目的第一个
作用控制弹性盒子的主轴方向的尺寸。 属性名flex 属性值整数数字表示占用父级剩余尺寸的份数。剩余尺寸为父级大小减去其他兄弟元素的大小的剩余
弹性盒子换行
弹性盒子可以自动挤压或拉伸默认情况下所有弹性盒子都在一行显示。 属性名flex-wrap
属性值 wrap换行 nowrap不换行默认
行对齐方式
属性名align-content
属性值效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等弹性盒子与弹性盒子之间间距相等。
**注意设置在父元素上并且其里面的弹性盒子必须发生换行即多行 。才会显示其效果。**对单行不生效。
flex 布局父级宽度不够子级被挤小不想挤小增大父级尺寸
15.网页设计技巧 清除默认样式并将其设置为一个css文件 设置版心区域 .wrapper{margin: 0 auto;width: 1200px;
}logo的设置 h1a其中logo设置为a标签的背景 导航制作技巧 ulli*3a 优势避免堆砌a标签网站搜索排名降级 搜索区域 .search input a / button imgspan 问题:图片与文字以图片的底部为基准显示并没有居中显示。如何使文字图片居中对齐 解决方案 img{vertical-align:middle;//行内块和行内垂直方向对齐方式
}16.定位
作用灵活的改变盒子在网页中的位置
实现 1.定位模式position 2.边偏移设置盒子的位置
leftrighttopbottom
right 定位右对齐如果文字多了向左撑开可能盖住其他的内容 left 定位左对齐文字多了向右撑开可能盖住其他的内容
具体情况具体分析。购物车上的数量
相对定位
div{position:relative;top:100px;
}1.改变位置的参照物是 自己原来的位置
2.不脱标占位
3.标签显示模式特点 不变
绝对定位
positionabsolute 使用场景子级绝对定位父级相对定位子绝父相
1.脱标不占位
2.参照物先找最近的已经定位的祖先元素如果所有祖先元素都没有定位参照浏览器可视区改位置
3.显示模式特点改变宽高生效具备了行内块的特点
定位居中
实现步骤 1.绝对定位 2.水平、垂直边偏移为 50% 3.子级向左、上移动自身尺寸的一半
左、上的外边距为 -尺寸的一半 transformtranslate-50%-50%
固定定位
positionfixed 场景元素的位置在网页滚动时不会改变
1.脱标不占位 2.参照物浏览器窗口 3.显示模式特点具备行内块特点
堆叠层级 z-index
默认效果按照标签书写顺序后来者居上 作用设置定位元素的层级顺序改变定位元素的显示顺序
取值是整数默认是0取值越大显示顺序越靠上
定位-总结
定位模式属性值是否脱标显示模式参照物相对定位relative否保持标签原有显示模式自己原来位置绝对定位absolute是行内块特点1.已经定位的祖先元素2.浏览器可视区固定定位fixed是行内块特点浏览器窗口
17.CSS 精灵
CSS精灵也叫CSS Sprites是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中再background-position 精确的定位出背景图片的位置。
优点减少服务器被请求次数减轻服务器的压力提高页面加载速度。
实现步骤 1.创建盒子盒子尺寸与小图尺寸相同 2.设置盒子背景图为精灵图 3.添加 background-position 属性改变背景图位置 3.1使用PxCook测量小图片左上角坐标 3.2取负数坐标为background-position属性值向左上移动图片位置
18.字体图标
字体图标展示的是图标本质是字体 作用在网页中添加简单的、颜色单一的小图标
优点
灵活性灵活地修改样式例如尺寸、颜色等轻量级体积小、渲染快、降低服务器请求次数兼容性几乎兼容所有主流浏览器使用方便先下载再使用
字体图标-下载字体
iconfont 图标库https://www.iconfont.cn/ 下载字体 登录 →素材库 →官方图标库 →进入图标库 →选图标加入购物车 → 购物车添加至项目确定 → 下载至本地
字体图标-使用字体
1.引入字体样式表iconfont.css 2.标签使用字体图标类名
1.iconfont字体图标基本样式字体名字体大小等等 2.icon-xxx图标对应的类名 字体图标-上传矢量图
作用项目特有的图标上传到 iconfont图标库生成字体
19.垂直对齐方式 vertical-align
属性名vertical-align
属性值效果baseline基线对齐默认top顶部对齐middle居中对齐bottom底部对齐 拓展:
因为浏览器把行内块、行内标签当做文字处理默认按基线对齐 效果图片img的底下有空白转块级不按基线对齐空白就消失了
20.过渡 transition
作用可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名transition复合属性 属性值过渡的属性花费时间s 提示
过渡的属性可以是具体的 CSS 属性也可以为all两个状态属性值不同的所有属性都产生过渡效果transition 设置给元素本身
21.透明度 opacity
作用设置整个元素的透明度包含背景和内容 属性名opacity 属性值0-1 0完全透明元素不可见 1不透明 0-1之间小数半透明
22.光标类型 cursor
作用鼠标悬停在元素上时指针显示样式
属性名cursor
属性值效果default默认值通常是箭头pointer小手效果提示用户可以点击text工字型提示用户可以选择文字move十字光标提示用户可以移动
23.SEO 三大标签
SEO搜索引擎优化提升网站百度搜索排名提升SEO的常见方法 1.竞价排名 2.将网页制作成html后缀 3.标签语义化在合适的地方使用合适的标签 4…
网页头部 SEO 标签 title网页标题标签 description网页描述 keywords网页关键词 24.Favicon 图标
Favicon 图标网页图标出现在浏览器标题栏增加网站辨识度。 图标favicon.ico一般存放到网站的根目录里面 25.input注意点
浏览器优先生效 input 标签的默认宽度所以 flex1 不生效 解决办法重置 input 默认宽度 → width0
26.平面转换 transform
作用为元素添加动态效果一般与过渡transition配合使用 概念改变盒子在平面内的形态位移、旋转、缩放、倾斜 平面转换也叫2D转换
1.平面转换-平移
属性
transform: translate(X轴移动距离,Y轴移动距离);取值 像素单位数值百分比参照盒子自身尺寸计算结果正负均可 技巧 translate() 只写一个值表示沿着 × 轴移动 单独设置 X 或Y 轴移动距离translateX() 或 translateY()
平移实现居中效果 方法一 position: absolute;
left: 50%;
top: 50%;
/* margin 盒子自身的一半 */
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;方法二百分比参照盒子自身尺寸计算结果 position: absolute;
left: 50%;
top: 50%;
/* 向左向上移动自身尺寸的一半*/
transform: translate(-50%, -50%);2.平面转换-旋转
属性
transform: rotate(旋转角度);角度单位是 deg
技巧 取值正负均可 取值为正顺时针 旋转取值为负逆时针旋转
平面转换-改变转换原点
默认情况下转换原点是盒子中心点 属性
transform-origin:水平原点位置 垂直原点位置;取值
方位名词left、top、right、bottomcenter像素单位数值百分比
平面转换-多重转换
多重转换技巧先平移再旋转
transform: translate() rotate();
/*旋转会改变坐标轴向*/
/*多重转换以第一种转换形态的坐标轴为准*/3.平面转换-缩放
属性
transform:scale(缩放倍数);
transform:scale(X轴缩放倍数,Y轴缩放倍数);技巧
通常只为 scale设置一个值表示X轴和Y 轴等比例缩放取值大于1表示放大取值小于1表示缩小
4.平面转换-倾斜
属性
transform: skew();取值
角度度数 deg正数向左倾斜负数向右倾斜
27.空间转换
空间是从坐标轴角度定义的X、Y 和 Z 三条坐标轴构成了一个立体空间Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性transform
1.空间转换-平移
属性
transform:translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();取值正负均可
像素单位数值百分比参照盒子自身尺寸计算结果
视距 perspective
作用指定了观察者与20平面的距离为元素添加透视效果 透视效果近大远小、近实远虚 属性添加给父级取值范围800-1200
perspective:视距;2.空间-旋转
transform: rotateZ(值);
transform: rotateX(值);
/* 为了更好的显示沿X轴旋转的效果可以给父级添加 视距 perspective*/
transform: rotateY(值);左手法则-根据旋转方向确定取值正负 左手握住旋转轴拇指指向正值方向其他四个手指弯曲方向为旋转正值方向 拓展
rotate3dxyz角度度数用来设置自定义旋转轴的位置及旋转的角度xyz 取值为0-1之间的数字
3.立体呈现 transform-style
作用设置元素的子元素是位于3D空间中还是平面中 属性值 属性名transform-style
flat子级处于平面中preserve-3d子级处于3D空间
呈现立体图形步骤 1.父元素添加transform-stylepreserve-3d
transform: rotateY(89deg);为了方便前期观察效果
2.子级定位
3.调整子盒子的位置位移或旋转
4.空间转换-缩放
属性
transform: scale3d(X, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();28.动画-animation
过渡实现两个状态间的变化过程动画实现多个状态间的变化过程动画过程可控重复播放、最终画面、是否暂停
实现步骤 1.定义动画
/* 书写形式1 */
keyframes 动画名称 {from {}to {}
}
/* 书写形式2 */
keyframes 动画名称{0%{}10%{}......100%{}
}百分比表示的意思是动画时长的百分比
2.使用动画
animation: 动画名称 动画花费时长;动画-animation
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;提示
动画名称和动画时长必须赋值取值不分先后顺序如果有两个时间值第一个时间表示动画时长第二个时间表示延迟时间。以s为单位
速度曲线
linear:匀速steps(3):分步动画工作中配合精灵图实现精灵动画
重复次数
infinite一直重复数字多少次数
动画方向
reverse动画反向播放。alternate动画在正向和反向之间循环播放。alternate-reverse动画先以反向播放开始然后再以正向播放结束。
执行完毕时状态
forwards:停留到最终状态backwards:停留在开始状态默认
属性作用取值animation-name动画名称animation-duration动画时长animation-delay延迟时间animation-fill-mode动画执行完毕时状态forwards最后一帧状态backwards第一帧状态animation-timing-function速度曲线steps数字逐帧动画animation-iteration-count重复次数infinite为无限循环animation-direction动画执行方向alternate为反向animation-play-state暂停动画paused为暂停通常配合hover使用
动画-多组动画
animation动画1动画2动画N;
animation:run 1s steps(12) infinite,move 3s linear forwards
;29.移动适配
1.rem
视口
手机屏幕尺寸不同网页宽度均为100%网页的宽度和逻辑分辨率尺寸相同
视口显示HTML网页的区域用来约束HTML尺寸
!DOCTYPE html
html langenheadmeta charsetUTF-8!- 视口标签 - -meta nameviewport contentwidthdevice-width, initial-scale1.0titleDad jokes/title
/headbody
/body/htmlwidthdevice-width视口宽度 设备宽度initial-scale1.0缩放1倍不缩放
二倍图
概念设计稿里面每个元素的尺寸的倍数 作用防止图片在高分辨率屏幕下模糊失真
现阶段设计稿参考iPhone6/7/8设备宽度375px产出设计稿。二倍图设计稿尺寸750px。
注意我们书写代码时设计图大小应该为设备的大小或逻辑大小。即需要使设计图的大小为 2x 或者 设计密度为2x。 适配方案
宽度适配宽度自适应
百分比布局Flex 布局
等比适配宽高等比缩放
remvw
rem
rem单位是相对单位rem单位是相对于HTML标签的字号计算结果1rem 1HTML字号大小
/*1.给HTML标签加字号*/
html{font-size30px
}
/*2.使用rem单位书写尺寸*/
.box{width5remheight3rembackground-color: pink
}
/* 注意还未实现移动适配效果 需要配合 媒体查询*/rem-flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。(工作中) 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
https://github.com/amfe/lib-flexible
body.....script src./js/flexible.js/script
/body思考
工作中书写代码的尺寸要参照设计稿尺寸设计稿中是px还是rem目标计算68px是多少个rem设计稿适配375px视口 N*37.5 68 N 68/37.5
rem单位尺寸 1.确定基准根字号 查看设计稿宽度→确定参考设备宽度视口宽度→确定基准根字号1/10视口宽度 2.rem单位的尺寸 rem单位的尺寸 px单位数值/基准根字号
工作中我们可以配合less来简化 rem单位尺寸中的计算。width:(68 /37.5rem);当引入flexible.js时在less书写可以书写width:(68 /37.5rem);并且不同屏仍然有着移动适配的效果
2.vw(推荐使用)
适配方案相对单位相对视口的尺寸计算结果vwviewport widthvhviewport height
vw 布局 1.确定设计稿对应的vw尺寸1/100视口宽度 查看设计稿宽度→确定参考设备宽度视口宽度→确定vw尺寸1/100视口宽度 2.vw单位的尺寸 px 单位数值/1/100 视口宽度
.box {width: (68 /3.75vw);height: (29 /3.75vw);background-color: pink;
}思考开发中能不能vw和vh混用呢 不能 vh是1/100视口高度全面屏视口高度尺寸大如果混用可能会导致盒子变形
总结
相对单位求出相对的比例则在不同的屏他就会以比例相对屏来显示。而不会是盒子变形
30.媒体查询
思考 手机屏幕大小不同分辨率不同如何设置不同的HTML标签字号 媒体查询
媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式当某个条件成立执行对应的CSS样式
media媒体特性{选择器{CSS属性}
}/*视口宽度是375网页背景色是绿色*/
mediawidth375px{body{background-color: green}
}注意在自己的电脑的缩放与文本应该设置为100%则浏览器检查的适配器的大小才与显示的大小一致 目前rem布局方案中将网页等分成10份HTML标签的字号为视口宽度的1/10
rem-flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
body.....script src./js/flexible.js/script
/body31.less
less-简介
Less是一个CSS预处理器Less文件后缀是.less。扩充了CSS语言使CSS具备一定的逻辑性、计算能力注意浏览器不识别 Less 代码目前阶段网页要引入对应的 CSS 文件VS Code 插件Easy LESS保存 less文件后自动生成对应的 CSS 文件 less-注释
注释
单行注释
语法//注释内容 快捷键ctrl /
块注释
语法/注释内容/ 快捷键Shift Alt A
如果快捷键冲突了可以 在vscode的设置中的键盘快捷键方式中修改。
注意单行注释无法在css中显示
less-运算
运算 加、减、乘直接书写计算表达式 除法需要添加 小括号 或.
.box{width: 100 50px; height: 5 * 32px;width: (100 /4px); height: 100 ./4px;
}less-嵌套
作用快速生成后代选择器
.父级选择器{//父级样式.子级选择器{//子级样式}
}
.father {color: red;.son {width: 100px;:hover{/* 在css中为 .father .son:hover */}}
}less-变量
概念容器存储数据
作用存储数据方便使用和修改
语法
定义变量变量名数据
使用变量CSS属性变量名
less-导入
作用导入 less 公共样式文件
语法导入import文件路径
提示如果是 less 文件可以省略后缀
import./base.less
import./commonless-导出
写法在less文件的第一行添加
//out存储URL
提示文件夹名称后面添加/
//out./index.css
//out./css/less-禁止导出
写法在less文件第一行添加//outfalse
//out:false32.图片的细节
//cover完全覆盖 //缩放img图片比例跟父级盒子比例不同避免图片挤压变形
object-fi: cover33.响应式网页
响应式网页解决方案
1.媒体查询
media条件{html{background-color: green}
}media(媒体特性){选择器{样式}
}媒体特性
max-width最大宽度 生效min-width最小宽度 生效
媒体查询-书写顺序
需求
默认网页背景色是灰色屏幕宽度大于等于768px网页背景色是粉色屏幕宽度大于等于 992px网页背景色是绿色屏幕宽度大于等于1200px网页背景色是skyblue
提示
min-width从小到大max-width从大到小
媒体查询-完整写法-了解
media 关键词 媒体类型 and媒体特性{CSS代码}关键词/逻辑操作符
andonlynot
媒体类型是用来区分设备类型的如屏幕设备、打印设备等其中手机、电脑、平板都属于屏幕设备
类型名称值描述屏幕screen带屏幕的设备打印预览print打印预览模式阅读器speech屏幕阅读模式不区分类型all默认值包括以上3种情形
媒体特性主要用来描述媒体类型的具体特征如当前屏幕的宽高、分辨率、横屏或竖屏等。
特性名称属性值视口的宽和高width、height数值视口最大宽或高max-width、max-height数值视口最小宽或高min-width、min-height数值屏幕方向orientationportrait竖屏landscape横屏
媒体查询-外部CSS
为了引入外部的媒体查询的css防止同一个css过多难以维护。注意外部css只书写相应屏下的css无需media。因为在html中的link的media会书写。
link relstylesheet media逻辑符 媒体类型 and媒体特性 hrefxx.css--视口宽度 小于等于 768px网页背景色是粉色--
link relstylesheet mediamax-width768px href./pink.css
--视口宽度 大于等于 1200px网页背景色是绿色--
link relstylesheet mediamin-width1200px href./green.css2.Bootstrap
Bootstrap-简介
Bootstrap是由Twitter公司开发维护的前端UI框架它提供了大量编写好的CSS样式允许开发者结合一定HTML结构及JavaScript快速编写功能完善的网页及常见交互效果。
中文官网https://www.bootcss.com/
Bootstrap-下载
中文官网https://www.bootcss.com/ 使用步骤 1.下载Bootstrap V5中文文档→进入中文文档→下载→下载Bootstrap生产文件
Bootstrap-使用
使用步骤 1.引入 Bootstrap CSS 文件
link relstylesheet href./Bootstrap/css/bootstrap.min.css2.调用类名container响应式布局版心类
div classcontainer测试/divBootstrap-栅格系统
栅格化是指将整个网页的宽度分成12等份每个盒子占用的对应的份数例如一行排4个盒子则每个盒子占3份即可12/43 常用布局类
col-#-#列例如col-xxl-3row行
**注意**当使用栅格布局时并且一行的每一部分之间有间距此时我们需要在每一部分中再套一个盒子就能实现一部分与另一部分就有了间距是因为每一部分都有一个左右的padding。为什么不用margain因为如果使用了就会被挤到下一行。
div classrowdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/div
/divBootstrap-全局样式
Button类 btn默认样式 btn-success成功 btn-warning警告 … 按钮尺寸btn-lg/btn-sm button typebutton classbtn btn-primaryPrimary/button
button typebutton classbtn btn-secondarySecondary/button
button typebutton classbtn btn-successSuccess/button
button typebutton classbtn btn-dangerDanger/button
button typebutton classbtn btn-warningWarning/button
button typebutton classbtn btn-infoInfo/button
button typebutton classbtn btn-lightLight/button
button typebutton classbtn btn-darkDark/buttonbutton typebutton classbtn btn-linkLink/button表格类
table默认样式table-striped隔行变色table-success表格颜色… !-- On tables --
table classtable-primary.../table
table classtable-secondary.../table
table classtable-success.../table
table classtable-danger.../table
table classtable-warning.../table
table classtable-info.../table
table classtable-light.../table
table classtable-dark.../table!-- On rows --
tr classtable-primary.../tr
tr classtable-secondary.../tr
tr classtable-success.../tr
tr classtable-danger.../tr
tr classtable-warning.../tr
tr classtable-info.../tr
tr classtable-light.../tr
tr classtable-dark.../tr!-- On cells (td or th) --
trtd classtable-primary.../tdtd classtable-secondary.../tdtd classtable-success.../tdtd classtable-danger.../tdtd classtable-warning.../tdtd classtable-info.../tdtd classtable-light.../tdtd classtable-dark.../td
/trBootstrap-组件Components
1.引入样式表 2.引入js文件 3.复制结构修改内容
Bootstrap-字体图标
下载 导航/Extend图标库→安装→下载安装包→ bootstrap-icons-1.X.X.zip
使用 1.复制fonts文件夹到项目目录 2.网页引入 bootstrap-icons.css 文件 3.调用CSS类名图标对应的类名
i classbi-android2/i34.页面光滑滚动
/*页面滑动*/
html{/*让滚动条丝滑的滚动*/scroll-behavior:smooth;
}
