百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码

学科概述

学业提交终止时间:04-24

根本说明

百度前端技术学院的课程任务是由于百度前端工程师专为对前者不同掌握程度之同学设计。我们努力确保课程内容的品质和学习难度之合理性,但纵然如此,真正控制课程效果的,还是你的每一样涂鸦合计和推行。

课程多数问题的解决方案还不是绝无仅有的,这同咱们于实际上工作备受的图景呢是平的。因此,我们的渴求不仅是落实设计稿的功用,更是使多夺想不同的解决方案,评估不同方案的高低,然后运于该场景下最优雅的办法去落实。那些最终没于我们秉承的方案,同样为堪帮我们学到不少文化。所以,我们排有的参考资料未必是实现需求所须的。有的上,实现题目的求大粗略,甚至参考资料里虽生出,但是背后的想与亲手去履行却是天职尽要紧之平等片。在攻读这些资料时,要多想想,多问问,多质疑。相信通过跟伙伴们的交流,能给您的上经济。

职责目的

询问HTML的概念、概念、发展简史

控制常用HTML标签的义、用法

可知冲设计稿来合理设计HTML文档结构

亮语义化,合理地动用HTML标签来构建页面

任务描述

参考示例图(点击查阅),完成一个HTML页面代码编写(不写CSS,不需要关怀样式,只关注文档结构)

职责注意事项

一味需要做到HTML代码编写,不待写CSS

示例图仅为参考,不需了落实均等,其中的图样、文案均只是自行设定

尽量多地品尝还多的HTML标签

在线上参考资料

Web相关名词通俗解释

MDN
HTML入门

慕课HTML+CSS基础教程视频


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

课概述

作业提交终止时间:04-24

要说明

百度前端技术院的科目任务是由于百度前端工程师专为对前者不同掌握程度的同学设计。我们尽力确保课程内容的品质以及上难度的客观,但纵然这样,真正控制课程效果的,还是你的各个一样次思想和推行。

课程多数问题的解决方案都未是唯一的,这和我们于事实上工作遭到之情景吗是同样的。因此,我们的渴求不仅是兑现设计稿的意义,更是使多去思不同之解决方案,评估不同方案的三六九等,然后采用以该场景下最优雅的章程去实现。那些最终没有于我们秉承的方案,同样为足以帮我们学到不少知识。所以,我们排有之参考资料未必是实现需求所须的。有的上,实现题目的要求非常简单,甚至参考资料里便有,但是背后的思辨和亲手去履行也是职责太要的一样片段。在上这些素材时,要多想想,多问,多质疑。相信通过与同伙等的交流,能叫你的上学经济。

任务目的

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

  • 支配常用HTML标签的含义、用法
    能冲设计稿来合理规划HTML文档结构

明白语义化,合理地用HTML标签来构建页面

控制核心的CSS编码,包括以下但非压:

  • 了解CSS的概念、概念、发展简史
    左右CSS选择器的意义和用法

实施并控制CSS的颜料、字体、背景、边框、盒模型、简单布局等体制的定义方式

职责描述

因第一只任务“零基础HTML编码”的代码,参考
示例图(点击查看),在步骤一的代码基础及加码CSS样式代码的编纂

任务注意事项

独需要做到HTML,CSS代码编写,不待写JavaScript

示例图仅为参考,不需了落实均等,其中的图片、文案均只是自行设定

尽心尽力多地品尝不同之、更多之样式设定来执行各种CSS属性

HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

慕课HTML+CSS基础教程视频


任务三:三栏式布局

课程概述

学业提交了时间:04-24

要说明

百度前端技术学院的课任务是由百度前端工程师专为对前者不同掌握程度之同班设计。我们大力确保课程内容的质地及学习难度的合理,但哪怕如此,真正控制课程效果的,还是你的各个一样破合计与履。

