![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 71
CSS笔记整理
舍予一
这个作者很懒,什么都没留下…
展开
-
阻止用户通过浏览器控制台修改css样式
阻止用户通过浏览器控制台修改CSS样式转载 2022-06-27 09:57:30 · 681 阅读 · 0 评论 -
纯文本内容展开收起(可套用)
纯文本内容展开收起(可套用)原创 2022-06-16 18:04:06 · 142 阅读 · 0 评论 -
用粘性定位sticky实现类似表头固定的效果
效果展示在开发中有时候需要用到一些表格或图片等进行数据展示。但有时候会因为数据过长,没有办法在可视区内展示全部的数据,但屏幕下滑时又会将数据的标题头部划走不方便我们的查看。这时会做一个在屏幕可见区滑动到这部分数据时,将这部分数据的标题头部始终保持在顶部,类似于excel表格的冻结窗格。这个效果可以用js来实现,但需要监听窗口滚动事件、计算元素位置等等,会比较麻烦。如果利用粘性定位sticky,就可以只通过简单的css就可以实现这一效果。效果如下图:参考代码粘性定位可以被认为是相对定位和固定定原创 2022-04-27 14:46:53 · 520 阅读 · 0 评论 -
用animation做无缝匀速滚动
用animation做无缝匀速滚动原理应用原理最外层需要一个可视大小的盒子(黑色部分)。记得给这个盒子添加高度(高度和蓝粉色盒子一样)在可视的盒子里需要放一个盒子,该盒子的宽度就是粉色蓝色盒子宽度的总和,其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位 position: relative粉色和蓝色盒子里放的是一样的东西,通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位 position: absolute 。我们就是通过改变它们lefft right 值来实现滚动原创 2022-04-02 10:25:29 · 3868 阅读 · 0 评论 -
vue中使用animate.css
vue中使用animate.css安装main.js引入样式例子文档知识点记录遇到问题记录安装npm install animate.css --savemain.js引入样式import animated from 'animate.css'Vue.use(animated)例子<template> <h1 class="animate__animated animate__rotateOutDownRight animate__infinite animate原创 2022-04-01 11:11:11 · 2868 阅读 · 0 评论 -
在盒子内侧伪造两个对边内阴影
在盒子内侧伪造两个对边内阴影思路如图,在盒子内侧伪造两个对边内阴影。用box-shadow 无法达到只要对边阴影的效果,只能取单边、临边或四个边。思路在盒子的前后各造两个伪元素,给这两个伪元素分别定位到盒子两侧,通过背景色线性渐变来达到一个看似阴影的效果。(注意,父盒子记得加定位).box { position: relative;}.box::before,.box::after { content: ""; display: block; position: abs原创 2022-04-01 09:38:39 · 392 阅读 · 0 评论 -
swiper两边导航按钮定位被压住的解决办法
swiper两边导航按钮定位被压住的解决办法问题原因解决注意问题如图,swiper两边的导航按钮需要定位到父盒子外面时,被压住原因是因为swiper的容器盒子swiper-container里也有相对定位解决我们需要把swiper的容器盒子swiper-container改成静态定位.swiper-container { position: static;}注意我们在用swiper-container的时候最好嵌套在你需要swiper的盒子里面,不要直接给这个父盒子添加swip原创 2022-03-31 18:33:24 · 927 阅读 · 0 评论 -
背景图片鼠标悬停的动画效果
背景图片鼠标悬停的动画效果思路: 通过改变 background-position 结合过渡 transition实现.zy li { background: url("../../assets/img/03.png") no-repeat -300px 0;}.zy li:hover { transition: background 0.3s; background: url("../../assets/img/03.png") no-repeat 0 0;}...原创 2022-03-30 09:36:31 · 239 阅读 · 0 评论 -
01-CSS初识(css的引入)
CSS初识-CSS层叠样式表1. HTML的局限性2. CSS网页的美容师3. CSS初识4. 引入CSS样式表4.1 行内式(内联样式)4.2 内部样式表(内嵌样式表)4.3 外部样式表(外链式)1. HTML的局限性丑,操作html属性不方便2. CSS网页的美容师让 HTML 从样式中脱离, 实现了 HTML 专注去做 结构呈现,样式交给css 。结构(html)与样式(css)相分离3. CSS初识概念: CSS(Cascading Style Sheets) ,通常称为CS原创 2021-10-30 15:14:01 · 96 阅读 · 0 评论 -
02-CSS基础选择器
CSS基础选择器1. 选择器的作用1. 选择器的作用找到特定的HTML页面元素原创 2021-10-30 15:36:22 · 66 阅读 · 0 评论 -
03-CSS文字文本样式(font、text等属性)
CSS文字文本属性1. font字体1.1 font-size:大小1.2 font-family:字体CSS Unicode字体1.3 font-weight:字体粗细1.4 font-style:字体风格1.5 font:综合设置字体样式1.6 font总结2. CSS外观样式2.1 color:文本颜色2.2 text-align:文本水平对齐方式2.3 line-height:行间距2.4 text-indent:首行缩进2.5 text-decoration:文本的装饰2.6 CSS外观属性总结原创 2021-10-30 16:19:58 · 279 阅读 · 0 评论 -
04-CSS复合选择器、标签的显示模式、关于行高、CSS背景、CSS三大特性、CSS优先级等
CSS复合选择器、标签的显示模式、关于行高、CSS背景、CSS三大特性等1. CSS复合选择器1.1 后代选择器★1.2 子元素选择器1.3 交集选择器1.4 并集选择器★1.5 连接伪类选择器★1.6 复合选择器总结2. 标签显示模式(display)★2.1 块级元素(block)2.2 行内元素(inline)2.3 行内块元素(inline-block)2.4 三种模式总结区别2.5 标签显示模式转换 display3. 关于行高(line-height)3.1 行高测量3.1 单行文本垂直居中4.原创 2021-10-30 19:09:24 · 111 阅读 · 0 评论 -
05-盒子模型(边框、内外边距)
盒子模型1. 看透网页布局的本质2. 盒子模型(Box Model)3. 盒子边框(border)3.1 边框的综合设置3.2 盒子边框写法总结表3.3 表格边框线的合并4.内边距(padding)4.1 内边距4.2 设置4.3 内盒尺寸计算(元素实际大小)4.4 内边距产生的问题4.5 padding不影响盒子大小的情况5. 外边距(margin)5.1 外边距5.2 设置5.3 块级盒子居中5.4 文字居中和盒子居中的区别5.5 插入图片和背景图片的区别5.6 清除元素的默认内外边距5.7外边距合并(原创 2021-10-30 20:55:12 · 933 阅读 · 0 评论 -
06-浮动
浮动1. 浮动(float)1.1 CSS布局的三种机制1.2 什么是浮动1.3 浮动(float)的扩展(1)浮动元素与父盒子的关系(2)浮动元素与兄弟盒子的关系2. 清除浮动2.1 为什么要清除浮动2.2 清除浮动本质2.3 清除浮动的方法(1)额外标签法(隔墙法)(2)父级添加overflow属性方法(3)使用after伪元素清除浮动(4)使用双伪元素清除浮动1. 浮动(float)1.1 CSS布局的三种机制普通流(标准流):块级元素会独占一行,从上向下顺序排列;(常用元素:div、hr原创 2021-10-30 21:18:48 · 67 阅读 · 0 评论 -
07-定位
定位1. CSS布局的三种机制2. 定位详解2.1 边偏移2.2 定位模式 (position)2.2.1 静态定位(static)2.2.2 相对定位(relative)★2.2.3 绝对定位(absolute)★2.2.4 固定定位(fixed)★3. 定位(position)的扩展3.1 绝对定位的盒子居中3.2 堆叠顺序(z-index)3.3 定位改变display属性4. 定位小结@拓展圆角矩形设置4个角1. CSS布局的三种机制普通流(标准流)浮动:让多个盒子(div)水平排列成一行原创 2021-10-30 21:50:35 · 47 阅读 · 0 评论 -
08-CSS高级技巧(元素的显示与隐藏、CSS用户界面样式、vertival-align、溢出文字省略、精灵技术、滑动门)
CSS高级技巧原创 2021-11-01 16:55:06 · 225 阅读 · 0 评论 -
09-实战拓展(ico图标、图标字体、网站优化三大标签、logo优化、过渡transition、:focus获取元素焦点)
实战拓展1. 网站ico图标2.网站优化三大标签3. 图标字体3.1 字体图标优点3.2 字体图标使用流程3.3 设计字体图标3.4 上传生成字体包3.5 下载兼容字体包3.6 字体引入到HTML3.7 追加字体图标4. logo 优化1. 网站ico图标使用ico图标首先把favicon.ico 这个图标放到根目录下。再html里面, head 之间 引入 代码。<link rel="shortcut icon" href="favicon.ico" type="image/x-原创 2021-11-17 14:44:14 · 210 阅读 · 0 评论 -
10-HTML5CSS3①(新增部分、属性/结构伪类/伪元素选择器)
HTML5CSS3①1. 新增语义化标签2. 多媒体音频标签audio3. 多媒体视频标签video4. 新增input标签类型5. 新增input标签属性1. 新增语义化标签<header>头部标签<nav>导航标签<article>内容标签<section>块级标签<aside>侧边栏标签<footer>尾部标签(在IE9中会被当成行内元素,所以实际运用时需要添加display:block属性)2. 多媒体音频标原创 2021-11-19 15:36:47 · 105 阅读 · 0 评论 -
11-HTML5CSS3②(2D转换)
HTML5CSS3②(2D转换)2D转换1. 2D转换之移动translate2. 2D转换之旋转rotate3. 2D转换中心点transform-origin4 .2D转换之缩放scale2D转换2D 转换:2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scale1. 2D转换之移动translatetransform: translate(x, y)transform: translateX(n)transfrom: tran原创 2021-11-19 19:13:30 · 279 阅读 · 0 评论 -
12-HTML5CSS3③(3D转换、浏览器私有属性)
HTML5CSS3③(3D转换)原创 2021-11-20 19:07:31 · 231 阅读 · 0 评论 -
13-移动web开发-流式布局
移动web开发流式布局1. 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 常见移动端屏幕尺寸1.4 移动端调试方法2. 视口2.1 布局视口layout viewport2.2 视觉视口visual viewport2.3 理想视口ideal viewport2.4 meta标签3. 二倍图3.1 物理像素&物理像素比3.2 背景缩放background-size4. 移动开发选择和技术解决方案4.1 移动端主流方案4.2 移动端技术解决方案4.3 移动端大量使用 CSS3盒子模型box-原创 2021-11-24 19:34:38 · 188 阅读 · 0 评论 -
14-移动web开发-flex布局
移动web开发-flex布局1. flex布局原理2. 父项常见属性2.1 flex-direction设置主轴的方向2.2 justify-content 设置主轴上的子元素排列方式2.3 flex-wrap设置是否换行2.4 align-items 设置侧轴上的子元素排列方式(单行 )2.5 align-content 设置侧轴上的子元素的排列方式(多行)2.6 align-content 和align-items区别2.7 flex-flow 属性是 flex-direction 和 flex-w原创 2021-11-28 21:27:18 · 73 阅读 · 0 评论 -
15-移动web开发-rem布局
移动web开发-rem布局原创 2021-11-30 18:56:51 · 151 阅读 · 0 评论 -
16-移动web开发-响应式布局
移动web开发-响应式布局1. 响应式开发1.1 响应式开发原理1.2 响应式布局容器2. Bootstrap2.1 Bootstrap简介2.2 Bootstrap优点2.3 Bootstrap版本简介1. 响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备划分尺寸区间超小屏幕(手机)< 768px小屏设备(平板)>= 768px ~ < 992px中等屏幕(桌面显示器)&g原创 2021-12-03 15:15:46 · 76 阅读 · 0 评论 -
common.css
common.css配置/* 字体图标资源引入 */@font-face { font-family: 'iconfont'; /* Project id 3243582 */ src: url('...') format('woff2'), url('...') format('woff'), url('...') format('truetype');}.iconfont { font-family: 'iconfont';}/* 通配去除默认内外原创 2022-03-28 09:24:17 · 569 阅读 · 0 评论