css
关注
分享
扫一扫
小皮皮不皮
记录自己工作中遇到的一些问题，和经常会用到的一些东西，方便以后使用。
展开
-
img图片自适应
展示多个图片就像微信朋友全一样，但是图片大小不一样所以我们需要将图片处理一样让他在规定的元素盒子里面。原创 2024-06-19 10:58:02 · 221 阅读 · 0 评论 -
点击菜单内容显示对应区域，滚动菜单也变化
以前写过一个案例，终于用到了项目中，这个是升级版考虑了点击的时候内容要显示对应的区域，内容区域滚动的时候菜单也会随着变化<template> <div class="box"> <div class="menu"> <ul> <li v-for="(item, index) in list" :key="index" :class="{ ac原创 2023-04-22 17:18:58 · 463 阅读 · 0 评论 -
类似swiper 得一个内容滚动
实际使用过程中有点击事件加 .stop 阻止冒泡。原创 2023-04-22 17:15:29 · 195 阅读 · 0 评论 -
中间标题名字，两边有线
【代码】中间标题名字，两边有线。原创 2023-04-20 14:11:05 · 99 阅读 · 0 评论 -
移动端自适应但用户修改了手机的字体大小，导致项目中样式错乱
用户的手机设置了字体大小，会改变项目中得样式原创 2023-03-03 18:27:08 · 768 阅读 · 0 评论 -
元素垂直水平居中
控制元素垂直水平居中原创 2023-02-16 11:43:58 · 85 阅读 · 0 评论 -
项目换肤具体流程
项目实现自定义换肤原创 2022-09-29 16:53:58 · 297 阅读 · 0 评论 -
css类似于打马赛克
对内容进行保护，打马原创 2022-09-29 16:17:35 · 578 阅读 · 0 评论 -
css不换行
// 强制不换行p{ white-space:nowrap;}// 自动换行p{ word-wrap: break-word; word-break: normal;}// 强制英文单词断行p{ word-break:break-all; //*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。 }设置强行换行：word-break:normal ; //依照亚洲语言和非亚洲语言的文本规则，允许在字内换行break-all : /.转载 2022-03-22 14:50:21 · 2924 阅读 · 0 评论 -
css 控制图片的亮度
一个图片做的原有的图片基础上高亮相当于多了一个状态，可以再ui没有给hover状态时可以用它来代替可以省去引入图片的麻烦，-webkit-filter: brightness(150%);filter: brightness(150%);原创 2022-02-10 10:18:55 · 1843 阅读 · 0 评论 -
标签排列内容不统一，一行显示不了就自动换行
ul { width: 50%; display: -webkit-flex; /* Safari */ display: flex; flex-wrap: wrap; align-content: stretch; } ul li { max-width: 33%; height: 30px; padding: 5px 10px; ...原创 2021-04-27 15:01:09 · 1503 阅读 · 0 评论 -
calc, support, media各自的含义及用法？（面试题）
@suppor： CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。下面就来说一下@support的用法：1.基本语法是这样的：@support(prop:value){ }@supports(display: fl...原创 2021-04-13 09:41:27 · 376 阅读 · 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&g原创 2021-04-09 16:42:56 · 167 阅读 · 0 评论 -
css3 多种边框样式
<!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> .div { ...原创 2021-02-05 17:05:26 · 742 阅读 · 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> div{ ...原创 2021-01-22 16:27:06 · 426 阅读 · 0 评论 -
解决input.value text-overflow: ellipsis失效问题，分享一下
解决文本框设置的text-overflow: ellipsis失效的问题bug再现:当选择完级联面板内的所有文本时，input框的value值总体宽度超出input宽度时，是正常显示省略号的。接下来如果再点击input框，就会出现text-overflow: ellipsis失效，导致tinput框内的value值后面没有省略号，使得完全展现。鼠标点击事件触发的顺序:mousedown ->mouseup ->click ->mousedown ->mouseup..原创 2020-09-04 17:42:01 · 1311 阅读 · 1 评论 -
原生css样式实现简单的变量定义
以前都是使用sass, less来定义变量，通过变量来控制一些公共的样式，看了一篇后发现原来css也可以直接使用写了一个小demo，先看一下效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2020-07-24 15:09:01 · 526 阅读 · 1 评论 -
添加阴影渐变背景颜色，添加斜角
background: linear-gradient(to right, #2499eb, #1d6bb6);background: linear-gradient(to bottom, #49e6ff, #2495ff); box-shadow:0px 0px 5px 2px #cccc;原创 2020-06-24 10:30:20 · 446 阅读 · 0 评论 -
文本不换行，多余的内容显示省略
/**有时候经常会在一些提示标题中或者表单 、表格中用到，或者实现一个留言效果的时候，可以像微信一样当字数多得时候使用省略号来隐藏部分内容，当我要看全文的时候，点击查看讲内容全部展开，具体方法就不说了，下面给大家两种实现文本不换行，多余的显示省略号得代码 两种有时候有着不同的用途，具体使用方法就不多说了**/<!doctype html><html lan...原创 2019-10-24 18:08:37 · 4923 阅读 · 0 评论 -
锚点链接及js代码实现
/**有同学出现过这种情况，要做一个楼层效果，但点击楼层中标题的时候就相关得内容出现在屏幕中心，对我而言，能使用css实现得效果尽量不会使用js来完成。**//*但是有些情况还是使用到，所以就css锚点链接和js都写了一下，放到一块儿，**/<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2018-07-12 15:39:08 · 7462 阅读 · 0 评论 -
css样式简单得代码实现吸顶效果（粘性定位）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0; padding: 0;}原创 2018-07-12 15:29:48 · 5816 阅读 · 1 评论 -
导航栏（css教程里的，感觉以后可以这样用，没有使用浮动）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>导航栏</title> <style> body { margin: 0; }转载 2018-07-12 17:00:21 · 433 阅读 · 0 评论 -
按钮按压效果（css3实现，注:IE9以前不兼容）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>按钮按压效果</title> <style> .button { display: inline-block;转载 2018-07-12 17:00:38 · 2170 阅读 · 0 评论 -
当布局中遇到ul li 每个li前面都有一个小icon时，一句css搞定
/**这种情况好多人得布局方法都不相同，有的是加个i标签，用来放图片;有的是用伪类after 或before 在上面加图片;等等。。。。。。那么我现在叫大家一个特别简单得css，不用加标签，不用伪类，只要一句搞定，好了上代码效果图*/<!DOCTYPE html><html lang="en"><head> <meta charset="UT...转载 2018-07-12 17:31:17 · 2745 阅读 · 1 评论 -
通过属性来设置样式
/**一般我们都是通过标签或则类名，id名来设置样式，很少会用属性，那么让大家看看用属性来设置得方便的地方，form表单中经常用的就是input button 了，那么这会儿我们就可以用这个来通过属性给他改变样式了，*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...转载 2018-07-12 17:35:53 · 685 阅读 · 0 评论 -
设置比1px还细的线
/**这个的话一般手机端会使用的比较多**/正常情况浏览器100%： 当浏览器500%的时候，顺序不变,颜色都是用的black，所以还是有区别的，具体看工作中需要那种 <!doctype html><html lang="en"><head> <meta content="width=device-width, ...原创 2018-07-13 09:39:16 · 2180 阅读 · 0 评论 -
当你想一个div的高随着屏幕的高度变化
有些时候我们的Dear总会有一些无理的要求,然后我们还不得不去解决,那么如何让一个div的高随着浏览器的大小来变化呢?尤其是打开浏览器再打开控制台,然后关闭之后,我们会发现,div的高不变化了,就是打开控制台时那么大.那么下面的就是解决办法,具体如何使用自己研究吧!!! height:calc(100% - 60px); ...原创 2018-11-20 16:04:44 · 2068 阅读 · 0 评论 -
css 绘制半圆，三角形，疑问框，半圆弧线，必填项 *
样式图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-05-10 14:20:28 · 2473 阅读 · 2 评论 -
文本两端对齐及将表单打印在A4上
/**工作中遇到一个问题就是 单位看到一些有关公司得相关得事项，想要讲内容打印出来，所以前端设计了一个样式，但是还是有很多不足的地方，暂时没有想到更好的方法，如：一些字体要求是特殊字体，没有办法为了几个字而去安装实现，所以全部采用了图片;由于前端没法计算A4纸的大小，所以一点一点摸索通过屏幕px实现了当内容不多，还是打印一张完整A4上,这也导致了当内容使其超过A4纸到了第二张纸上使无法头部加上...原创 2018-07-12 16:09:13 · 321 阅读 · 0 评论