学科多数题材之解决方案还无是唯一的,这与咱们以事实上工作屡遭之情为是一模一样的。因此,我们的渴求不仅是促成设计稿的功力,更是使多去考虑不同之解决方案,评估不同方案的优劣,然后使用以该场景下最优雅的法去实现。那些最终没让我们秉承的方案,同样也得以扶持我们学到众多文化。所以,我们排有的参考资料未必是实现需求所要的。有的时候,实现题目之求非常粗略,甚至参考资料里即使发生,但是背后的思量与手去执行也是任务太要害之一模一样有。在就学这些材料时,要多想,多问,多质疑。相信经过与同伙们的交流,能为您的攻经济。

任务目标

控制HTML/CSS布局的概念

操纵盒模型的概念

左右position与float的概念和在布局时之用法

职责描述

使用 HTML 与 CSS 按照
示例图(点击查阅)
实现三栏式布局。

反正鲜圈宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解也浏览器。背景色为
#eee 区域的惊人在三只子元素中危的冲天。

任务注意事项

尝试 position 和 float 的职能,思考它们的异同以及行使场景。

注意测试不同状况,尤其是最最情况下的成效。

图片以及仿内容要自行替换,尽可能体现团队的特性。

调节浏览器宽度,固定宽度与打适应宽度的功能一直抱预期。

变动中一棚的内容长度,以管于中游一牢较高跟右侧一苑较高时,父元素的万丈始终为子元素中高的莫大。

任何力量图被于起之标识都让科学地促成。

参考资料

MDN:position:了解
CSS position 属性的基本知识

MDN:float:了解
CSS float 属性的基本知识

Learn CSS Positioning in Ten
Steps:通过切实的例子熟悉
position 属性

消除浮动(clearfix
hack):清除浮动是呀,如何简单地铲除浮动

StackOverflow:Which method of ‘clearfix’ is
best?:铲除浮动黑科技总体解读


任务四:定位及居中问题

重中之重说明

百度前端技术学院的课程任务是由百度前端工程师专为对前者不同掌握程度之同学设计。我们努力确保课程内容的质以及上难度的合理,但哪怕如此,真正决定课程效果的,还是你的诸一样坏思想与推行。

课多数问题之缓解方案还不是绝无仅有的,这与我们当实质上工作负之情也是同等的。因此,我们的渴求不仅是贯彻设计稿的力量,更是假定多夺想想不同的化解方案,评估不同方案的优劣,然后用在该场景下最优雅的方式去落实。那些最终没被我们秉承的方案,同样为可以辅助我们学到无数文化。所以,我们排有的参考资料未必是实现需求所不可不的。有的时候,实现题目的渴求大简短,甚至参考资料里就是发出,但是背后的沉思与手去履行却是天职最着重之同一片。在求学这些资料时,要多动脑筋,多问问,多质疑。相信经过跟伙伴们的交流,能给您的上经济。

职责目标

施行HTML/CSS布局方式

深深了解position等CSS属性

任务描述

实现如
示例图(点击打开)
的效果

灰色元素水平垂直居中,有少数独四分之一周位于其左上角与右下角。

任务注意事项

琢磨不同情形下(如灰色高度是基于内容动态变化的)水平垂直居中之化解方案。

动手试一试跳各种气象的三结合,父元素和子元素分别得到不同的 position 值。思考
position 属性各种取值的着实含义,尤其是 absolute 究竟是相对谁而言之。

留神测试不同情况,尤其是无比气象下之功能。

调剂浏览器宽度,灰色元素始终水平居中。

调剂浏览器高度,灰色元素始终垂直居中。

调节浏览器高度与宽,黄色扇形的定势始终准确。

别功能图中于闹之标识全为正确地落实,错一宗扣一细分。

参考资料

HTML和CSS高级指南的二——定位详解:大漠教师手把手教而,这次彻底整治懂定位问题

Centering in CSS: A Complete
Guide:完整讨论了不同情形下的居中方案,建议协调想后再次看答案

Get HTML & CSS Tips In Your
Inbox:有人写了一个作弊工具生成居中代码,但是关押正在代码你掌握怎么吧


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

一言九鼎说明

百度前端技术学院的课程任务是由百度前端工程师专为对前者不同掌握程度的同校设计。我们力图确保课程内容的成色及学习难度的成立,但就如此,真正控制课程效果的,还是你的各一样破合计与推行。

