css
请告诉他
日日行,不怕千万里;常常做,不怕千万事。
展开
-
自定义 input checkbox的勾选颜色
只需要加入如下代码,将input[type=checkbox]的样式做一些修改即可。需求:将勾选列表的勾选颜色符合页面整体样式,都为淘宝的橘红色。原创 2023-01-30 13:57:12 · 2602 阅读 · 1 评论 -
解决SassError: Invalid CSS after “}“: expected selector, was “,“
啊哎!更新了HBuilder之后,项目报错了,以前的页面,且看错误1 请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。若要正式发布,请点击发行菜单或使用cli发布命令进行发布08:40:17.896 小程序各家浏览器内核及自定义组件实现机制存在差异,可能存在样式布局兼容问题,参考:https://uniapp.dcloud.io/matter?id=mp08:40:17.897 正在编译中...08:40:48.774 Module build原创 2022-05-08 09:05:30 · 6935 阅读 · 0 评论 -
css设置div背景图片大小,适应宽度
问题:background-size:属性的auto值对于显示图像的原始大小(长度和宽度)很有用。 也是默认值。原创 2021-06-08 09:46:08 · 5957 阅读 · 0 评论 -
一篇解决Element ui密码框眼睛图标明文密文,不允许中文输入以及输入的各种校验
先上效果,再上代码,后面有说明HTML <el-form-item label="新密码" prop="cpPassword" style="margin-left: 13px;"> <el-input v-model="supplierEx.cpPassword" :type="pwdType2" placeholder="请输入密码" @keyup.enter.native="login"> <i slot...原创 2021-01-29 17:16:31 · 3183 阅读 · 4 评论 -
Injection “elForm“ not found
使用element ui的控件报错如下报错误代码:修正后:<el-form> <el-form-item label="Asn Time:"> <el-date-picker v-model="roCondition.startCreatedate" type="daterange" range-separator="To" ...原创 2021-01-14 09:31:17 · 4901 阅读 · 5 评论 -
css flex布局超长自动换行
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上。默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器,那么 flex 项将按比例缩小,直到它们适应 flex 容器宽度演示:找一个页面敲击f12,找到div内多个div的元素组合,声明flex 并width:900px;给予定宽好让后面实践自动换行的功能同样的:通过控制台的css进行样式的调整,如下得到:很明显,印证了.原创 2021-01-08 11:27:42 · 46107 阅读 · 2 评论 -
完美解决input 类型checkbox复选框不显示的问题
问题:谷歌浏览器下,checkbox复选框不现实出来F12查看实际界面显示问题分析:可能是样式冲突或者其他,f12查看样式如下将margin:0px;去掉,加入-webkit-appearance: checkbox具体如下最终效果:...原创 2021-01-08 10:49:46 · 8173 阅读 · 0 评论 -
Jquery结合css写开关按钮,拨动开关
Jquery结合css写的开关效果CSS.choose-btn2 { display: none; }.choose-label2 { box-shadow: #b1b1b1 0px 0px 0px 1px; width: 52px; height: 26px; display: inline-block; border-radius: 16px; position: relative; background-color: #bdbdbd; overflow: hid...原创 2020-11-03 14:31:24 · 1114 阅读 · 0 评论 -
解决ul中li设置宽高无效的问题
问题:ul中的li 设置样式display:inline; 如果再设置 width:105px; height:56px;怎么调整都不会有影响解决:将display:inline;换成flot: left; 问题得到解决原创 2020-09-30 15:17:52 · 4371 阅读 · 4 评论 -
浮动的页面导航栏来说说怎么用js写页面跟随块
比如说一个导航栏,页面上下滚动的时候,保持一直显示如果此时顶行上面个还有其他的div那么有 //跟随快 $(window).scroll(function () { var s = $(document).scrollTop(); var trh=$(".allbox").height()+$(".conentbox").height()+$('.banner-img-01').height();// var trh=4..原创 2020-09-27 14:34:55 · 237 阅读 · 0 评论 -
div外点击,让该div消失
借助jquery来实现这个简单的小功能依赖<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>Html<div> <div class="r-input-t" style="background:red;width:20px;height:30px;" onclick="click1()"> 点我 <...原创 2020-09-23 15:34:36 · 879 阅读 · 0 评论 -
div弹出框加遮罩完整版,复制粘贴就能用
先上效果,后面的代码为了让样式复制不那么麻烦,我尽量多写在行内上一版本比较复杂,结合了js ,ajax请求和诸多交互的js代码点击了解上一版本这版本是js只管弹出窗体以及遮罩/** * 点击弹出框的地方 */function moreWhInfo() { $("#MyDiv").show();//弹出窗体 $(".mask").show(); //遮罩层};//关闭弹出层$(".closeBtn").click(function () { ..原创 2020-09-23 09:46:29 · 1357 阅读 · 3 评论 -
js动态替换img图片地址以及attr()的常用功能
$(".imgclass").attr('src',imgSrc)先上效果需要引入jquery依赖<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>html<div class="r-input-t"><li><img src="/images/djimart/footer/Singapore.png" alt=""/&g...原创 2020-09-22 14:58:20 · 4617 阅读 · 1 评论 -
用一个导航菜单的案例说一下css带三角的对话框怎么写
先看效果图这里的效果是,鼠标指向Help导航的时候,出现一个对话框形式的子菜单先看html,行内样式是我为了布局做的一些小修改,自己项目中根据个人项目修改Html<%--Help--%><li class="loginLiFour" style="text-align: center;width: 65px;"> <a href="javaScript:;" target="_blank" class="menu_a clear" s..原创 2020-09-17 11:32:20 · 192 阅读 · 0 评论 -
分享一个css颜色比较好看的边框渐变
在想加入边框渐变的html元素加入这行css box-shadow: 0px 0px 13px 1px rgba(51, 51, 51, 0.1);效果是这样的原创 2020-09-15 16:47:17 · 814 阅读 · 0 评论 -
js实现页面上下滚动跟随块
背景:页面列表底部存在一些操作按钮,列表太长时候超过了显示器高度,需要滚动列表到最底部才能看到这些按钮进行操作需求:列表没超过屏幕高度时候,这些按钮处于列表底部30px处,列表超出屏幕高度时候,这些按钮距离屏幕底部0px处,跟随页面滚动。下图红色箭头所示这个按钮区域为正常显示状态页面网上滚动效果如下HtmlCSS/*块跟随*/.list-bottom{ position: fixed; bottom: 20px; width...原创 2020-09-03 11:29:46 · 1170 阅读 · 0 评论 -
利用div也能写出漂亮的表格
需求Html<div class="bottom-list"> <div style="margin-bottom: 3px; font-size: 20px;color: #333;">Payment and Settlement</div> <div style=" background:#f9f9f9;display: flex;justify-content: center;"> <div clas.原创 2020-09-01 09:42:39 · 4047 阅读 · 0 评论 -
a标签下划线的距离问题
需求a标签下划线距离太接近了,需要调整一下页面代码<p class="text_align_r"> <span class="ordersave_info"> <s:text name="order_submited_tip"/></span> <a href="/to_be_signed.html"><s:text name="order_submited_a_tip"/></a></p&原创 2020-08-29 10:54:51 · 3592 阅读 · 0 评论 -
css三角形写法
准备好html代码<div class="c-tit" style="display: flex;"> <div>采购方/Party A</div> <div class="marks"></div><div style="background: #f0f0f0"></div></div>给marks添加样式width: 0px;height: 0px;borde...原创 2020-08-27 15:06:31 · 186 阅读 · 0 评论