仿写美团页面练习打卡Day3

  兄弟们，我又来晒网了哈哈哈。最近手头的事情太多了，英文论文快接近尾声了，现在就差写introduction部分了，终终于要结束了，调格式调到吐，所以珍惜每一篇英文论文，虽然只是一篇简简单单十几页的论文，但是背后承载着太多的心血，讲真比生孩子还难，虽然我没生过...然后英文写完还要再写一篇中午论文，用来保底毕业，晚上和同门算了算，估计七月底写出来交给导师比较合适，否则只能等六月份的第二批答辩了，虽然第一批也只是早了两三个月左右，但是早点答辩完出去耍他不香吗。默默给自己打个气，论文嘛，肝一肝就有了，大不了就脱发就秃头嘛...
  好了，废话就说到这里，回到正题了。这次主要实现了中间区域的三个部分，可以等下仔细观察一下这三个区域，每个区域布局样式是类似的，因此在编写样式的时候尽可能实现样式的复用，避免造成代码负担，这就有点类似模块化、组件化的思想了。还需要强调的是如果子元素设置浮动了，一定一定要在父元素中清除浮动，别问我为啥，问就是调了好久的样式就是有问题，最后居然是因为浮动引起的父级边框塌陷了，还以为自己定义了足够高度就没事了，最后骂骂咧咧的加上了清除浮动并狠狠记住了这个教训！

1. 猫眼电影

  先看一下效果图吧：

  我承认有点偷懒了，最后一个图片懒得换了，不过这里有一个左右滚动的效果待实现，其实是我还没搞明白怎么实现，安慰自己现在只是静态页面，不能左右滚动没关系的。这个区域可以简单分为上面index区域和下面的content区域。

• index区域
    这里的宽度是占据整个版心区域的，所以需要设置width: 100%;，并给一个合适的高度就可以，背景颜色则是渐变色，当然怕麻烦的随便加一个自己喜欢的颜色就好，并且上面的左右两角需要设置圆角边框属性。接着是里面的内容，左边可以用ul和li标签或者span标签实现都可以，如果是用ul和li则需要给这些元素添加一个浮动是他们能够水平排列；在右边则是一个全部加一个向右的箭头，前面一个介绍了如何实现一个箭头，其实最后定义一个可以复用的CSS样式，但是我怕改，就当是又复习了一下吧。其次是内容的排列，所有元素是上下居中的，只需要将line-height的值等于盒子高度就可以。另外，对于左边列表元素之间添加外边距margin调整间距，而右边则需要设置float: right;，再通过margin-right调整和右边的距离即可。
    最后注意到当点击右侧列表时，下方会有一个小三角来回滑动，如何实现一个小三角形在上一个已经介绍过了，夸一下自己居然预判了它的预判...这里只需要将三角形的背景色改为白色，并且调整一个合适的大小就可以。来回滑动的效果这里没有实现，只是通过固定定位给他定在了一个列表下面。至此就实现了一个index区域，并且可以观察到这一部分样式是可以复用的，只需要改变里面列表名称以及背景颜色就可以。
