携程网移动端首页-学习与自我分析

   HEADER 部分
    
    * name="viewport"   //限制窗口的宽度,  初始化比例为1.0  最小缩放/最大缩放都为1.0  禁止用户手动缩放, 默认进入全屏状态
    

    
    
    
    

HTML- 5标签

  • header footer article aside nav section hgroup menu ... 等等标签

第一步骤分析结构

本网页是由四个部分组成的

  • 1.header
  • 2.nav
  • 3.footer
  • 4.aside

    CSS分类规划

  • common.css

  • main.css

    着重分析【自我学到的新概念方法】

  • 1.头部banner 这个父级定义一个想要的宽高度,子级img 定义width:100%;如图携程网移动端首页-学习与自我分析_第1张图片

  • 2.关于背景icons的使用,其实transform:translate可以不用【改元素本身的偏移】,直接用Left去定位就好了【针对父级的偏移】,但是用他的好处就是【我刚刚发现其实是可以居中显示的(之前的方法是margin-left:**px; 也就是box宽的一半)】携程网移动端首页-学习与自我分析_第2张图片

  • 3.aside 可以用来做一些侧边栏,浮动图层的标签

其实很多东西要整理,一时间太开心,待它日在细细分解

转载于:https://www.cnblogs.com/mcat/p/5066132.html

你可能感兴趣的:(携程网移动端首页-学习与自我分析)