任务目的

  • 针对设计稿样式进行合理的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

任务五:零基础HTML及CSS编码练习加强版的更多相关文章

  1. 零基础HTML及CSS编码总结

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: * 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基 ...

  2. 任务五:零基础HTML及CSS编码(二)

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

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

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

  4. 任务二:零基础HTML及CSS编码(一)

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  5. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  6. 前端零基础 --css转换--skew斜切变形 transfor 3d

    前端零基础 --css转换--skew斜切变形 transfor 3d==============重要不紧急! 重要紧急 重要不紧急 不重要紧急 不重要不紧急

  7. 任务一:零基础HTML编码

    面向人群: 零基础或初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课 ...

  8. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  9. 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而 ...

随机推荐

  1. Android Activity实例应用(选择QQ头像)

    1.效果图 点击button,跳转到页面2 选择需要的头像,自动返回 3.XML文件布局 页面1 <?xml version="1.0" encoding="utf ...

  2. C++_类入门5-智能指针模板类

    智能指针是行为类似于指针的类对象,但这种对象还有其他功能. 本节介绍三个可帮助管理动态内存分配的智能指针模板(auto_ptr.unique_ptr和shared_ptr). void remodel ...

  3. 基于JsonPath和XmlPath的对象映射(Object Mapping)

    rest-assured支持映射Java对象到Json和XML以及从Json和XML中映射到Java对象.Json映射需要在classpath 中有Jackson.Jackson 2或者是Gson,X ...

  4. In linux shell, How to cp/rm files by time?

    find /path/to/folder/ -mtime 1 -exec rm {} \; // Deletes all Files modified yesterday

  5. POJ_2478 Farey Sequence 【欧拉函数+简单递推】

    一.题目 The Farey Sequence Fn for any integer n with n >= 2 is the set of irreducible rational numbe ...

  6. java的Spring学习2- junit和mock

    <!-- 引用Mock --> <dependency> <groupId>org.mockito</groupId> <artifactId&g ...

  7. Spring4 笔记

    1. 通过 xml 赋值给 bean 1) 通过set 方法赋值 (必须要有空的构造方法) <bean id="user" class="com.test.User ...

  8. 《UML和模式应用(原书第3版)》目录

    学习 <UML和模式应用(原书第3版)>目标: 理解OOA/D思想 如何使用UML建模 如何使用设计模式 如何设计分层架构 目录: 第1部分 绪论 第1章 面向对象分析和设计 第2章 迭代 ...

  9. TOJ 3486 Divisibility

    Description On the planet Zoop, numbers are represented in base 62, using the digits 0, 1, . . . , 9 ...

  10. 使用jxl读取excel内容,并转换成Json,用于Datagrid

    一.上传excel文件,得到InputStream,由InputStream得到Jxl中的Workbook,取出内容,存到二维数组中. 1.使用 Jquery Uploadify 插件(http:// ...