![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
前端J先生
三千弱水,只取一瓢饮,独爱一人,岗位千千万,惟爱前端!!!
展开
-
前端配色大全
███ 19CAAD ███ D6D5B7 ███ 8CC7B5 ███ D1BA74 ███ A0EEE1 ███ E6CEAC ███ BEE7E9 ███ ECAD9E ███ BEEDC7 ███ F4606C原创 2022-05-25 14:21:47 · 915 阅读 · 0 评论 -
flex布局俩端排列只有2个元素的解决方案(亲测有效)
只能用于三元素,如果有其他更好的方案,可以提稿,感谢 ul { display: flex; flex-wrap: wrap; justify-content: space-between; } ul::after { content: ''; width: 子元素的宽度; border: 1px solid transparent;}...原创 2022-04-29 11:11:25 · 1052 阅读 · 0 评论 -
滚动条原生样式修改(亲测有效)
浏览器原生滚动条样式太丑? 无法满足老板||客户||甲方||主管的需求?怎么办?点开我的文章你值得一看哈哈哈!!!有没有熟悉的洗脑配方,不墨迹上代码 // 滚动条样式 选择器::-webkit-scrollbar { width: 8px; height: 8px; } /*正常情况下滑块的样式*/ 选择器::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.05); border.原创 2022-04-23 17:25:06 · 1908 阅读 · 0 评论 -
Grid布局实现日历操作(未来前端发展方向)
grid是目前前端发展趋势,下面是一个小demo,可以清晰的看出来grid多么方便。//html<div class="calendar-wrapper"> <h1>Decemeber</h1> <ul class="calendar"> <li class="weekday">一</li> <li class="weekday">二</li> <li class=".原创 2020-12-31 20:26:25 · 442 阅读 · 0 评论 -
前端需要完完全全掌握的这些布局方案
前端布局方案有以下几种:固定布局百分比布局/流式布局响应式布局弹性布局flex布局固定布局固定布局是最简单的布局,也是小白上手最快的布局,直接设置宽度值和高度值进行布局,不需要考虑是否跟随屏幕大小变化的布局方案,最能展现出网页设计的原始效果。布局单位:一律采用px优点:上手快,布局简单,没有任何兼容性问题。门户网站和企业网站更多会采用这种布局方案,因为他们的设备尺寸一般都是固定的。缺点:不会自适应屏幕大小。高分辨率的设备,固定布局会留下很大的空白,会出现‘黄金比例’.原创 2020-12-19 18:24:13 · 381 阅读 · 1 评论 -
透明色属性背景色
//背景色属性 background-color: transparent; //字体 color:transparent;原创 2020-12-10 15:57:42 · 679 阅读 · 0 评论 -
2020年疫情追悼日全网站灰色
第一种方式通过js实现//需要引入jquery<script> // 当前的时间 var nowTime = new Date().getTime(); // 设置好结束时间 var overTime = new Date('2020/04/05 00:00:00').getTime(); // 如果当前时间小于了结束时间 if (nowTime < overTime) { // 4.把html 设置灰色滤镜 .原创 2020-12-09 17:33:17 · 323 阅读 · 0 评论 -
移动端去掉a默认样式的代码
复制一下代码就可以 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none;原创 2020-12-09 11:01:34 · 217 阅读 · 0 评论 -
rem布局教程最详细(菜菜出品,必出菜品第二季)
11111原创 2020-12-07 10:01:43 · 209 阅读 · 0 评论 -
css常用代码手册(菜菜出品!!!必出菜品)
菜菜css代码手册文字篇文字平均分布空间文字篇文字平均分布空间text-align-last: justify;原创 2020-11-28 18:51:22 · 122 阅读 · 0 评论 -
页面布局之边框
如何让边框重合,采用相对定位并往你想重合的位置移动,即可重合改掉无边框衔接,根据上一步重合之后,边框的设置成背景色即可原创 2020-11-10 14:38:14 · 235 阅读 · 0 评论 -
清除浮动的几种方案
浮动会导致元素脱离文档流,内容没有父盒子进行撑开,后面的内容顶上去,有以下几种方案第一种:给父盒子设置宽高第二种:给父元素设置 overflow:auto;第三种:给父元素设置 overflow:hidden;本意是将超出父类的部分隐藏但是给浮动加了之后子盒子会撑开父盒子偏方第四种:clear:both清除clear:both//写过这个之后会出现magin无效的情况//可以在加上此属性的类名上在添加一个类名添加高即可解决第五种单伪元素清除:after{content:“ ”原创 2020-11-09 10:16:26 · 263 阅读 · 0 评论 -
display:inline-block的BUG处理
display:inline-block的BUGdisplay:inline-block;会默认把文字间的空格和换行进行处理,导致元素俩边有边距,通过删除代码之间的空格或者换行又不美观。解决方案:给父元素设置font-size:0;然后在给子元素上单独设置元素大小即可解决。...原创 2020-11-09 09:19:23 · 200 阅读 · 0 评论 -
去除a标签的默认点击灰色背景
直接上代码:a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; outline: none; background: none; text-decoration: none; }原创 2020-10-29 18:01:42 · 471 阅读 · 0 评论 -
input层级过高穿透的解决方案!!!
未解决之前:解决之后:因为微信小程序默认就是原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的层级是最高的,官方的解决方案也不行,最后通过几行代码解决。把下面那个层级较低的盒子,给他固定定位,定位到屏幕下方,层级设高一点就行了 position: fixed; left: 0; bottom: 0; z-index: 9999;...原创 2020-10-16 19:23:48 · 2671 阅读 · 1 评论 -
通俗易懂讲解为什么设计稿都是750px!!!
相信很多做前端的有时候很好奇为什么设计稿都是750px,查了好多资料也懵懵懂懂的,我也是这样的,经过自己查阅文档,我将自己理解的告诉大家,不妥之处请大神指出,将十分感谢!!!第一点:手机像素手机像素是逻辑像素也就是pt,1pt等于2px第二点:物理像素设计稿普遍给的都是物理像素,也就是px第三点:为什么不给pt像素呢因为css像素普遍使用率最高就是px像素,苹果手机屏幕为二倍高清屏,显示更为清晰第四点:为什么没有比750还大的设计稿呢因为人类的视觉分辨最大就是750,给在大的设计稿在手机上你原创 2020-10-11 09:35:17 · 5260 阅读 · 0 评论 -
聊一聊像素单位的那些事?
px相对单位页面中最常用的em相对于父级文字大小进行换算的.btn{font-size:20px;}.btns{width:3em;}上面代码:btn是btns的父级,宽度3em等于3*20pxrpx微信小程序中的自适应单位,可以适配屏幕大小1rpx=2pxvh相对于屏幕来说的,1vh就是屏幕高度的百分之一vw相对于屏幕来说的,1vw就是屏幕宽度的百分之一upxuniapp中的单位,和rpx一个性质rem相对于根字体大小...原创 2020-10-10 20:29:13 · 196 阅读 · 0 评论 -
css选择器的那些类型
CSS选择器分类第一种:简单选择器1.通用选择器:{}2.元素选择器:元素{}3.id选择器 #id名{}4.类选择器 .类名{}5.群组选择器:选择器1,2,…n{}6.后代选择器:选择器1 选择器2…{}7.子代选择器:选择器1>选择器2…{}8.伪类选择器:①元素:link 未访问时;②元素:visited 访问后;③元素:hover 鼠标悬停;④元素:active 元素激活状态下;⑤元素:focus 获得焦点时;二、复杂选择器1.兄弟选择器①相邻兄弟选择器:选原创 2020-05-26 18:03:47 · 771 阅读 · 0 评论