• content区域
    内容区则是一个可以横向滑动的区域，里面展示了一系列的电影信息。同样的，里面展示的电影信息布局的结构样式是类似的，极个别特殊的可以另外添加行内样式即可，因为行内样式的优先级是高于外部引入样式的。接着就是先写第一个电影展示区的结构样式吧，先确定好该区域的宽高，再给其设置一定的圆角边框属性，这次是四个角都有，所以统一设置border-radius即可，并且电影与电影之间是有一定间距的，可以添加合适的外边距margin，以上则实现了一个展示区的整体结构，其实细心的你一定可以发现这一小块都是一个链接区域，无论你点击哪里都会跳转到一个页面，而并不是只有购票这一个链接区域，因此可以在外面整个包裹一个a链接。
    最后就是底部区域展示的一下电影信息，整个信息区域有一个灰灰的背景色，官方是给这个块加一个渐变的背景色，另外，还需要通过定位将信息区域偏移到电影区域内部，这里建议使用固定定位，若是相对定位则原来块元素位置仍然保留在文档流中，对排版有影响，而一旦子元素设置绝对定位，则需要在父元素中设置相对定位，大家记住“子绝父相”就可以，而具体位置在浏览器的审查元素中调整再合适不过了，不要说不知道浏览器审查元素有这个功能，我会鄙视你...然后就是内部信息展示，依旧是划分为左右两个区域，很符合大众审美，左边分为上下两行，上面是观众评+一个评分数值，下面是电影名字，字体大小颜色样式的看着调调就行，五彩斑斓的黑都可以。右边则是一个购票按钮，默默吐槽其实点了并不是直接挑战购票页面...先对整体块元素设置合适的宽高，并加一个定位使它固定到右下角区域，使用border-radius设置圆角边框，内部文字是上下水平居中的可以使用flex布局设置，或者给一个合适的内边距padding也可以。
    至此，第一个电影展示区的总体效果就实现了，接着复制粘贴若干就行，只需要修改整体背景图片以及相关电影信息就可以，这些背景图片都是在线网址可以找到的，去哪里找呢？去审查元素样式里找，其实也可以偷懒不换，反正只要明白怎么改就行，重点是学习如何实现效果。

2. 推荐民宿

  先看一下效果图吧：

  这里确确实实偷懒了，在线摸鱼本人哈哈哈哈，大家见谅哈哈凑活看吧。和上面猫眼电影布局简直就是亲兄弟啊，不过他悄悄咪咪给自己内容区加了一个小边框，还换了个白色的背景色。依旧是给他分为上的index区域和下面的content区域。

• index区域
    简单粗暴的复制一下上面猫眼电影的index区域结构样式，只要加一个行内样式改一下背景颜色就可以，还有就是需要改一下内部标签的内容，是不是很简单很方面，而不需要在重新写一个样式，那就太low，要学会给自己省事儿。
• content区域
    内容区域就没得复制了，老老实实按照官方的样式写吧，先整体设置一个边框并让border-top: 0，再修改一下背景颜色为白色，整体结构搭建好再实现内部结果，老样子先实现一个小块再复制结构样式就行，屡试不爽啊。接下来就开始实现这个小块，先设置好宽高，并且这个整体区域都是一个链接，因此还需要在外面包裹一个a标签。对于内部结果，则是分为上下上个部分，上面是民宿照片，需要设置圆角边框属性，这个再熟悉不过了，就不细细展开了，而照片右下角区域则有一个圆圆的头像，先定义一个宽高相等的正方形块元素，再通过设置border-radius变为圆形，最后通过定位给他定到合适的位置。下面是民宿的具体信息，难点就是第一行，文字部分宽度固定，文字不换行且超出部分被隐藏并用省略号代替，实现方法如下：

width: 297px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

下面两行大家自由发挥吧，大差不差肉眼看着没差别就行。然后就是无脑复制粘贴就行，对于每一块都要设置浮动，是他们横向排列，强调一定一定要在父级边框中清除浮动。至此，推荐民宿部分完成，呜呼，已经三分之二了，胜利就在眼前。

2. 猜你喜欢

  先看一下效果图吧：

  避免篇幅太长就截了最上面一行，当时快中午写到这里，看到这诱人的猪蹄儿着实有点饿了，忍者口水硬着头皮在这写。其实这部分可以说没啥难度了，index区域直接套用上面的，改一个背景颜色和列表文字就行，内容区域和推荐民宿部分样式一样，只需要另外改一下高度就行，并且每个小块里面就是上面一个图片，下面几行文字，连个定位都不需要，就是文字第二行开头部分应该是五颗星，这个星星好像是iconfont搞定的，我不会，就用三角形代替了。

  最后总结一下吧，对于巩固CSS知识还是需要自己写一个整个的样式，只有实战遇到困难，在想方设法解决才能加深记忆。整个页面应该还剩下两个部分就解决了，争取早点写完吧。写完后看一下能不能在实现一点点局部的轮播图以及滑动这样的效果，虽然最近很忙，但是希望自己能够偶尔抽出一点时间写一写吧，每天都要push自己一下，大家一起加油。