【CSS】模仿携程网h5静态页面

模仿的是导航栏的部分,主要是为了应用伸缩布局的相关知识和熟悉知识点。

效果图

【CSS】模仿携程网h5静态页面_第1张图片

源代码




	携程网
	


这个例子看似简单,实际上在样式部分还是运用了不少环环相扣的知识。我自己一开始做的效果比现在的还要差,这是第二遍。

总结:

  1. 定义class的时候要考虑到尽量减少样式的重复代码,比如这三栏样式一样,那么不必分别定义为hotel、flight、travel,而是统一使用row、row3这样的名称。
  2. 多类名的优势:既有共同样式又有不同样式的情况下使用。比如每一行的第一块和第二块、第三块都设置flex:1,里面的a都设置一样的字体样式等等,但右边两块要单独设置line-height等等。
  3. display:flex;flex-direction:column;是放在一起的,都在父元素中。
  4. CSS3渐变效果。这里使用的是background: linear-gradient(to right, rgba(250,109,83,1), rgba(250,154,77,1));表示从左到右渐变。
  5. 设置机票和旅行两块的时候使用的是.row:nth-child(2) .row3:first-child,而不是.row3:nth-child(4),因为它们的父元素是不一样的,不能越过.row进行计数。
  6. 一行三块之间的白色空隙是用border定义的,而不是padding或margin。因为为row指定了一个整体的背景色。

你可能感兴趣的:(CSS)