学科多数题材之解决方案还无是唯一的,这与咱们以事实上工作着的场面呢是相同的。因此,我们的渴求不仅是落实设计稿的意义,更是假定多夺思不同的化解方案,评估不同方案的高低,然后以以该场景下最优雅的艺术去贯彻。那些最终没有被我们秉承的方案,同样也得协助我们学到广大学问。所以,我们排有的参考资料未必是实现需求所必须的。有的上,实现题目之求非常粗略,甚至参考资料里即使生出,但是背后的盘算与亲手去履行却是天职尽重大之同一有些。在攻读这些资料时,要多琢磨,多问问,多质疑。相信通过跟伴侣等的交流,能被你的攻经济。

任务目的

针对设计稿样式进行合理的HTML架构,包括以下但非压:

  • 操纵常用HTML标签的含义、用法
    可知基于设计稿来合理设计HTML文档结构
    懂语义化,合理地采用HTML标签来构建页面
    支配核心的CSS编码,包括以下但未限于:

  • 打探CSS的定义、概念、发展简史
    控CSS选择器的含义和用法

执行并操纵CSS的颜色、字体、背景、边框、盒模型、简单布局等体制的概念方式

任务描述

冲第一只任务“零基础HTML编码”的代码,参考
示例图(点击查阅),在步骤一的代码基础及加CSS样式代码的修

脑袋和脚的黑色区域一直是100%丰厚

页面右侧部分吗一定宽度,左侧保持同浏览器窗口变化并由适应变化

左侧的相继模块里面的内容宽度跟随左侧整体小幅同步于适应变化

10摆设图片需要永远都完全呈现,所以会趁着宽度变狭窄,从零星实施变成三行甚至更多,也出或随着宽度变富裕,变成一行

职责注意事项

不过待好HTML,CSS代码编写,不欲写JavaScript

示例图仅为参考,不需要全实现平等,其中的图形、文案均只是活动设定

尽可能多地尝不同的、更多的体裁设定来实行各种CSS属性

HTML 及 CSS 代码结构清晰、规范

在线学习参考资料

MDN HTML入门

MDN CSS入门教程

慕课HTML+CSS基础教程视频


职责六:通过HTML及CSS模拟报纸排版

关键说明

百度前端技术学院的学科任务是由百度前端工程师专为对前者不同掌握程度之同桌设计。我们着力确保课程内容的色及上难度之客体,但哪怕这样,真正决定课程效果的,还是你的诸一样赖想和行。

课多数问题之缓解方案都未是唯一的,这和咱们于实际工作负之状况也是相同的。因此,我们的要求不仅是兑现设计稿的效果,更是要多夺想不同之缓解方案,评估不同方案的好坏,然后下于该场景下最优雅的法门去落实。那些最终没叫我们秉承的方案,同样为堪辅助我们学到无数文化。所以,我们排有的参考资料未必是实现需求所须的。有的上,实现题目的求老粗略,甚至参考资料里就生出,但是背后的想想和亲手去履行也是任务尽着重之同样有的。在攻读这些资料时,要多琢磨,多咨询,多质疑。相信通过跟伴侣等的交流,能于您的攻经济。

职责目的

深深掌握CSS中的书体、背景、颜色等属性之设置

越练CSS布局

职责描述

参考
PDS设计稿(点击下载),实现页面开发,要求实现力量和
样例(点击查看)
基本一致

页面被之各字体大小,内外边距等可参考
标注图(点击查阅)

页面宽度固定(定宽)

任务注意事项

特需要就HTML,CSS代码编写,不待写JavaScript

设计稿中的图片、文案均只是机关设定

在Chrome中到兑现可标注着之个说明

起能力的校友可以品尝过浏览器的兼容性

来能力的同室可以以促成平等遍后尝用less, sass或者stylus等再落实同破

在线学习参考资料

MDN HTML入门
MDN CSS入门教程


任务七:实现大规模的技术产品官网的页面架构和体制布局

主要说明

