关于小米商城官网的仿写及试验报告总结(技术合集)

你是怎么知道我小米的官网就花了一天写完的(嘿嘿)

总体情况说明和分析:

快乐学习

因为我倡导的是快乐学习，所以在课余时间，一部分空闲时间，我并没有拿来敲代码，而是去散散步走走路，看看风景，打打篮球运动运动，说实话，我是比较不喜欢一天都坐在那里死命敲的(我觉得人的一生，事业，成就，学习是一部分，但更重要的，是享受当下自然，可爱，真诚且真实的生活)，当然了，我现在实力不够，所以我知道我要比前辈们付出更多的努力，我一直是效率提倡者，一般不会以长时间为代价达到相同的学习效果，这也就要求了当我开始敲代码时所必需的较高专注度，喜爱与投入

没错，其上就是为啥我周六上午才开始小米滴原因，或许有人会说我就是偷懒，但我不是做到了吗

以下就是相关的技术问题以及一些问题综合，并附上了我自己个人的解决办法(欢迎大家交流学习):
1.

第一个较普通的就是购物车下拉菜单的右对齐和边框大小，上篇已经提过了，这里就分享下代码吧

html 复制代码

```.dinglanbox2 ul {
  display: none;
  position: absolute;
}
.dinglanbox2 li {
  display: block;
  margin-left: -195px;
  text-align: center;
  height: 100px;
  line-height: 100px;
  width: 315px;
  margin-right: 0px;
  box-shadow: -5px 5px 10px -4px #cbcbcb, 5px 5px 10px -4px #cbcbcb;
  color: black;
  position: absolute;
  z-index: 40;
  background-color: white;
  }

不过值得一提的是二级菜单背景颜色的设置，我第一次的时候发现其会被其他盒子盖住，所以给他加了一个较大的z-index，有效，但其背景默认为透明，所以以后设置二级菜单的时候别忘记加上背景颜色

其次，也就是小米的一个难点，总商品通栏hover之后的二级菜单的宽度为100%，我试验了很多次，但效果都不佳，基本上给其宽度设置成100%之后，其最大宽度如下图(这里以电视下面的子菜单为例)，即最大宽度受其父盒子的限制

经后来的搜索我才知道，这个效果需要用js才能实现，但我不甘心于放弃这个，写都写到这里了，思索片刻后我决定尝试利用css来部分解决这个问题，于是我在子菜单外面又套了个盒子以代替背景效果(至于这个和父列表是什么关系我忘掉了)，然后把这个父盒子的宽度设的足够大，虽然无法达到宽度为100%的适配，但还是能看看的，再将其中的子菜单居中并适度调距即可，其实宽度设定足够大时，也和js没有什么区别，虽然本质上不一样 3.

较简单和普通的技术，就是盒子的阴影和上下移动，这里没啥好讲的，分享一个阴影的超强博客吧
juejin.cn/post/685457...

哦哦，我记起来王佬给我分享过一个盒子上下移动的css

html 复制代码

```.youhequn_box:hover {
  transform: translateY(-4px);
  box-shadow: -5px 5px 10px -4px #e0e0e0, 5px 5px 10px -4px #e0e0e0;
}

4.就是蒙版的局限性

没错，我这次的图标hover还是用门板写的，但是这次的搜索处图标却遇到一个棘手的问题，就是原图上加蒙版却失效了，不知道是什么原因，上网查了一下，原因一大堆，有什么定位的原因，有什么浮动还是浮板来着的问题，其他地方的蒙版都还正常，不过蒙版确实好用
5.

这次小米最大的亮点，就是隐藏的盒子及按钮:
由于我没有学习到过盒子的隐藏等等相关新知识和技术，所以我就就地取材，利用最原始的盒子display；block；none来尝试盒子的隐藏效果，经过较长时间的试验，终于发现一个了方法

蓝色:隐藏盒；绿色:按钮；红色:包含盒，父元素

原理:经过试验发现，hover使隐藏的盒子显示的要求是要使其在相应的元素的后代之中，兄弟元素都不行，既然如此，我就利用一个大个的div将两个小div套住，然后将其中的一个作隐藏盒子display；none掉，将另一个做按钮，使其正常显示，这样只需将hover给大个的div，hover的对象为隐藏的盒子，使其显示即可，并且由于盒子隐藏掉，所以大div其实就是按钮盒子，其显示的大小也是按钮盒，相当于hover的大div和按钮盒是相等的，因此hover按钮盒之后能够完美的显示隐藏盒，解决了一个js的问题

当然，以上只是我的一个方法而已，有弊有利，利为简单，逻辑清晰，显示盒子多样化，弊为需要适当调距，并且嵌套，位置，覆盖等等关系需谨慎

这里就分享一下我的基本盒子形式代码吧

html 复制代码

```.box1 {
  float: left;
  height: 42px;
  width: 234px;
  background-color: rgba(105, 101, 101, 0.6);
  position: absolute;
}
.box2 {
  float: right;
  height: 460px;
  width: 265px;
  background-color: white;
  position: relative;
  z-index: 30;
  margin-top: -20px;
  display: none;
  margin-right: 731px;
}
.ycbigbox1:hover .box2 {
  display: block;
}
.ycbigbox1 {
  display: block;
  height: 42px;
  /* width: 234px;
  float: left; */
  position: relative;
}
.box3 {
  float: left;
  height: 42px;
  width: 234px;
  background-color: rgba(105, 101, 101, 0.6);
  position: absolute;
}
.box4 {
  float: right;
  height: 460px;
  width: 530px;
  background-color: white;
  position: relative;
  z-index: 30;
  margin-top: -62px;
  display: none;
  margin-right: 466px;
}
.ycbigbox2:hover .box4 {
  display: block;
}
.ycbigbox2 {
  display: block;
  height: 42px;
  /* width: 234px;
  float: left; */
  position: relative;
}
.box5 {
  float: left;
  height: 42px;
  width: 234px;
  background-color: rgba(105, 101, 101, 0.6);
  position: absolute;
}
.box6 {
  float: right;
  height: 460px;
  width: 996px;
  background-color: white;
  position: relative;
  z-index: 30;
  margin-top: -104px;
  display: none;
}
.ycbigbox3:hover .box6 {
  display: block;
}
.ycbigbox3 {
  display: block;
  height: 42px;
  position: relative;
}

等你补充。。。

心得和反思

其实写了这三个网页下来，如果不带js的话其实网页的套路真的一模一样，没有什么大的花头(都给我写麻木掉了真的)，是比较简单的，基本上都是标签堆叠，所以现在学的东西已经不够了

当然，也有一些值得思考的问题，当我搭建网页总是习惯于用div套到底，我曾反思过这个问题，并去查了查相关讨论，发现一个网页的语义化是比较重要的，所以以后要尽量减少div的使用，尝试熟用其他标签

最后的最后，也没啥好说的，革命还未成功，同志还需努力
**

命运叫我就此沉默，我偏要一鸣惊人!
** 转载请告知，谢谢，欢迎学习交流