面向人群:
零基础或初学者
难度:
简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。

任务目的

  • 针对设计稿样式进行合理的HTML架构,包括以下但不限于:

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

任务描述

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

任务注意事项

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

在线学习参考资料

任务二:零基础HTML及CSS编码(一)的更多相关文章

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

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

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

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

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

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

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

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

  5. 零基础JavaScript编码(二)

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  6. CSS零基础学习笔记.

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

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

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

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

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

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

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

随机推荐

  1. ccflow_005.请假流程-傻瓜表单-审核组件模式

    ccflow_005.请假流程-傻瓜表单-审核组件模式 ' 用审核组件演示各个流程应用 首先设置节点,填写请假单的 表单方案.选择内置傻瓜表单.我们之前创建的表单就回来了. 可以点击下面的设计傻瓜表单 ...

  2. C#SuperSocket的搭建--通过配置启动

    之前我们借助一个SuperSocket实现了一个简易版的服务器, 但是不管是Server还是Session都是使用框架的,本篇博客我们要实现自己的Server和Session,来重写框架原生的Serv ...

  3. githunb竟然可以识别MQ4

    完全是上班时候突发奇想,没想到能识别.只是没有现成的gitignore

  4. css margin边界叠加问题详谈

    问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值 一.代码展示 HTML <body> <div class="box"&g ...

  5. Codeforces 2 A. Winner

    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈....... 先让我笑完................ 就是一道撒比题啊,一开始是题目看错= =.是,但是后面还是自己不仔细错的.....不存在题目坑这种情况 ...

  6. python 的多线程执行速度

    python 的多线程有点鸡肋,适用场景有局限,单位时间多个核只能跑一个线程. 有泳池一个,四个泵,但只有一个人,一人只能开启管理着其中一个,所以四个泵没什么用.但是,如果泵的工作时间与冷却恢复时间是 ...

  7. noip 2018 Day2 T1 旅行

    暴力删边,暴力枚举 #include <bits/stdc++.h> using namespace std; #define MAXM 5010 inline int read() { ...

  8. TensorFlow多线程输入数据处理框架(二)——输入文件队列

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 一个简单的程序来生成样例数据. #!/usr/bin/env python # -*- coding: UTF-8 ...

  9. 关于C_Cpp的一些小结

    ## 某些函数的使用 1. printf / sprintf / fprintf printf:把格式字符串输出到标准输出(可重定向) sprintf:把格式字符串输出到指定字符串中,参数比print ...

  10. 洛谷 P3810 【模板】三维偏序(陌上花开) (cdq分治模板)

    在solve(L,R)中,需要先分治solve两个子区间,再计算左边区间修改对右边区间询问的贡献. 注意,计算额外的贡献时,两子区间各自内部的顺序变得不再重要(不管怎么样左边区间的都发生在右边之前), ...