小菜菜的工作小坑 (固定导航栏 & content:url()中的图片 & 返回顶部的按钮 & css本地调好的样式和上传到空间上的样式不一样)

1.用jq动态添加类名称时，一直不起作用，发现是因为使用addClass的时候，样式不需要加点. 把点去掉就好了。

//修改前
$('#header12').addClass('.box-active')

//修改后
$('#header12').addClass('box-active')

2.实现固定导航头部 本来打算 （使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性）但是滚动会有抖动，然后我就使用sticky属性，实现的效果就不会产生抖动啥的（缺点可能就是兼容性的问题了，因为我的没有，所以我就使用sticky属性）

/* 给你的头部添加以下代码 */
.box-active{
    
    width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000000;
}

//如果想用js判断高度,动态添加,代码如下(会抖动 不建议)

window.addEventListener('scroll', function(){
	 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	// if($(".adsbygoogle").attr("data-ad-status")=="unfilled"){
	if(scrollTop > 65){
		$('#header12').addClass('box-active')
		console.log('scrollTop大于65')
	}else{
		$('#header12').removeClass('box-active')
		console.log('scrollTop取消')
	}
 })

3. ::before ::after等伪类中使用content:url()中的图片无法设置宽高

它是直接读取图片。而不是在代入到html里面再显示的，所以css获取不到那个元素，或者说根本就没有那个可以操纵的元素。css不能直接操作文件夹里面的图片。只能操作html页面上的图片。（举个栗子，你去商店买东西。那个东西虽然商店里面有。但是没有摆出来出售，你还是买不到哦。）

4. 制作返回顶部的按钮

/* 
标签内容用content属性 (用来与:before 及 :after 伪元素配合使用，来插入内容) 
用浏览器特殊字符实现
*/

.header .dropdown:after {
    position: absolute;
    right: 12px;
    top: 0;
	content: "\276E";
	transform: rotate(-90deg);	
    line-height: 64px;	
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    opacity: .7;
}

.header .dropdown:hover:after {
	-webkit-transform: rotate(-270deg);
	transform: rotate(-270deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

/*
标签内容用content属性 (用来与:before 及 :after 伪元素配合使用，来插入内容)
使用背景图来完成
*/ 

.header .dropdown:after {
    position: absolute;
	width: 14px;
	height: 14px;
    right: 8px;
    top: 40%;
	content: '';
	background: url('../arrow-top.svg') no-repeat 0 0;
	transform: rotate(-180deg);	
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
	background-size: 100%;
}

.header .dropdown:hover:after {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

//js代码
$(function() {
	$(window).scroll(function(){	
		if($(window).scrollTop()>500){		
			$("#j-top").show();
		}else{
			$("#j-top").hide();
		}
	});		
	$("#j-top").click(function(){
		$("body,html").animate({scrollTop:0},1500);
		return false;
	});		
});

//html
<div class="action" style="top:70%;">
	<div class="a-box gotop" id="j-top" style="display: none;"></div>
</div>

5.文本自动换行样式:word-break: break-all

6.css本地调好的样式和上传到空间上的样式不一样

        可能是需要更新缓存，不是电脑上的缓存，是空间服务器上的缓存。或者更新全站。浏览器也有缓存,把浏览器的缓存也清一下。如果以上不成，你把本地的样式写到html行内样式里，这样如果再不成，那100%是服务器缓存的问题。