HTML页面设计

复习回顾

  1. position定位

    1. Relative: 相对自己本来要出现的位置偏移 原来的位置仍保留
    2. Absolute：相对的是已经定位过的父级偏移。如果没有，一直向上就是浏览器。 原来的位置不保留

  2. 父元素 relative + 子元素 absoulute 常用用法
    1. fixed：相对的是浏览器。常用效果
    1. sticky：粘性定位，在屏幕里表现为relative定位，超出屏幕表现为fixed定位。

  3. 问题？ z-index属性可以控制定位元素重叠属性，在上面的z越大？注意前提是元素已经定位过

  4. 行内元素块元素的特征 display属性用法

  5. 作业为例 ：二级菜单的定位属性

    1. 响应式概念回顾 解决屏幕适配
    2. PC设备 vs手机设备 dpr的概念 以iphone6为例，物理分辨率7501334，逻辑分辨率375667，dpr=2 ，那么我们设定一个元素的尺寸是100100 到iphone6上实际是200200

响应式布局

  1. 设置viewport属性
1
<meta style = "width:375px;height:200px; backgrouna- coLor: arav: s />

  1. 使用viewport

    1. 在开发应用于移动设备的网站时，第一件事是在标签中加入
    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

    1. content中的属性含义:

      1. width :设置内容的宽度，为一个正整数或”device-width”
      2. initial-scale :初始放大比例，为1个数字，可用小数
      3. minimum-scale :最小缩放值,可用小数
      4. maximum-scale :最大缩放值，可用小数
      5. user-scalable :是否允许用户进行缩放，值为”no”或”yes”

  2. 百分比布局

    1. 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素
      1. 不要使用: width:xxpx;
      2. 要使用: width:xx%;或width:auto;
      3. 百分比布局可以实现简单的页面适配。

  3. VW和VH

  4. 1

    建议自学