4

九宫格——用html+css制作一个网页

一. 目标效果:

效果

二. 效果描述

圆角橙色九宫格,自适应页面大小

三. 开发计划

1. 开发

  • [x] index.html建九个div.block
  • [x] app.css设定block大小颜色圆角横排
  • [x] 寻找自适应方法

    • 重点:

      • div大小随屏幕变化
      • 令block的高度等于宽度
    • [x] 猜想:block父级宽度跟随屏幕变化,block始终为父级30%左右

      • [x] 方案一:Flex布局

        • 步骤:

          1. 简单分三行div.wrap(display:flex),各带三个div.block(flex:1),宽度自适应成功
          2. 将div.block高度自适应宽度,根据这篇文章padding-top百分比值参考容器宽度,可以尝试使用padding-top来为div.block顶出高度,但是这种写法div.block的margin只能很小,否则在小屏幕上会变成长方形

            • 效果:已实现
              九宫格-flex布局
            • 代码:见div.container-flex
            • 特点:flex对移动设备适配好
          3. 步骤2中margin只能用很小数值的处理,根据任务要求最终的页面应该是九宫格,方块和方块间有间隔,方块和容器也有间隔,所以横纵的设计应该是用凑100%容器宽度的方法,按照这个设计来使用百分比,使用first-child & last-child伪类来完善布局.效果如下:
            九宫格-flex布局优化

            • margin(1%) + 方块(32%) + margin(1%) + 方块(32%) + margin(1%) + 方块(32%) + margin(1%) = 100%
            • margin(4%) + 方块(28%) + margin(4%) + 方块(28%) + margin(4%) + 方块(28%) + margin(4%) = 100%
      • [x] 方案二:Flex布局2

        • 步骤:

          1. 方案一用了flex,但是那种用flex:1之前还要把div分三行再均等分,还要额外做margin处理,烦透. 学习阮一峰-Flex语法篇后,尝试div.wrap使用默认横排flex & flex换行 & justify-content:space-around, div.block设定百分比宽度,轻松实现目标效果:
            九宫格-flex布局2
  • [x] Chrome自适应效果调试
  • [x] 装Node.js开http-server开端口给手机看

2. 完成任务之后

  • [x] A. 验收标准

    1. [x] 还原设计图

      • [x] 圆角:10%
      • [x] 颜色:换windows取色,#FFA600
      • [x] 设计图:基本一致
    2. [x] 自适应:宽度无滚动条,格子随窗体变化
    3. [x] 移动端:Chrome响应式测试和真机均通过
    4. [x] 编码规范

      • [x] UTF-8: <meta>的charset默认UTF-8
      • [x] 标签小写 & 闭合
      • [x] 元素属性值已用双引号包含
      • [x] css外联引用
      • [x] css不用id控制样式
      • [x] 用div实现布局
  • [x] B.深度思考

    1. Doctype作用: 声明解析器
    2. 盒模型理解:用东西放在盒子中来类比元素在网页中的显示效果。

      • content: 物品,存储于海绵(padding)的包裹中,并由箱子(border)包装;
      • padding: 类比用来包裹贵重物品的海绵,最靠近物品(content),在箱子(border)里面;
      • border: 箱子。箱子大小厚度可调整,箱子会被物品(content)及其海绵(padding)撑大;
      • margin: 箱子要求与其他东西保持的距离,处于最外层;
    3. display:

      • inline:

        • 行内元素,文本元素一般都是,两个inline元素连续写,其显示效果不换行;
        • 修改width & height无效, 可以通过修改line-height来改变高度,内容撑开宽度;
        • 代码换行被解析为空格
        • 不支持样式:width&height、text-align、background-position、clear
      • block:

        • 块状元素,div是其代表。一个块状元素会新开始一行并尽可能撑满容器;
        • 可通过修改width & height 来修改宽高;
        • 不支持样式:

          • vertical-align
      • inline-block:

        • 行内块元素,兼具block和inline特性,可通过修改width&height来修改宽高,且不独占一行;
        • 代码换行被解析为空格
      • none: 在不删除元素的情况下show|hide元素;
    4. 使用浏览器的F12调试界面方法 【调试】chrome谷歌浏览器-DevTool开发者工具-详细总结

      • Element:查看界面元素,可查看元素的对应css样式、计算后样式、事件监听器、属性.
      • Console: 控制台。用于显示日志信息及输入一些命令.
      • Network:请求监听。可获得请求列表,点开某一项将看到Headers、Preview、Response、Timing数据.

        • Headers: 头部数据。包含General、Response Heaeder、Request Headers

          • General:本次请求的URL、请求方法、状态码、请求服务器的地址、其他一些设置.
          • Response Headers: 响应头部.
          • Request Headers: 包含用户代理User-Agent,帮服务器识别设备用.
        • Preview: 预览。如果是图片html将直接显示界面,如果是数据则以其格式优化后展示,如果是代码则直接展示.
        • Response: 响应结果原始数据.
        • Cookies(有些有):请求用到的cookies.
        • Timing: 请求时间使用情况.
      • Sources: 看代码 & 开断点.
      • Performance: 网页加载时记录情况, 帧数、CPU资源,据此可提出性能优化点;
      • Memory: 分析开销大的js函数
      • Application: 应用资源面板。存储LocalStroage、Session、Cookies等.
      • Security: 网页安全情况.
    5. 九宫格布局其他方法实现及其优劣

    6. IDE意思 & 与文本编辑器的对比(后者被前者集成)

      • IDE(Integrated Development Environment)即集成开发环境,提供程序开发环境,一般集成了代码编辑器、编译器、调试器以及图形化用户界面。具有丰富的工具和流畅的开发体验。
      • 文本编辑器:单纯进行编辑用的应用。代码型的一般具有插件扩展功能。
    7. 加不加<meta>的viewport的区别 Responsive Web Design - The Viewport

      • 加<meta>的viewport:

        • width=device-width 将会一直帮你根据屏幕宽度设置界面宽度
        • initial-scale=1.0 将会在浏览器首次加载页面的时候帮你设置好页面缩放比例
      • 不加:

        • 无论什么设备显示效果都是一样的,移动设备上的页面可能会被等比例缩小到看不清

四. 上线

  • 购买服务器,选用CentOS7
  • 学习安装Nginx
  • 将工程放到/usr/share/nginx/html目录下

五. 效果

六. 系列文章


Nodreame
155 声望32 粉丝

伪全栈|前端|前软粉