css
关注
分享
扫一扫
css
发呆的小蔡°
一度想要放弃却还在继续坚持的程序媛……
展开
-
CSS 实现鼠标移动到图片上图片变大，不改变盒子大小
CSS 实现鼠标移动到图片上图片变大，不改变盒子大小原创 2023-03-02 18:04:47 · 4605 阅读 · 2 评论 -
CSS---动态向下的循环箭头动画效果
CSS---动态向下的循环箭头动画效果原创 2023-02-15 17:43:20 · 4710 阅读 · 0 评论 -
html写出带有表格标题的三行三列表格
介绍HTML里，可以使用 table 标签及它内部的属性 tr,td,th等就可以快速生成一个表格。具体如下：效果图相关属性介绍一个简单的 HTML 表格由table元素以及一个或多个 tr、th 或 td元素组成。<caption> 标签： 定义表格的标题，必须直接放置到 <table>标签之后<tr> 标签： 定义表格的一行<th> 标签： 定义表格的表头，以粗体的形式显示<td> 标签： 定义单元格标签代码<原创 2022-01-14 16:54:57 · 5458 阅读 · 0 评论 -
伸缩布局中，flex: 0 0 auto 是什么意思
介绍在页面开发当中，经常使用到 flex 伸缩布局；很多人经常使用到 flex 的这一属性， flex： 0 0 auto 或者 flex： 0 1 auto 或者 flex： 1 0 auto 或者 flex： 0 0 10% ………… 但是大多数人都不太清楚这一属性的含义，下面主要介绍一下，这一属性的使用方式，以及含义：定义如上面的 flex： 0 1 auto ， 这一属性，flex后面跟了三个值，这三个值实际上是 flex-grow ，flex-shrink ，flex-basis 三个原创 2022-01-07 14:17:32 · 8367 阅读 · 0 评论 -
backdrop-filter 与 filter 模糊效果的区别
介绍使用 backdrop-filter 与 filter 都可以写出高斯模糊的效果，但是两者使用起来还是有区别的，而且使用的目标也不同，具体介绍如下：区别backdrop-filter： 使背景模糊，不会影响到背景下面的图片filter ： 通常是定义 img的可视效果 ，修改图片的模糊效果，值越大越模糊效果两者的使用效果如下：backdrop-filter：filter ：代码backdrop-filter：div { position: absolute;原创 2021-12-27 09:58:12 · 2749 阅读 · 0 评论 -
Flex布局设置一行显示多个
介绍在前端的页面开发里，经常在写列表页的时候，要展示成一行固定显示几个列表；这种情况，最常使用 flex布局来做，具体效果图如下：效果图代码html: <!-- 一行显示五条数据，多余的自动换行，从第二行再开始排列 --> <div class="box"> <div class="list">列表1</div> <div class="list">列表2</div> <div class="l原创 2021-12-24 16:53:46 · 12903 阅读 · 0 评论 -
使用CSS将图标进行旋转无效
使用css将图标进行旋转的方法如下：html<!-- 向左的箭头 --><i class="icon-back"></i> 使用 css 的 transform 属性，将箭头进行旋转css// 向左的箭头 旋转为向下的箭头.icon-back { display: inline-block transform: rotate(-90deg)} 注意： 必须添加 display: inline-block 这个属性，否则会导致，旋转无效。.原创 2021-12-21 15:31:12 · 2071 阅读 · 2 评论 -
html文字超过部分显示为省略号
介绍为了保证页面的整洁美观，有时候，页面当中文字过长的时候，需要使用 ... 来显示，代码如下：单行文本溢出对于单行文本，想要将溢出的文字用 ... 显示，可以设置 text-overflow: ellipsis 就可以得到解决，并且这个属性所有浏览器都支持，具体代码如下：html: <div class="content">为了保证页面的整洁美观，有时候，文字内容太多，我们需要在一定宽度内显示文字，超出宽度的文字内容隐藏，并且显示省略号，</div>css:原创 2021-12-08 14:19:17 · 11611 阅读 · 0 评论 -
html+css实现三角形
介绍通过 html + css , 实现不同方向的三角形效果图需求背景现在经常会发现很多网页上的导航, 分类页等页面, 都会使用一个三角符号去指向内容，效果简洁美观 ; 并且现在很多的前端面试中, 也会问到怎么在网页当中实现一个三角的符号，所以自己做了, 各个方向的三角符号, 记得收藏哦~代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2021-01-30 17:42:47 · 570 阅读 · 2 评论