小米首页小功能案例

body

{

background: #fff;

}

*{

margin: 0px;

padding: 0px;

list-style: none;

}

ul{

width: 606px;

height: 504px;

border: 1px solid pink;

margin: 50px auto;

}

ul li{

width: 198px;

height: 248px;

background: #FAFAFA;

margin: 1px;

float: left;

cursor: pointer;

text-align: center;

border: 1px solid #bebebe;

position: relative;

z-index: 999;

}

.UL li .ImgDiv{

width: 100%;

height: 160px;

text-align: center;

margin-bottom: 10px;

}

.UL li p:first-of-type{

font-size: 13px;

margin-bottom: 2px;

}

.UL li p:nth-child(3){

font-size: 12px;

color: #bebebe;

margin-bottom: 10px;

}

.UL li p:nth-child(4){

font-size: 13px;

color: orangered;

}

.UL li p:nth-child(4)>span:nth-child(1){

color: orangered;

}

.UL li p:nth-child(4)>del{

color: #bebebe;

}

.UL li p:nth-child(4)>del>span{

color: #bebebe;

}

.UL li p{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.nullP{

width: 100%;

height: 16px;

}

.HiddenDiv{

background: orangered;

width: 100%;

height: 60px;

/* position: absolute; */

/* top: 188px; */

transition: all .8s;

z-index: 1;

margin-top: 50px;

}

.HiddenDiv .HiddenDiv_Content{

width: 80%;

height: 90%;

margin:0 auto;

font-size: 12px;

margin-top: 5px;

}

.HiddenDiv_Content span{

display: block;

text-align: left;

}

.HiddenDiv_Content span:first-of-type{

color: #fff;

margin-bottom: 7px;

}

.HiddenDiv_Content span:last-of-type{

color: #bebebe;

}

• 

  小米电视4A 43英寸青春版

  全高清屏 / 人工智能语音

  1399元

  1699元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

• 

  小米电视4C 50英寸

  4K HDR / 人工智能语音

  1899元

  2199元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

• 

  "15.6"笔记本 i5 4G MX110

  3999元

  4199元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

• 

  "13.3"小米笔记本Air 四核i7 8G 256G MX150 银色

  5999元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

• 

  米家电水壶

  一杯水，是一家人的安心

  99元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

• 

  米家LED吸顶灯

  用光线，还原理想生活

  389元

  399元

  外观很漂亮，有个显示屏，好高大尚，睡眠模式非常安静！

  来自于 嘉仁宫 的评价

//获取元素

var HiddenDiv = document.getElementsByClassName("HiddenDiv");

var li = document.getElementsByTagName("li");

var HiddenDiv_Content = document.getElementsByClassName("HiddenDiv_Content");

for(var i = 0;i

li[i].index = i;

li[i].onmouseover = function(){

HiddenDiv[this.index].style.top = "188px";

}

li[i].onmouseout = function(){

HiddenDiv[this.index].style.top = "288px";

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史