前端常见bug备忘录

最新推荐文章于 2024-09-02 20:08:58 发布

清酒白粥

最新推荐文章于 2024-09-02 20:08:58 发布

阅读量508

点赞数

分类专栏： html/css 文章标签： css

本文链接：https://blog.csdn.net/qq_36030737/article/details/79961227

版权

html/css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css设置滚动条并加hover效果

::-webkit-scrollbar{}//滚动条大小宽度等
::-webkit-scrollbar-thumb{}//滚动条滑块
::-webkit-scrollbar-track {}//滚动条滑道
要增加hover效果直接在里面写&:hover{}
eg:鼠标移上去改变滑道的样式   
::-webkit-scrollbar-track {
    &:hover{}
}

防止多次触发hover效果，在动画前加.stop(true,true)，停止上一次动画

$(this).find('.toggle').stop(true,true).slideDown();

js 报错找不到event :查看函数内是否传event，或者 event = event ? event : window.event;

制作简易流程图、思维导图，learn.json用文件夹方式打开页面进行请求会出现跨域问题，用http方式打开即可

css3 keyframes使用

// forwards表示停留在最后一帧
.notice_item:hover .notice_flag{
    animation:notice_flag_hover 0.2s forwards;
}
@keyframes notice_flag
{
from {height: 0px;}
to {height: 40px;}
}

ps把选区的厘米变为像素：编辑——首选项——单位与标尺

有一些常用的CSS样式写了就忘记了，做一个记录，以便查阅，持续更新

ios手机上点击块出现灰色背景


html,body{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// 我这个项目，写了这个样式过后，对安卓打开键盘产生了影响，所以这样写
<script>
	$(function(){
		var u = navigator.userAgent;
	
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	
		if(isiOS){
			$("html,body").css("-webkit-tap-highlight-color","rgba(0, 0, 0, 0)");
		}
	})
</script>

微信安卓机清空缓存

对话框中输入 debugx5.qq.com 发送出去,点击进调试页面勾选需清空的缓存

背景图的显示位置设置：

溢出显示省略号并设置最多显示n行

//超出@num行显示省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @num;
-webkit-box-orient: vertical;

//只显示一行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

calc 在 less 中编译出错，加上~

width: calc(~"100% - 500px");

layer子弹窗关闭自己

var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

文字滚动标签：

<marquee behavior="" direction=""></marquee>

遍历json,去掉为空的数据：

for (key in data) {
	if(data[key] == null || data[key] == undefined || data[key] == ""){
		delete data[key]
	}
}

css文件中使用自定义常量

//在 :root{} 中定义后，即可用 var() 使用
:root{
    --base_color: #fff;
    --cont_wrap: 20px;
}
.box{
    padding: var(--cont_wrap);
    border:1px solid var(--base_color);
}

轮播插件swiper： http://www.swiper.com.cn/

图表插件echart: http://echarts.baidu.com/