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.οnclick=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.οnclick=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%)";
}