css及移动端web笔记 | 青训营笔记

简介: css及移动端web笔记 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天


移动端WEB


平面转换


过渡:transition:all 1s;

1、位移:transform :translate(水平移动距离,垂直移动距离);右下为正 百分比或像素

2、旋转:transform:rotate(角度); 角度单位deg 正为顺时针旋转

3、转换原点:transform-origin:left top right bottom center 属性用空格隔开(写在标签里而不是伪类)

4、多重转换:transform:translate() rotate(); 旋转会改变坐标轴向 一般写在最后面

5、缩放:transform:scale(缩放倍数);大于1指放大

6、渐变:background-image:linear-gradient(颜色1,颜色2,...);


空间转换


1、transform :translate3d(x,y,z);

2、透视效果:perspective:建议取800~1200px 写在盒子的父级 近大远小


动画


1、定义动画


1687267063243.png


2、使用动画 animation:动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态

3、百分比指动画总时长的占比

4、animation: infinite(动画无限循环)

5、animation:alternate(动画方向有正有反) 常用

6、animation:forwards(动画停留在最终状态)

7、动画名称与时长必须赋值,其他属性看需求

8、多组动画:animation:动画1,动画2,动画n;


CSS笔记


1、一个标签可以使用多个类名

2、id选择器 #id

3、一个标签只能有一个id属性值

4、通配符选择器 * 对页面所有标签设置样式

5、文字样式:

  • 字体大小:font-size 14px
  • 字体粗细:font-weigth:normal(正常400) bold(加粗700)
  • 字体样式:font-style:normal(正常) italic(倾斜)
  • 字体系列:font-family:sans-serif
  • 字体复合:font:style weight size/line-height family
  • 文本缩进:text-indent 2em(em:当前标签font-size的大小)
  • 文本水平对齐:text-align:left right center(span a input img)
  • 文本修饰:text-decoration:underline(下划线) line-through(删除线) none(无线修饰) overline(上划线)
  • 行高:line-height:数字+px 14px 倍数 3(当前标签font-size的倍数)
  • 文字颜色:color:red rbg(,,) rbga(,,) #000
  • 垂直居中:行高等于高度

6、css层叠性 覆盖

7、后代选择器:选择器1 选择器2 div p{} 找到div里的p 选择所有后代

8、子代选择器:选择器1>选择器2 只选择子代

9、并集选择器: 选择器1,选择器2 同时选择多组标签

10、交集选择器:选择器1.选择器2

11、伪类选择器:选择器:hover

12、背景颜色:background-color

13、背景图片:background-image:url(‘图片路径’)

14、背景平铺:background-repeat:repeat(水平垂直都平铺) no-repeat(不平铺) repeat-x(y)默认平铺

15、背景位置:background-position:center center 50px 50px 右下为正

16、背景连写:background:color imag repeat position

17、元素显示模式转换:display:block'转换成块级元素 inline-block 转换成行内块元素 inline 转换成行内元素


盒子模型


1、边框:border:1px solid #000 solid:实线 dashed:虚线 dotted:点线

2、border会撑大盒子的尺寸

3、内边距 padding:10px 20px 30px 10px 上右下左 padding也会撑大盒子

4、用padding撑开盒子宽度,不必设置宽度

5、自动内减: box-sizing:border-box;

6、外边距:margin 与padding类似

7、清除默认内外边距: *{margin:0; padding:0;}

8、版心居中:margin:0 auto

9、list-style:none去除li前面的小点

10、外边距折叠问题


1687267054103.png


相关文章
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
259 91
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
97 6
|
2月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
28 4
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
61 2
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
68 28
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
3月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
51 15
|
3月前
|
前端开发
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。