css
Khun_HWJ
这个作者很懒,什么都没留下…
展开
-
banner图宽度100% 高度不固定 实现轮播 position定位的问题解决
为banner的图片.banner img { position: relative; top: 0; left: 0; display: flex;}为轮播图下方的切换圆点.bannercirclebox { position: absolute; bottom: 0; left: 46%; z-index: 99; padding: 20px 20px 35px;}.bannercirclebox i { width: 8px; height: 8px; bac.原创 2021-09-14 11:00:37 · 371 阅读 · 0 评论 -
小程序拼团头像重叠效果 css
<view class='cdtouxiang'> <view wx:for="{{images}}" wx:key="id" style='transform:translateX({{-index*20}}rpx)'> <image src='{{item}}' mode='aspectFill'></image> </view></view>.cdtouxiang { width: 100%; hei.原创 2021-07-21 10:35:02 · 1237 阅读 · 1 评论 -
CSS writing-mode与text-indent文字下沉实例页面 点击文字下沉效果
点击 中间的“领”字就会稍微下沉一点<p>恭喜你中了88元红包!</p><a href="javascript:" class="btn verticle-mode">领</a>.btn { display: inline-block; color: #a78252; background-color: #ddc390; width: 85px; height: 85px; line-height: 85px;.原创 2021-02-21 15:36:56 · 204 阅读 · 0 评论 -
URL锚链锚点定位和overflow的选项卡切换效果实例页面
选项卡切换<div class="box"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div class="list" id="three">3</div> <div class="list" id="four">4</div></div><d.原创 2021-02-21 11:17:20 · 245 阅读 · 0 评论 -
html页面内容不足一屏 也出现滚动条 让页面滚动条不发生晃动小技巧
常用的解决方法有下面两种:一种是<table>元素使用固定的宽度值,但是距离右侧留有17px 的间隙,这样即使滚动条出现,也不会产生任何的宽度影响;另一种就是表格的最后一列不设定宽度(文字最好左对齐),前面每一列都定死宽度,这样最后一列就是自适应结构,就算滚动条出现,也只是自身有一些宽度变小,对整体对齐并无多大影响。然而,滚动栏占据宽度的特性最大的问题就是页面加载的时候水平居中的布局可能会产生晃动,因为窗体默认是没有滚动条的,而 HTML 内容是自上而下加载的,就会发生一开始没有滚动原创 2021-02-21 11:13:24 · 1487 阅读 · 1 评论 -
浏览器滚动条样式调整
滚动条是可以自定义的。因为 IE 浏览器的自定义效果实在是比原生的还要难看,就不浪费大家时间了,就此打住。倒是支持-webkit-前缀的浏览器可以说说。例如,对于 Chrome 浏览器:• 整体部分,::-webkit-scrollbar;• 两端按钮,::-webkit-scrollbar-button;• 外层轨道,::-webkit-scrollbar-track;• 内层轨道,::-webkit-scrollbar-track-piece;• 滚动滑块,::-webkit-scroll原创 2021-02-21 11:12:34 · 252 阅读 · 0 评论 -
css 基于 vertical-align 属性的水平垂直居中弹框
<div class="container"> <div class="dialog"> <div class="main">居中内容</dialog> </dialog></div>.container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); text-align: cen原创 2021-02-21 11:01:16 · 109 阅读 · 0 评论 -
css 修改列表项 li 显示的圆点的颜色
.centerbt li{ content:"."; color:gray;}扩展:css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} 符号名称可用的值为: disc : CSS1 实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman :转载 2021-02-01 10:47:20 · 2251 阅读 · 0 评论 -
微信小程序拼团头像叠加css 【亲测有效】
<image :src="item.avatar" class="view-avater-img" :style="{transform: `translateX(-${index*15}rpx)`}"></image>原创 2020-11-17 10:19:04 · 1398 阅读 · 0 评论 -
上传图片的样式
<a href class="add" title="继续上传"> 添加图片</a>里面 + 号的css写法.add { display: inline-block; width: 76px; height: 76px; color: #ccc; border: 2px dashed; text-indent: -12em; transition: color .25s; position: relative; .原创 2020-10-12 16:04:38 · 856 阅读 · 0 评论 -
浏览器滚动条样式自定义
::-webkit-scrollbar-thumb{ background-color: #e58a8a; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, trans.原创 2020-09-27 10:46:43 · 103 阅读 · 0 评论 -
伪元素制作“管道符“ |
.invitesuccess .box2 .line::before{ content: ""; font-size: 0; padding: 30px 70rpx 1rpx 0; margin-left: 6px; border-left: 1px solid gray;}.invitesuccess .box2 .line::after{ content: ""; font-size: 0; padding: 30px 0 1rpx 70rpx; margin-left: 6.原创 2020-09-16 10:32:03 · 111 阅读 · 0 评论 -
CSS flex弹性布局来做 页面底部自适应:页面高度不足时,在底部显示;页面高度超出时,随页面滚动(亲测有效)
布局方式按照这个来 就可以了<!-- 公共的父元素 --><div class="index"> <div class="container"> <!-- 你的页面内容 --> </div> <div class="foot"> <!-- 需要自适应的底部内容 --> </div></div>.index{ /* 设置父元素为flex布局 */原创 2020-09-07 11:20:50 · 938 阅读 · 0 评论 -
layui table 单元格高度自适应 超出自动换行
.layui-table-cell{ display:table-cell; vertical-align: middle; height:auto; overflow:visible; text-overflow:inherit; white-space:normal;}原创 2020-09-07 11:11:30 · 792 阅读 · 0 评论 -
css3 制作样式 三道杠css 左侧、右侧内容不一高度一样
.icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box;}.icon-dot { display: inline-block; width: 100px;原创 2020-09-04 10:17:09 · 243 阅读 · 0 评论 -
css 在div中插入图片,图片下方会有3px的空隙
DIV中插入图片的话就会出现图片的下面有大概3px的空隙。在DW中看不到,但是在浏览器浏览的时候看出问题了。有4个解决方法:(1)<img> css 添加display:block;(2)<img> css 添加vertical-align:top;(3)<img> css 添加vertical-align:bottom;(4)图片外层...原创 2020-05-26 09:56:16 · 810 阅读 · 0 评论 -
css制作菱形
/* 菱形 */.global-lozenge{ width: 20px; height: 20px; margin-right: 15px; background: #1eb336; margin-left: -30px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform...原创 2020-05-26 09:52:10 · 1048 阅读 · 0 评论 -
css3全面学习
结构框架:分为六个部分(属性、选择符、语法与规则、取值、css单位以及附录)第一部分:属性(定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换、过渡、动画、打印、媒体查询、only IE、only Firefox、only webkit)第二部分:选择符(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)第三部分:语法...原创 2019-10-30 17:49:13 · 6089 阅读 · 0 评论 -
超实用!弹性布局flex后 其余向左对齐最后一项元素向右对齐
给最后一项元素添加margin-left:auto就可以了 。原创 2020-02-11 15:09:30 · 1568 阅读 · 0 评论 -
css层滚动不顺畅 overflow-scrolling: touch;
css层滚动不顺畅加上这个就好了overflow: auto;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;原创 2020-01-08 10:42:59 · 461 阅读 · 0 评论 -
浏览器放大后 拖动滚动条 多余的页面背景为灰色怎么解决
直接在css里设置 html{background:#fff}即可原创 2019-12-09 09:37:24 · 364 阅读 · 0 评论 -
flexbox 布局总结
1.Flex 布局是什么任何一个容器都可以指定为 Flex 布局 .box{display: flex;}行内元素也可以使用 Flex 布局 .box{display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀 .box{ display: -webkit-flex;display: inline-flex;}设为 Flex 布局以后,子元素的flo...原创 2019-11-05 11:38:14 · 186 阅读 · 0 评论 -
修改默认的checkbox样式
.testright input[type="checkbox"]{ width:20px;height:20px;display: inline-block; text-align: center;vertical-align: middle; line-height: 18px;position: relative;}.testright input[type="checkbox"]...原创 2019-10-17 17:10:11 · 266 阅读 · 0 评论 -
css图片裁剪居中 给图片添加object-fit:cover;就可以了
原图**html**<div id="imgbox"> <img src="/images/1.jpg"/></div>**css**#imgbox{width:400px;height:400px;border:5px #000 solid;overflow:hidden;}效果如图一:#imgbox{width:400px;heig...原创 2019-10-17 09:56:58 · 2401 阅读 · 0 评论 -
css3自动判断横竖屏所显示的样式 强制横竖屏
@media screen and (max-aspect-ratio:1/1){ .vip-vertical{display:block;} .vip-landscape{ display:none;}}@media screen and (min-aspect-ratio:1/1){ .vip-landscape{display:block;} .vip-v...原创 2019-08-01 10:39:25 · 577 阅读 · 0 评论 -
css3 单位vw、vh、vmin、vmax的详解
px、em、rem、vw、vh、vmin、vmax 的含义px:绝对单位,页面按精准像素展现em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算;em不是一个固定的值,可以设置`body{font-size:62.5%}rem:相对单位,可以理解为"root em",相对根节点html 的字体大小来计算,css3新增加属性。vw:viewpoint wid...原创 2019-08-05 10:03:06 · 857 阅读 · 0 评论 -
css 自定义浏览器滚动条样式
css改变滚动条的样式 ::-webkit-scrollbar { width: 8px; height: 10px; border-radius: 7px; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background-color: #e2e2e2; } ::-webki...原创 2019-07-11 16:58:51 · 120 阅读 · 0 评论 -
css border制作三角形总结大全
带边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。向上.triangle_border_up{ w...原创 2019-07-11 16:47:14 · 232 阅读 · 0 评论 -
css 盒子水平垂直居中 【transform最有用】
盒子永远在屏幕的中间 ,上下左右一致居中transform是最好用的方法,适合所有【盒子没有固定的宽高】方法一 transformwidth:400px!important;height:300px!important;position:absolute;background:none;display:flex;top:50%!important;left:50%!impor...原创 2019-08-01 10:56:25 · 339 阅读 · 0 评论 -
css 制作关闭叉叉按钮
<span class="closebtn"></span>.closebtn::before, .closebtn::after { content: ''; position: absolute; height: 2px; width: 50px; top: 50%; left: 50%; margin-top...原创 2019-08-01 11:08:19 · 2751 阅读 · 0 评论 -
animation动画知识点
keyframes包括初始属性和最终属性,一个开始执行的动作时间和一个延续动作时间以及动作的变换速率。比如说第一个时间段执行什么动作,第二个时间段执行什么动作。命名有@keyframes开头 紧接动画名称加上{},括号中间是由多个从0%到100%构成的,分别给每个百分比加上不同动作属性,比如说移动、颜色、位置、大小,from相当于0%;to相当于100%@-webkit-keyframes '...原创 2019-08-01 11:10:38 · 275 阅读 · 0 评论 -
css制作三道杠小图标菜单图标
方法一:.icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: conten...原创 2019-08-01 16:53:53 · 2359 阅读 · 0 评论 -
css 移动端内容无缝横向滚动
.srcollbox{ width:100%; display:inline; white-space:nowrap; overflow-x:scroll; float:left; overflow-y:hidden;}.srcollbox li{ margin-top:10px; display:inline-block;}<div> <ul cl...原创 2019-08-02 10:29:53 · 393 阅读 · 0 评论 -
css 背景图不动内容动 background-attachment:fixed
背景图不动,上面内容滚动div{ padding:10% 0;}div p{ display:block; height:500px; background-image:url('./images/1.jpg'); background-attachment:fixed; background-size:cover; color:transparent;}<div&g...原创 2019-08-02 11:18:44 · 559 阅读 · 0 评论 -
input file类型自定义样式
为了让上传这种类型的输入看起来更加美观,但是由于其自身往往无法定义样式,所以我们经常用按钮来 “替代” 它,接下来讲讲其原理和实践过程。原理:为了让input[type='file']看起来更像一个button,我们首先先采用绝对定位定义一个<a>标签,然后采用绝对定位在相同的位置定义一个和<a>大小完全相同的<input type='file'>,并把其透明...原创 2019-08-13 11:03:03 · 3419 阅读 · 0 评论 -
css3 不规则阴影
错误方案 —— 利用box-shadow在面对规则的矩形或者圆形,用box-shadow生成的投影可以说堪称完美。但是面对不规则图形,再用box-shadow生成的投影就有点力不从心了。可以看出,这时圆角矩形的投影打到三角形上面了。在某些情况下看起来可能会有点不那么和谐。正确的方案 —— filter这里利用伪元素生成小三角形。<div>Rabbit</div&...原创 2019-08-13 09:49:07 · 816 阅读 · 0 评论 -
css3 实心圆由中心向外放大扩散 变透明动画 模拟点击效果 水滴纹效果 放大缩小动画
网上找效果是这样 ,https://file.zcool.cn/community/flash/11fdaf57764c5f0000018c1b5d5a4e.swf?Expires=1562819038&OSSAccessKeyId=lwQTEmwHzzSWSkqd&Signature=7v1SFd%2BJSRkWHReEcQ8pBXBWPYs%3D以下是自己做的效果 和这个...原创 2019-07-11 15:36:06 · 2253 阅读 · 0 评论