css
关注
分享
扫一扫
小星落
欲买桂花同载酒
终不似少年游
展开
-
解决div 元素中 image标签 图片底部留白
出现原因：图片的display属性默认是inline，这个属性的vertical-align的默认值是baseline。所以图片底部会出现一个小留白区域。解决方法：方法1：设置图片为块状元素 display:block;方法2：修改vertical-align:middle;...原创 2021-12-10 16:48:16 · 789 阅读 · 0 评论 -
瀑布流图片布局 xGallerify 一款轻量级响应式jQuery图片画廊插件
xGallerify是一款轻量级响应式jQuery图片画廊插件。该图片画廊插件会根据图片的尺寸智能生成网格布局，并且可以动态的添加图片。它具有响应式，易于实现等特点。使用方法使用该图片画廊插件需要在页面中引入jquery和jquery.xgallerify.min.js文件<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="原创 2021-05-24 14:22:38 · 453 阅读 · 5 评论 -
CSS 给某字符串开头的类添加样式
<p class="box-1">111<p/><p class="box-2">22<p/><p class="box-3">33<p/><p class="box-4">44<p/><p class="box-5">55<p/>[class^="box-"] { background--color: pikk;}原创 2021-05-24 13:47:10 · 559 阅读 · 0 评论 -
html 全英文或数字不换行
css设置 word-break:break-all;原创 2021-04-29 16:36:10 · 208 阅读 · 0 评论 -
html 与 css 画哆啦A梦
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>哆啦A梦</title> <style type="text/css"> .big { width: 500px; height: 530px; position: absolute; .转载 2021-03-09 09:59:44 · 2506 阅读 · 0 评论 -
css 超出显示省略号
单行超出显示省略号.box{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; }多行超出显示省略号1、css实现多行文本超出省略号之直接用css属性设置(只有-webkit内核才有作用)移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；.box{ overflow:hidden; text-overflow:ellipsis; displa原创 2021-03-09 09:35:55 · 4086 阅读 · 0 评论 -
html——注释（单行注释 多行注释）
HTML注释： <!-- <p>这是单行注释</p> --><!-- 这是多行注释 这是多行注释 这是多行注释--> JS/jQuery注释： //这是单行注释/* 这是多行注释 这是多行注释 这是多行注释*/ css注释： /*这是单行注释*//* 这是多行注释 这是多行注释 这是多行注释*/...原创 2021-02-20 12:07:42 · 8979 阅读 · 0 评论 -
css自定义滚动条颜色
针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式滚动条组成部分::-webkit-scrollbar 滚动条整体部分. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。::-webkit-scrollbar-trac原创 2021-01-15 11:37:41 · 592 阅读 · 0 评论 -
小程序去掉button 默认样式
/* 去除button默认样式 */button::after {border: none;}button {background-color: transparent;padding-left: 0;padding-right: 0;line-height:inherit;}button {border-radius:0;}原创 2021-01-05 18:54:18 · 590 阅读 · 0 评论 -
心形表白
查看效果git地址注：图片来源于网络，可自行替换对象图片反正我没有┭┮﹏┭┮原创 2021-01-05 10:36:37 · 158 阅读 · 0 评论 -
微信小程序修改radio组件自定义选中、未选中样式
根据自己项目要求修改颜色按钮大小即可radio .wx-radio-input { /* 自定义样式.... */ height: 24rpx; width: 24rpx; margin-top: -4rpx; border-radius: 50%; border: 2rpx solid #999; background: transparent;}radio .wx-radio-input.wx-radio-input-checked::before { bord原创 2020-12-30 14:48:19 · 1199 阅读 · 0 评论 -
flex基础布局属性
flex布局属性wps 文档 https://kdocs.cn/l/ceEQBvIDZHxOFlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（rem伸缩布局（转））连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题），布局还是要传统布局的。布局的传统解决方案，基于盒状模型，依赖display属性+position 属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2转载 2020-12-30 12:31:33 · 2198 阅读 · 0 评论 -
scss基础用法
安装npm install node-sass --save-dev //安装node-sass npm install sass-loader@7.3.1 --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader简单用法& 都代指父类变量是以 $ 开头的，可以是颜色，长度，数值，等等。像 js 的变量一样，scss 的变量也是有作用域的原创 2020-12-30 11:05:24 · 515 阅读 · 0 评论 -
grid九宫格布局
1、布局左右固定，中间自适应；左固定，右自适应；右固定，左自适应 -----见布局const app = Vue.createApp({})app.config.globalProperties.$md5 = () => {}2、九宫格CSS:.container{ display: grid; grid-template-columns:repeat(3,1fr); grid-template-rows: repeat(3,1fr); hei原创 2020-12-30 10:00:35 · 995 阅读 · 0 评论