css
遇见小美好
鹅厂程序媛,快乐运动派(♀️♀️)!享受生活&工作&运动&学习&分享的快乐!(*^▽^*)
展开
-
Flex弹性布局常用的属性解析与分类
Flex弹性布局常用的属性解析与分类原创 2024-09-11 15:52:26 · 262 阅读 · 0 评论 -
Flex弹性布局常用的属性分类
Flex布局是一种用于创建弹性布局的CSS模型。以下是Flex布局中常用的属性分类:1. 容器属性(应用于flex容器):2. 子元素属性(应用于flex子元素):原创 2024-05-19 23:21:17 · 165 阅读 · 0 评论 -
css 文本超过一行省略号显示、文本超过两行省略号显示
请注意,文本最多显示两行的这种处理方法目前仅在支持Webkit盒子模型的浏览器中有效,例如Chrome和Safari。对于其他浏览器如果不生效,您可能需要使用其他方法,例如使用JavaScript来实现类似的功能。-webkit-line-clamp是控制显示的行数,比如您想显示3行,改为3即可。原创 2024-05-19 23:05:56 · 891 阅读 · 0 评论 -
flex布局实现子元素在父元素中均匀分布
首先认识一下flex子元素的三个属性,这三个属性控制一个flex子元素的以下几个方面:flex-grow: 这个flex子元素得到(伸张)多少positive free space?flex-shrink: 从这个flex子元素要消除(收缩)多少negative free space?flex-basis: 在flex子元素未伸张和收缩之前,它的大小是多少?以上属性通常用一个简写属性flex 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ,fle原创 2021-06-18 17:16:01 · 5226 阅读 · 0 评论 -
前端js实现动画效果
今天我们来模拟animate动画库实现几个动画效果;首先,在html文件创建一个div元素作为运动物体吧☺️<div id="move"></div>其次,在css文件里写几个简单样式吧☺️#move { position: absolute; width: 30px; height: 30px; border-radius: 100%; background-color: red; }接下来,主要的运原创 2021-02-01 18:22:14 · 846 阅读 · 0 评论 -
Css实现单行文字水平居中多行文字左对齐
单行文字水平居中多行文字左对齐开发中经常遇到文案显示有这样的需求:单行文字水平居中多行文字左对齐。其实这个效果实现很简单,两行css代码就可以搞定啦。效果如下:使得p元素中的文案单行文字水平居中多行文字左对齐的效果。html文件:<div class="wrap"> <p class="content">这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测试文案这是测原创 2020-08-14 09:04:48 · 1377 阅读 · 0 评论 -
前端css+js实现自定义上传文件/图片按钮,并显示已选文件/图片名称
默认的文件上传按钮样式(如下图)确实不太好看,想展现得美观一些就自己写一个样式吧。下面我们做一个自定义的上传按钮效果,上传后把已上传文件/图片名称也显示出来。实现思路也很简单:1、先把原元素隐藏起来,自己写一个好看的按钮2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果(等同于触发了原input元素 )最终效果如下图:一、html部分代码:<div> ...原创 2019-07-23 18:13:22 · 5465 阅读 · 2 评论 -
纯css实现tooltip提示(鼠标hover显示提示信息)
工作中常常会遇到这样的需求:鼠标hover显示提示信息,这个常见的需求利用css的after伪类即可实现。举例效果如下:实现起来也非常简单。主要用到css的after伪类,把要显示的内容放到 content属性里即可。示例代码如下:html部分:<table border="1"> <thead> <tr>...原创 2018-11-29 21:43:24 · 15849 阅读 · 3 评论 -
使用link与@import引入css文件用法区别
页面导入外部css文件的方法通常有两种,一种在网页中直接link标签加入,另一种在页面中@import引入css文件。两种引入形式如下: link引入形式:<link href="styles.css" type="text/css" />@import引用形式:<style type="text/css">@import url("styles.css");</style>原创 2017-04-27 17:22:09 · 2805 阅读 · 2 评论