香香鲲 - 博客园

2022年7月19日

摘要：事件事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能事件的三要素: 1 事件源 2 事件类型（点中，点中不松开，鼠标滚动...） click 3 事件处理程序handler 绑定事件 1.行内绑定方式在标签行内的事件值上写上标志"jav 阅读全文

posted @ 2022-07-19 11:02 香香鲲阅读(79) 评论(0) 推荐(0) 编辑

2022年7月18日

CSS：设置透明度

摘要： 1、opcity 2、rgba（）例： <style> body{ background-color: rgba(215, 187, 187, 0.5); opacity: 0.5; } </style> html效果：阅读全文

posted @ 2022-07-18 09:21 香香鲲阅读(74) 评论(0) 推荐(0) 编辑

2022年7月17日

CSS：轮播图

摘要：完美轮播图实例：部分代码—— <style> * { padding: 0; margin: 0; } html { font-size: calc(100vw / 750); } .swiper { width: 100vw; height: 280.3rem; overflow: hidden 阅读全文

posted @ 2022-07-17 11:31 香香鲲阅读(105) 评论(0) 推荐(0) 编辑

CSS：calc计算属性-拓展

摘要：（1）calc() 只作用于属性值你唯一可以使用calc()函数的地方是在值中。 .el { font-size: calc(3vw + 2px); width: calc(100% - 20px); height: calc(100vh - 20px); padding: calc(1vw + 阅读全文

posted @ 2022-07-17 11:29 香香鲲阅读(141) 评论(0) 推荐(0) 编辑

CSS：文本效果（white-space、overflow、text-overflow）

摘要：（1）white-space 设置元素对内容中的空格的处理方式值描述 normal 默认。文本空白换行会被浏览器忽略。 pre 保留文本原样式比如空格或换行 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 pre-wrap 保留空白符序列，保留换行符。如果文本超出容阅读全文

posted @ 2022-07-17 11:27 香香鲲阅读(199) 评论(0) 推荐(0) 编辑

CSS：移动端布局（视口，rem单位（视窗单位））

摘要：移动端布局（1）布局概念 1. 静态布局直接使用px作为单位不推荐不会适应屏幕 2. 流式布局宽度使用%百分比，高度使用px作为单位通常还会加上最大值和最小值 3. 自适应布局创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用 @media媒体查询来切换多个布局 <meta n 阅读全文

posted @ 2022-07-17 11:20 香香鲲阅读(460) 评论(0) 推荐(0) 编辑

CSS3：多媒体查询 Media Queries

摘要： @media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如： viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率目前很多针对苹果手机，Android 手机，平板等设备都会阅读全文

posted @ 2022-07-17 11:16 香香鲲阅读(95) 评论(0) 推荐(0) 编辑

CSS3：弹性盒子-Flexbox

摘要： CSS3弹性盒子 -Flexbox display:flex; 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex-direction:指定主轴的方向；：column；列：row；水平，左->右：column-reverse ：row- 阅读全文

posted @ 2022-07-17 11:12 香香鲲阅读(35) 评论(0) 推荐(0) 编辑

CSS3：多列显示

摘要： CSS3多列显示（流式布局） column-count：指定某个元素应分为的列数数值/auto； column-width：指定列的宽度； length/auto； cloumn-span：指定某个元素应该跨越多少列； none/allnone/all； column-gap：指定列之间的间隙；阅读全文

posted @ 2022-07-17 11:06 香香鲲阅读(38) 评论(0) 推荐(0) 编辑

CSS3：动画：animation

摘要： CSS3动画：animation animation：动画名字所需时间运动曲线延迟时间循环次数(n>0 整数/无限次infinite) 反省运动； animation:mymove(name) 3s ease-in-out 1s reverse（反向） alternate（交替效果） alt 阅读全文

posted @ 2022-07-17 11:05 香香鲲阅读(37) 评论(0) 推荐(0) 编辑