![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
关于HTML和css的学习
十三月呀
这个作者很懒,什么都没留下…
展开
-
css实现六边形边框
css实现六边形边框原创 2022-11-01 17:25:58 · 1171 阅读 · 0 评论 -
js判断文字是否超过区域
目的判断表格内行是否超过宽度,若超过,则可以点击弹窗显示所有内容。原创 2022-06-20 14:51:22 · 3078 阅读 · 0 评论 -
多行文本省略
.des{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp:2; -webkit-box-orient: vertical; display: -webkit-box; overflow-wrap: break-word; }原创 2021-01-26 15:50:45 · 87 阅读 · 0 评论 -
浏览器兼容汇总
360浏览器密码框填充一般情况下,网站记住密码后,表单的密码框会自动填充。针对这种情况,在表单内加一个隐藏元素,设置type = password,默认密码就会填充在这里,不影响真正的密码框。但是360浏览器渲染页面时,先渲染正常元素,再渲染隐藏元素,导致上述方法失败。针对这种情况,用css的方法调整假密码框。1.1 z-index.password{ z-index:-10; position:relative;}1.2 transformtransform: rotateY.原创 2020-11-25 10:35:43 · 81 阅读 · 1 评论 -
设置文本向两边居中展示
.reason .reasonContent > span{ width: 52px; text-align: justify; display: inline-block; } .reason .reasonContent> span::after{ content: ""; display: inline-block; width: 100%; }原创 2020-11-11 15:36:34 · 98 阅读 · 0 评论 -
滚动条问题,未解决
表格超出区域设置其为visible,可见;但是单独设置overflow-y:visible失败,还是出现滚动条而设置其为overflow: visible又成功了未找到原因,也不是很理解为什么原创 2020-07-09 16:01:24 · 126 阅读 · 0 评论 -
css 实现文字泡
使用伪元素的方法,生成一个直角三角形,再用绝对定位,将其放到合适的位置。header .header-top-content div { background-color: rgba(255,255,255,0.25); padding: 0.1rem 0.12rem 0.1rem 0.34rem; min-height: 1rem; color: rgba(255,255,255,0.8); line-height: 0.34rem; font-siz原创 2020-07-08 17:44:49 · 227 阅读 · 0 评论 -
css实现边框渐变
.actionBox { border-radius: 0.16rem; width: 7rem; margin: 0 auto; background-color: #D9D9D9; padding: 0.4rem; line-height: 0.68rem; font-size: 0.32rem; position: relative; border: 2px solid transparent; }.actionBox::.原创 2020-07-07 11:21:31 · 477 阅读 · 0 评论 -
块格式化上下文 BFC
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。根元素(<html>) 浮动元素(元素的float不是none) 绝对定位元素(元素的position为absolute或fixed) 行内块元素(元素的display为inline-block) 表格单元格(元素的display为table-cell,HTML表格单元格默认为该值)...原创 2020-06-30 12:00:02 · 89 阅读 · 0 评论 -
audio标签不可以自动播放音乐的解决办法
H5的新特性 ,音频不可以自动播放,除非用户自己添加。所以从后台读取出来的音频,需要做操作。<i class="layui-icon layui-icon-headset" id="player" title="播放音乐"> <audio style="display: none" id="uploadMusic" class="layui-icon layui-...原创 2019-05-07 13:26:53 · 13913 阅读 · 1 评论 -
前端实现找回密码流程图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>找回密码流程</title></head><body><div class="content"> <div cla...原创 2019-07-11 10:39:16 · 3700 阅读 · 7 评论 -
flex布局
ustify-content 常用属性有:flex-start | flex-end | center | space-between | space-around 前三个就是字面意思,向行起始位置对齐,向行结束位置对齐,向行中间位置对齐。后两个中,space-between :元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'...转载 2019-07-11 14:39:49 · 927 阅读 · 0 评论 -
按钮组+修改radio样式
<div class="pay"> <radio-group bindchange="radiochange"> <div> <image src="./image/apliay.png" class="noWechat"></image> <span>支付宝支付</s...原创 2019-07-19 16:20:59 · 799 阅读 · 0 评论 -
loading图css实现
转载:https://www.cnblogs.com/sddychj/p/5567456.html背景这个是充分证明了我对js和css的不熟悉,之前一直用了个第三个插件实现加载等待功能,每次还挺麻烦,后来见了这位同事写的,这么简单。吓我一裤子。实现<div id="divloading" class="bg-loading"><div class="loa...转载 2019-07-23 16:51:38 · 221 阅读 · 0 评论 -
静态圆环进度图,进度条
由于之前对需求了解不请求,将仪表盘做成了圆环进度图,代码也附上来吧,以做参考。方法参考了某个大佬写的,但是找不到文章了,请见谅。主要实现方法是用用HTML+csshtml :<div class="circle"> <div class="circle-bar"> <div class="circle-bar-left"></...原创 2019-12-18 16:19:49 · 376 阅读 · 0 评论 -
css实现圆形锯齿边效果
https://www.jianshu.com/p/6f3b35b32b40转载 2020-04-26 15:43:58 · 1320 阅读 · 0 评论 -
网页,鼠标滑动切换一屏
var isFF=/FireFox/i.test(navigator.userAgent); var change = document.documentElement.clientHeight - 75; var scrollHeight = document.body.scrollHeight - change -75; var box = $('.wrapItem img').width(); $('.headNav').css('width',box+'px...原创 2020-05-15 16:26:06 · 1293 阅读 · 2 评论 -
css 美化单选按钮和复选按钮
<div class="checkAgreement"> <input type="radio" id="checkSure" class="checkSure"> <label for="checkSure"></label> </div>.checkAgreement .checkSure{ opacity: 0;}.checkAgreement input[type=radio]:checked+label{ ..原创 2020-05-16 11:36:53 · 296 阅读 · 0 评论