百度前端技术院的学科任务是由于百度前端工程师专为对前者不同掌握程度之同桌设计。我们着力确保课程内容的成色与上难度之客体,但尽管这样,真正主宰课程效果的,还是你的各级一样差思想和实践。

课程多数题材之解决方案都无是唯一的,这与咱们以事实上工作负之景况也是相同的。因此,我们的渴求不仅是兑现设计稿的效应,更是使多夺考虑不同之解决方案,评估不同方案的好坏,然后以以该场景下最优雅的方法去实现。那些最终没有受我们秉承的方案,同样为足以帮助我们学到许多知识。所以,我们排有之参考资料未必是实现需求所不可不的。有的上,实现题目的要求老简单,甚至参考资料里就产生,但是背后的琢磨和亲手去实践也是职责最紧要的同样部分。在求学这些素材时,要多考虑,多问,多质疑。相信经过与同伙等的交流,能给你的习经济。

任务目的

经过兑现一个大的技巧活官网,加深对HTML,CSS的实战能力

学学掌握哪些当并未标注的情状下实现规划稿到页面的准转变

职责描述

透过HTML及CSS实现设计稿
设计稿PSD文件(点击下载),效果如
效果图(点击打开)

设计稿是发早晚幅度之,这个宽度为页面的无限小增幅,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不移,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的大幅度应该维持同浏览器窗口宽度一致,具体什么有题目不做具体指明,看看大家的判定什么。

职责注意事项

惟有待就HTML,CSS代码编写,不需要写JavaScript

设计稿中之图片、文案均只是活动设定

在Chrome中完美兑现同设计稿的个字体、布局、内外边距等体制

发生能力的同室可以尝尝过浏览器的兼容性

生力量的同班可以当促成均等整整后尝用less, sass或者stylus等再次落实同不成

在线上参考资料

MDN HTML入门

MDN CSS入门教程

职责八:响应式网格(栅格化)布局

要说明

百度前端技术学院的学科任务是由百度前端工程师专为对前者不同掌握程度的同校设计。我们力图确保课程内容的成色及学习难度的客体,但就如此,真正控制课程效果的,还是你的各个一样不良合计与推行。

学科多数题材之化解方案还无是唯一的,这跟咱们以事实上工作面临的状态为是相同的。因此,我们的渴求不仅是实现设计稿的成效,更是假定多夺思不同之化解方案,评估不同方案的优劣,然后利用以该场景下最优雅的道去实现。那些最终没有为我们秉承的方案,同样为足以扶持我们学到博知识。所以,我们排有之参考资料未必是实现需求所要的。有的上,实现题目之要求老简单,甚至参考资料里即使产生,但是背后的思量与亲手去实施却是任务最为重大之同有。在上学这些材料时,要多虑,多咨询,多质疑。相信经过和同伴们的交流,能于您的学经济。

职责目的

使用 HTML 与 CSS 实现看似 BootStrap 的响应式 12
栏网格布局,根据屏幕宽度,元素占的栏数不同。

任务描述

需要实现而 效果图 所示,调整浏览器宽度查看响应式效果,效果图被之红色的仿是印证,不需写以
HTML 中。

职责注意事项

网格布局之打算在于重新有效地控制元素以网页遭到所占据比重的深浅。比如,博客中起一个留言板模块,在可比好之屏幕上,我们愿意它占了右侧
25% 的宽度,在大哥大当比较粗的屏幕及,我们意在它们占 100%
的幅度,出现在博客文章下方。网格布局是同一种植实现就等同需的主意,它的补益是,把具有的增幅分为固定栏数(常用
12 栏),从而又便捷之主宰元素宽度。而及时意义,我们采取 HTML 和 CSS
就可知促成了。

因为 BootStrap 的网格系统也条例,DOM 元素类名形如 col-md-4;其中 col 是“列”
column 的缩写;md 是 medium 的缩写,适用于应屏幕宽度超过 768px 的观;4
凡是占有四棚的意。因此,col-md-4 的意思是,在屏幕宽度超过 768px
时,该因素占四栏。

