• 任务二:零基础HTML及CSS编码练习


    任务目的

    • 针对设计稿样式进行合理的HTML架构,包括以下但不限于:
      • 掌握常用HTML标签的含义、用法
      • 能够基于设计稿来合理规划HTML文档结构
      • 理解语义化,合理地使用HTML标签来构建页面
    • 掌握基本的CSS编码,包括以下但不限于:
      • 了解CSS的定义、概念、发展简史
      • 掌握CSS选择器的含义和用法
      • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

    任务描述

    • 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写

    任务注意事项

    • 只需要完成HTML,CSS代码编写,不需要写JavaScript
    • 示例图仅为参考,不需要完全实现一致,其中的图片、文案均可自行设定
    • 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
    • HTML 及 CSS 代码结构清晰、规范

    任务完成及总结

    这次的任务练习总得来说没太大的难度,也没有遇到什么问题,就是太繁琐了,特别是表单那块,在那里差不多用了50%的时间用来调试像素。

    小demo的亮点:

    采用固定布局,当屏幕缩小时,不会发生坍塌现象。

    小demo的不足之处:

    对我而言,就是时间耗费太多了,将近用了四个小时。

    小demo地址:

    https://cruxf.github.io/BaiduTask/test2.html

    有不足的地方希望大家多多指出!

  • 相关阅读:
    (转载)什么才是富人思维
    linux上的vs code的C++环境搭建
    [转载]双线性插值简介
    刻意练习行动手册
    滑动窗口技巧
    [转载]用于深入思考的小工具
    CF632E Thief in a Shop
    BZOJ1497 最大获利
    UVA10779 Collectors Problem
    洛谷P4311 士兵占领
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/6654530.html
Copyright © 2020-2023  润新知