css
关注
分享
扫一扫
加鸡腿
此人不懒,仍然什么都没有写
展开
-
nth-child选择前几个元素
渲染列表时，需要设置前3个元素的margin-top值与其他的不同：:nth-child(-n+3){ margin-top: 15px; }扩展选择前几个元素：/*【负方向范围】选择第1个到第6个 */:nth-child(-n+6){}从第几个开始选择/*【正方向范围】选择从第6个开始的 */:nth-child(n+6){}两者结合使用，可以限制选择某一个范围/*【限制范围】选择第6个到第9个，取两者的交集 */:nth-child(-n+9):nt原创 2021-03-19 20:44:01 · 387 阅读 · 0 评论 -
css样式例子
要求达到以下效果:代码如下：<p> <i><img src="sun.svg" alt="图标"></i> <span class="span1"> <span class="span11">啊啊啊：</span> <span class="span12">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span> </span></p>p {原创 2020-10-26 17:25:39 · 201 阅读 · 0 评论 -
十六进制颜色码深浅记录
个人在微调时候，有时并没有UI给图，只能自己找颜色，黑色深浅对比个人一些小总结如下，首先仍是示例：代码如下：<div class="div1"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"><原创 2020-10-26 14:13:11 · 1292 阅读 · 0 评论 -
CSS手写向下小三角（极简代码）
效果如下：代码极其简单：div { width: 0; border: 10px solid; border-color: #333 transparent transparent transparent;}<div></div>原创 2020-09-30 14:39:41 · 2356 阅读 · 0 评论 -
实现垂直居中布局
实现的效果：代码如下：.g-container { width: 100px; height: 100px; background-color: pink; display: flex;}.g-box { width: 20px; height: 20px; background-color: skyblue; margin: auto;}<div class="g-container"> <div原创 2020-09-27 11:28:39 · 112 阅读 · 0 评论 -
8款纯CSS3搜索框
效果如下：代码实现如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="http:/转载 2020-09-25 15:56:37 · 1462 阅读 · 0 评论 -
理解内联盒模型里的幽灵空白节点
“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。注意，这里有一个前提，文档声明必须是HTML5 文档声明（HTML 代码如下），如果还是很多年前的老声明，则不存在“幽灵空白节点”。例如：<!DOCTYPE html>转载 2020-08-17 16:10:23 · 547 阅读 · 0 评论 -
animation 里的steps函数
animation-timing-function 规定动画的速度曲线除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间, 动画效果是连贯性的。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式理解stepssteps函数指定了一个阶跃函数第一个参数指定了时间函数中的间隔数量（必须是正整数）第二个参数可选，接受 start和 end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。step-start等同于steps(1,转载 2020-08-17 16:04:53 · 2283 阅读 · 0 评论 -
CSDN中如何打出& n b s p ；不被编译
然后输入 即可显示出来原创 2020-08-17 14:42:21 · 219 阅读 · 0 评论 -
csdn中如何打出标签名？
在HTML 文档中用于划分标记的一对符号，其中，< 用 < 表示，> 用 > 表示在CSDN 里写博客也是遵循以上的规则，例如：打印出< abc > 便可以得到<abc>。参考：CSDN 如何写出标签符号<>?...转载 2020-08-17 14:39:26 · 266 阅读 · 0 评论 -
“正在加载中...”CSS效果实现
先上代码：dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;}dot::before{ display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot转载 2020-08-17 14:05:59 · 1911 阅读 · 0 评论 -
导航栏中的分隔符实现方法
在一个网页上，尤其是导航栏文字与文字之间，大多数情况下都会有分隔符，也就是文字之间的一个小竖线，这个小小的分隔符，每个网站都有不同的样式，常用的写法就是用标签的边框，这个写法也比较简单，用起来也方便，但是，却满足不了越来越绚丽的网页，很多情况下用标签的边框是写不出来现有要的样式的，那就需要其他的写法，下面总结一些常见的，如有不足或者错误之处，欢迎大家批评指正。1、标签边框.这个写法比较简单，不需要额外增加HTML页面的结构，给标签一个左边框或者右边框，用css修饰一下即可。2、|这种写法就需要额外增转载 2020-08-11 11:13:11 · 2801 阅读 · 0 评论 -
文字少的时候居中显示，文字超过一行的时候居左显示
核心CSS 代码如下：.box { text-align: center;}.content { display: inline-block; text-align: left;}效果如下：原创 2020-08-04 17:24:38 · 375 阅读 · 0 评论 -
高度塌陷问题的解决方案
高度塌陷的原因：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。解决方法：法一. 将父元素的高度写死 缺点：父元素的高度将不能自动适应子元素的高度 不推荐法二. 给父元素末尾添加一个空元素，并设置成清除浮动 缺点：添加了无意义标签，不易于后期维护，违背原创 2020-07-28 15:02:57 · 473 阅读 · 0 评论 -
CSS样式自动换行（总结）
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>#wrap { white-space: normal;转载 2020-07-17 10:38:41 · 14840 阅读 · 0 评论 -
“首选最小宽度”与凹凸效果实例
首先看效果：“首选最小宽度”，指的是元素最适合的最小宽度。在CSS 世界中，图片和文字的权重要远大于布局.具体表现规则如下：东亚文字（如中文）最小宽度为每个汉字的宽度西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。例如，“display:inlineblock”这几个字符以连接符“-”作为分隔符，形成了“display:inline”和“block”两个连续单元，由于连接符“-”分隔位置在字符原创 2020-07-16 17:13:19 · 238 阅读 · 0 评论 -
VUE项目中CSS设置动态宽度的方法
网上找到三种方法：一、使用cumputed首先你务必看Vue的官方文档。涉及到的基础知识有：绑定内联样式的使用computed的使用文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案：需求场景：获取当前手机屏幕高度，设置container div的可滚动区域范围。step1: 添加样式绑定<div class="container" :style="{height: scrollerHeight}"></div>step2: 添加转载 2020-07-15 11:13:06 · 11608 阅读 · 1 评论 -
css选择器命名规则
在实际项目中，因为参与人员个人习惯不一样，导致写出的CSS选择器命名千奇百怪，对项目维护运营、内部技术沟通均产生了不利影响。因此在项目实施前，网页重构人员有必要统一CSS选择器命名规则，以期将更多精力放在其他工作上。1、W3C规范W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何I转载 2020-07-08 10:37:31 · 1749 阅读 · 0 评论 -
文字凸起效果
看《CSS揭秘》记录：主要思路是使用一连串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底层加一层强烈的暗投影，从而模拟完整的立体效果。如下 文字： <div> The only way to get rid of temptation is to yield to it. </div>添加的样式如下： div { background-color: #58a; color: #fff;原创 2020-06-29 23:31:15 · 460 阅读 · 0 评论 -
vue样式穿透
有时候在修改样式时，即便权重比较大还是起不了作用，网上查了方法，可以解决样式问题，如下：vue中的样式穿透法一：使用>>>外层 >>> 第三方组件{样式}.ant-card >>> .ant-card-head{ background: #fff}法一：使用/deep/外层 /deep/ 第三方组件 { 样式.ant-card /deep/ .ant-card-head{ background: #fff;}...原创 2020-06-29 22:09:36 · 289 阅读 · 0 评论 -
css毛玻璃效果
先上代码：<body> <main> <blockquote> "The only way to get rid of a temptation <footer>－ <cite> Oscar Wilde, The Picture of Dorian Gray原创 2020-06-01 20:55:55 · 591 阅读 · 0 评论 -
图片实现染色效果（基于滤镜和混合模式）
法一：基于滤镜sepia()，它会给图片增加一种降饱和度的橙黄色染色效果。如果我们想好的主色调的饱和度比这高，可用saturate()滤镜来给每个像素提升饱和度。若不希望把图片调为橙黄色调，而是稍深的亮粉色，还需再添加一个hue-rotate()滤镜，把每个像素的色相以指定的度数进行偏移。例子：<img src="husky.jpeg" alt=""></body>img { transition: .5s filter; filter: sepia(1原创 2020-05-31 19:59:15 · 524 阅读 · 0 评论 -
蚂蚁行军边框效果
先展示效果：静态代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .m原创 2020-05-24 23:22:10 · 234 阅读 · 1 评论 -
overflow-y未超出仍然显示滚动条解决办法
后端返回的数据有时多有时少，多的时候需要设置最大高度和滚动条显示，于是css样式如下：p { max-height: 100px; overflow-y: scroll; }效果：即使不超过这个高度，也会出现右边的滚动条，显然不是想要的。改进如下： p { max-height: 100px; overflow-y: auto; }效果是：...原创 2020-03-31 18:23:25 · 11100 阅读 · 5 评论 -
文字换行超过高度用省略号结尾
假如是展示一行，超出部分显示成省略号，则p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}假如是要求文字显示成2行，超出部分用省略号结尾，则p { display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-box-orient:...原创 2020-03-13 16:39:30 · 622 阅读 · 0 评论 -
csdn如何插入多列表格？
问题：点击插入表格只能插入两列问题效果图：如果我们想插入自己想要的表格效果该如何处理呢？首先可以百度Markdown 编辑器语法进行相关研究（由于自己基础薄弱，所以我就偷个懒，直接试验，得出想要的结果）直接输入英文的符号| ，上下对齐输入等量的|，初建n行n列的表格。其中的第二行表示n列文本的对齐格式（其中的冒号要使用英文冒号）。其中:- -:表示本列文本居中。其中:–表示文本左...转载 2019-11-21 11:40:12 · 2643 阅读 · 1 评论 -
nth-child选择器，选择指定的li
有了nth-child选择器，选择指定的li时候，就不用写额外的类名，如下： ul li { width: 20px; height: 20px; background-color: red; margin-bottom: 10px; list-style: no...原创 2019-06-19 20:29:50 · 2435 阅读 · 1 评论 -
超出给定宽度，字体显示成省略号
其实只需要用到三个样式：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...原创 2019-05-29 17:58:17 · 234 阅读 · 0 评论 -
样式调整之vertical-align
vertical-align属性设置元素的垂直对齐方式 vertical-align:text-top 把元素顶端和父元素字体的顶端对齐 vertical-align:text-bottom 把元素底端和父元素字体的底端对齐 vertica...原创 2019-04-07 14:28:24 · 293 阅读 · 0 评论 -
文本溢出显示成省略号
主要用到的有三个样式： white-space: nowrap; /* 强制文本在一行内显示 */ overflow: hidden; /* 溢出内容为隐藏 */ text-overflow: ellipsis; /* 文本溢出时显示省略标记 */...原创 2019-03-24 01:08:50 · 254 阅读 · 0 评论 -
css画三角形的变形
先看效果图：<style> * { margin: 0; padding: 0; } .box1 { float: left; position: relative; left: 0; top...原创 2019-03-24 01:02:10 · 383 阅读 · 0 评论 -
对offsetTop以及offsetLeft的理解
页面中的元素的offsetLeft是离其最近的已经定位的元素① 如果离其最近的元素没有定位，就相对于body元素计算例如： <style type="text/css"> .box1 { width: 100px; height: 100px; background: red; ...转载 2019-06-26 18:15:19 · 1257 阅读 · 0 评论 -
鼠标悬停，出现大问号
一、首先，这种情况用的是abbr标签eg:The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.页面效果：一般情况下和bootstrap结合使用，css样式如下：abbr[title] { cursor: help; border-bottom:...原创 2019-07-15 14:34:30 · 1157 阅读 · 0 评论 -
将图片作为背景
当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。img { width: 500px; height:...原创 2019-07-16 14:18:15 · 555 阅读 · 0 评论 -
css类名命名注意事项
短横线命名当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。...原创 2019-07-16 14:21:06 · 961 阅读 · 1 评论 -
设置font-family时需要注意的问题
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为宋体，可以使用如下CSS样式代码： <style> p { font-family: "微雅软黑"; } div { font-family: "宋体"; ...原创 2019-08-13 19:24:52 · 8218 阅读 · 0 评论 -
字体图标的引入和使用-svg是个好东西
第一步，拥有svg格式的图片途径一：ui给你途径二：自己去阿里巴巴下载网址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2下载下来的文件有：新建一个文件夹，里面放这些文件：第二步，效果展示①demo的html页面<!DOCTYPE html><html lang="en"...原创 2019-08-23 16:29:39 · 3448 阅读 · 0 评论 -
csdn如何换行（真实有效亲测可用）
输入以下代码即可：<p><span><span style="font-family:Verdana, Arial, Helvetica, sans-serif;line-height:19px;text-indent:26px;"><span style="font-size:14px;"><span style="font-family:...原创 2019-09-02 17:56:11 · 2589 阅读 · 0 评论 -
类名（1）
要加强权重，标签里有一个类名时，给它设置样式时，争取的方式：标签名.类名中间不能有空格<style> input.btn1 { background-color: green; } </style>```html<form action=""> <input type="b...原创 2019-03-24 00:42:53 · 165 阅读 · 0 评论