任务五:零基础HTML及CSS编码练习加强版

时间:2022-11-22 10:38:14

任务目的

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

 

任务描述

  • 基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增加CSS样式代码的编写
  • 头部和底部的黑色区域始终是100%宽
  • 页面右侧部分为固定宽度,左侧保持与浏览器窗口变化同步自适应变化
  • 左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
  • 10张图片需要永远都完整展现,所以会随着宽度变窄,从两行变成三行甚至更多,也有可能随着宽度变宽,变成一行

 

任务注意事项

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

 

 

任务完成及总结

 这次的任务主要是延伸了任务二,没啥难度,只要增加左右两个盒子,修改下相关像素之类的就完成了。我猜这次任务考察的应该是旧代码的复用性。

 

小demo地址:

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