在线学习参考资料

BootStrap 官网:如果您从未因此过的语句,至少了解一下它们是做啊的

Bootstrap grid
examples:改变浏览器宽度,查看不同类名元素的见,理解网格系统的企图。然后,通过“审查元素”查看相应
CSS,思考这同样系是怎么兑现的

BootStrap 带 offset
的网格系统

Creating Your Own CSS Grid
System:你得优先自己想怎么落实,没有思路的言语看别人的做法


任务九:使用HTML/CSS实现一个繁杂页面

重在说明

百度前端技术院的课任务是由于百度前端工程师专为对前者不同掌握程度之同窗设计。我们大力确保课程内容的质以及上难度之合理,但即便这样,真正主宰课程效果的,还是你的各个一样次等思想和施行。

学科多数题材的化解方案还不是绝无仅有的,这同咱们于其实工作受到的状态吗是一律的。因此,我们的求不仅是落实设计稿的效应,更是假定多去思维不同的缓解方案,评估不同方案的上下,然后使用在该场景下最优雅的方去贯彻。那些最终并未让我们秉承的方案,同样也得帮忙我们学到众多学问。所以,我们排有底参考资料未必是实现需求所要的。有的时候,实现题目之渴求充分简短,甚至参考资料里便来,但是背后的思辨和手去执行也是职责尽要的一致有的。在上这些素材时,要多琢磨,多问,多质疑。相信通过和同伙等的交流,能让你的上学经济。

职责目的

经过兑现一个较为复杂的页面,加深对HTML,CSS的实战能力

施行代码的复用、优化

任务描述

经过HTML及CSS实现设计稿
设计稿PSD文件(点击下载),效果如
效果图(点击打开)
整页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致

任务注意事项

独需要好HTML,CSS代码编写,不待写JavaScript

tab只需要贯彻样式,有力量余力的同校可以尝试实现不使JavaScript的场面下,实现Tab切换

备的下拉菜单(Select)均要求按照统筹稿样式实现,下拉后的体制自定义,不待贯彻下拉选择的效用,但样式而贯彻

每当Chrome中到兑现与设计稿的不外乎文字之外的各图片、字体、颜色、布局、内外边距等体制

发力量的校友可以尝尝过浏览器的兼容性

生力量的同室可以于落实平等整后尝用less, sass或者stylus等再度落实均等糟

在线学习参考资料

MDN HTML入门

MDN CSS入门教程


任务十:Flexbox 布局练习

关键说明

百度Bootstrap前端技术院的教程任务是由于百度前端工程师专为对前者不同掌握程度之校友设计。我们全力确保课程内容的身分与上难度之合理性,但纵然这样,真正主宰课程效果的,还是你的各级一样次于思想和实行。

课程多数题材之解决方案还无是绝无仅有的,这跟咱们以其实工作面临的情状为是均等的。因此,我们的求不仅是实现设计稿的职能,更是假定多夺思不同的化解方案,评估不同方案的好坏,然后以以该场景下最优雅的道去实现。那些最终没有受我们秉承的方案,同样为足以帮助我们学到许多知识。所以,我们排有之参考资料未必是实现需求所不可不的。有的上,实现题目的要求充分简单,甚至参考资料里就是产生,但是背后的思索和亲手去实践也是职责最为重大的相同部分。在就学这些素材时,要多思量,多问,多质疑。相信通过与同伙等的交流,能为你的习经济。

职责目的

习怎么样flex进行布局,学习怎么样根据屏幕宽度调整布局策略。

任务描述

需要实现的效果使效果图(点击打开)所示,调整浏览器宽度查看响应式效果,红色的仿是验证,不需写以
HTML 中。

职责注意事项

仅待做到HTML,CSS代码编写,不待写JavaScript
屏幕宽度小于 640px 时,调整 Flexbox
的性能为促成第四个元素移动及最好前方的职能,而不要改动第一只要素的边框颜色与高度实现力量图。
合计 Flexbox
布局和网格布局之异同,以及分级适用于怎样的光景。可以寻找一下旁人的定论,不过假如维持思维的神态,不可直接承受别人的意。
HTML 及 CSS 代码结构清晰、规范

