前端 整理

css：

    *{
    	margin: 0px;
    	padding: 0px;
    	text-decoration: none;
    	list-style:none;
    	position: relative;
    	outline: none;//去掉邊框
    }
    {
    font-style: #ccc;
    display: flex;//彈性佈局
    flex-wrap:wrap;//前提flex
    z-index: 16;//重疊順序（越大越先顯示）
    transform: translate(0,0) rotate(0) scale(1.5);
    //平移 旋轉 縮放
     cursor: pointer;//小手
     line-height: 50px;//行高（特殊用處：文本中心）
     overflow: hidden;//溢出：隱藏；
     border: 2px solid #b9beba;//大小 格式 顏色
     border-color: hsla(0,0%,100%,.4);
     border-radius: 0px 0px 3px 3px;
     text-align: center;//居中
     color: #555;//字體顏色
     white-space: nowrap;
     zoom:0.1//縮放
     text-indent: 10px;//文本縮進
    }
    #product:hover .product_row{}
    //：hover 空格 定位到子元素
    //只能操作自己以及子元素；
    .pic1_img img{
    border-radius: 10px;
    opacity: 1;
    cursor: pointer;
    transition: all 200ms ease-in-out;//配合hover 動畫效果
   // 屬性（all代表全部) 持續時間 效果；
   }
   .pic1_img img:hover{
  	filter:brightness(70%);//亮度，默認100%
}

js：
滾動條固定：

var tool=document.getElementById("tool");//定位
var toolheight=document.getElementById("tool").offsetTop;//取出高度；
window.onscroll=function(){
    var scrollt=document.documentElement.scrollTop;//滾動的高度
    if(scrollt>(toolheight+30)){//經測試30效果還可以
 		
 		tool.style.position="fixed";
 		tool.style.left="0px";
 		tool.style.top="0px";
 	}
 	else{
 		tool.style.position="relative";
 		tool.style.left="0px";
 		tool.style.top="0px"；
 		}
}	

關注-取笑關注：

var a=0;
follow.onclick=function(){
	if(a==0){
		follow.innerHTML=`取消關注`;
		follow.style.width="80px";
		follow.style.backgroundColor="#727b84";
		follow.style.border="#727b84";a=1;}
   else{
   	follow.innerHTML=`關注`;
   	follow.style.width="60px";
    follow.style.backgroundColor="#dc3545";
    follow.style.border="#c82333";
	 a=0;
	 }
}	

搜索框變長：

css:
#find{
	width: 130px;
	height: 30px;
	border-radius: 15px;
	border:2px;
	background-color: #313131;
	transition:width 1.5s ;
	text-align: center;
	color: #E91E63;
}

find.onclick=function(){
	find.style.width="300px";
}

點擊圖像-變暗-顯示文字：
html：img+span
css：

.head_port_1 img{
	width: 200px;
	height: 200px;
  cursor: pointer;
	transition:all 200ms ease-in-out;

}
.head_port_1 img:hover{
    filter:brightness(70%);
    
}
#head_port_1:hover .sp
{
	display: block;
}

js

sp_1.onmouseover=function(){
	sp_1.style.filter="brightness(70%)";
}
sp.onmouseover=function(){
	sp_1.style.filter="brightness(70%)";
}
sp_1.onmouseout=function(){
	sp_1.style.filter="brightness(100%)";
}

輪播圖（明天更新）：