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

   HEADER 部分
    
    * name="viewport"   //限制窗口的宽度，  初始化比例为1.0  最小缩放/最大缩放都为1.0  禁止用户手动缩放， 默认进入全屏状态
    <meta name="viewport" content="320.1,initial-scale=1.0, minimum-scale=1.0, 
     maximum-scale=1.0,user-scalable=no, minimal-ui" />

    <!-- 删除默认苹果的菜单栏与工具栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 手机号不被显示为拨号连接 -->
    <meta content="telephone=no" name="format-detection" />

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%；如图

• 2.关于背景icons的使用，其实transform:translate可以不用【改元素本身的偏移】，直接用Left去定位就好了【针对父级的偏移】，但是用他的好处就是【我刚刚发现其实是可以居中显示的（之前的方法是margin-left:**px; 也就是box宽的一半）】

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

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

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