在线上参考资料

Flexbox详解:了解 Flexbox
属性的含义
图解 CSS3 Flexbox
属性:看了就有限篇,对
Flexbox 的垂询就够用了,多行一下,理解会更深厚
Flexbox——快速布局神器
使用 CSS
弹性盒
MDN flex属性


任务十一:移动Web页面布局实践

重点说明

百度前端技术院的学科任务是由百度前端工程师专为对前者不同掌握程度之同窗设计。我们大力确保课程内容的质和上难度之客体,但即便如此,真正控制课程效果的,还是你的每一样不成思想和施行。

课程多数问题之缓解方案还不是唯一的,这同咱们于实际工作被的状况吧是同样的。因此,我们的要求不仅是促成设计稿的效果,更是使多夺思辨不同之缓解方案,评估不同方案的高低,然后下于该场景下最优雅的法去落实。那些最终并未叫我们秉承的方案,同样为堪辅助我们学到无数文化。所以,我们排有的参考资料未必是实现需求所必须的。有的上,实现题目之渴求非常粗略,甚至参考资料里虽发出,但是背后的思考与手去履行却是天职最要之同一有些。在求学这些素材时,要多考虑,多问,多质疑。相信经过与同伙们的交流,能给你的上经济。

任务目的

开展活动支付时之HTML及CSS实践

控制活动Web开发在页面架构和布局之计与差异性

操纵活动Web开发页面调试之艺术

任务描述

实现与
设计图(点击查阅) 一致的走端Web页面

任务注意事项

遵照任务单涉及 HTML 及 CSS

兑现之页面和规划图在iOS Safari,微信,Android浏览器中皆基本一致

HTML 及 CSS 代码结构清晰、规范

品尝以符合之地方使用CSS 3中的flex布局

起能力的校友可以当落实同总体后尝用less, sass或者stylus等重新落实平等不良

在线上参考资料

  • MDN:手机网页开发
  • MDN:在运动浏览器中运用viewport元标签控制布局
  • 动前端开发和 Web
    前端开发的分是啊
  • Alloyteam移动支付规范概述
  • 手机/移动前端开发需要注意的20单中心
  • w3cplus响应式技术资源
  • 浅尝辄止谈移动Web开发
  • Alloyteam Mars
  • 运动WEB开发入门
  • 运动开发资源集合
  • The Mobile Web Handbook
  • MobileWeb 适配总结
  • 挪动前端不得不垂询之html5 head
    头标签

职责十二:学习CSS 3的初特色

重中之重说明

百度前端技术学院的教程任务是出于百度前端工程师专为对前者不同掌握程度之同校设计。我们着力确保课程内容的成色及学习难度的合理性,但就是如此,真正主宰课程效果的,还是你的各级一样涂鸦想与实施。

学科多数题目之化解方案都非是唯一的,这与我们当实质上工作着之动静吗是一致的。因此,我们的求不仅是贯彻设计稿的法力,更是假定多去思考不同之化解方案,评估不同方案的上下,然后使用以该场景下最优雅的章程去实现。那些最终没有让我们秉承的方案,同样也可帮忙我们学到众多知识。所以,我们排有之参考资料未必是实现需求所要的。有的时候,实现题目之要求充分简单,甚至参考资料里便生,但是背后的想想与手去执行也是任务太紧要的一致有的。在攻读这些材料时,要多琢磨,多咨询,多质疑。相信通过和伴侣等的交流,能为你的攻经济。

任务目的

学学了解 CSS 3 都发生哪些新特点,并选择中有些展开实战小练

职责描述

心想事成 示例图(点击查阅) 中的几乎单例证

任务注意事项

本任务单干 HTML 及 CSS
HTML 及 CSS 代码结构清晰、规范
除去任务中之3只小任务,尽可能多地品尝 CSS 3 的另新特色

在线上参考资料

  • 《图解CSS3》
  • W3School CSS3 教程
  • MDN CSS 3

 

相关文章