做业提交截止时间:04-24css
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。html
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。前端
了解HTML的定义、概念、发展简史html5
掌握经常使用HTML标签的含义、用法css3
可以基于设计稿来合理规划HTML文档结构git
理解语义化,合理地使用HTML标签来构建页面github
参考示例图(点击查看),完成一个HTML页面代码编写(不写CSS,不须要关注样式,只关注文档结构)web
只须要完成HTML代码编写,不须要写CSSbootstrap
示例图仅为参考,不须要彻底实现一致,其中的图片、文案都可自行设定segmentfault
尽量多地尝试更多的HTML标签
做业提交截止时间:04-24
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
针对设计稿样式进行合理的HTML架构,包括如下但不限于:
理解语义化,合理地使用HTML标签来构建页面
掌握基本的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架构,包括如下但不限于:
掌握经常使用HTML标签的含义、用法
可以基于设计稿来合理规划HTML文档结构
理解语义化,合理地使用HTML标签来构建页面
掌握基本的CSS编码,包括如下但不限于:
了解CSS的定义、概念、发展简史
掌握CSS选择器的含义和用法
实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
基于第一个任务“零基础HTML编码”的代码,参考 示例图(点击查看),在步骤一的代码基础上增长CSS样式代码的编写
头部和底部的黑色区域始终是100%宽
页面右侧部分为固定宽度,左侧保持与浏览器窗口变化同步自适应变化
左侧的各个模块里面的内容宽度跟随左侧总体宽度同步自适应变化
10张图片须要永远都完整展示,因此会随着宽度变窄,从两行变成三行甚至更多,也有可能随着宽度变宽,变成一行
只须要完成HTML,CSS代码编写,不须要写JavaScript
示例图仅为参考,不须要彻底实现一致,其中的图片、文案都可自行设定
尽量多地尝试不一样的、更多的样式设定来实践各类CSS属性
HTML 及 CSS 代码结构清晰、规范
MDN HTML入门
MDN 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入门
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
使用 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,思考这一系统是如何实现的
Creating Your Own CSS Grid System:你能够先本身想一想怎么实现,没有思路的话看看别人的作法
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
经过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力
实践代码的复用、优化
经过HTML及CSS实现设计稿 设计稿PSD文件(点击下载),效果如 效果图(点击打开)
整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致
只须要完成HTML,CSS代码编写,不须要写JavaScript
tab只须要实现样式,有能力余力的同窗能够尝试实现不使用JavaScript的状况下,实现Tab切换
全部的下拉菜单(Select)均要求按照设计稿样式实现,下拉后的样式自定义,不须要实现下拉选择的功能,但样式要实现
在Chrome中完美实现与设计稿的除了文字之外的各项图片、字体、颜色、布局、内外边距等样式
有能力的同窗能够尝试跨浏览器的兼容性
有能力的同窗能够在实现一遍后尝试用less, sass或者stylus等再实现一次
MDN HTML入门
MDN CSS入门教程
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
学习如何flex进行布局,学习如何根据屏幕宽度调整布局策略。
须要实现的效果如效果图(点击打开)所示,调整浏览器宽度查看响应式效果,红色的文字是说明,不须要写在 HTML 中。
只须要完成HTML,CSS代码编写,不须要写JavaScript
屏幕宽度小于 640px 时,调整 Flexbox 的属性以实现第四个元素移动到最前面的效果,而不要改动第一个元素的边框颜色与高度实现效果图。
思考 Flexbox 布局和网格布局的异同,以及分别适用于什么样的场景。能够搜索一下别人的结论,不过要保持思辨的态度,不可直接接受别人的观点。
HTML 及 CSS 代码结构清晰、规范
Flexbox详解:了解 Flexbox 属性的含义
图解 CSS3 Flexbox 属性:看完这两篇,对 Flexbox 的了解就够了,多实践一下,理解会更深入
Flexbox——快速布局神器
使用 CSS 弹性盒
MDN flex属性
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
进行移动开发时的HTML及CSS实践
掌握移动Web开发在页面架构和布局的方法及差别性
掌握移动Web开发页面调试的方法
实现与 设计图(点击查看) 一致的移动端Web页面
本任务只涉及 HTML 及 CSS
实现的页面和设计图在iOS Safari,微信,Android浏览器中均基本一致
HTML 及 CSS 代码结构清晰、规范
尝试在适合的地方使用CSS 3中的flex布局
有能力的同窗能够在实现一遍后尝试用less, sass或者stylus等再实现一次
百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性,但即便如此,真正决定课程效果的,仍是你的每一次思考和实践。
课程多数题目的解决方案都不是惟一的,这和咱们在实际工做中的状况也是一致的。所以,咱们的要求不只仅是实现设计稿的效果,更是要多去思考不一样的解决方案,评估不一样方案的优劣,而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案,一样也能够帮助咱们学到不少知识。因此,咱们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信经过和小伙伴们的交流,能让你的学习事半功倍。
学习了解 CSS 3 都有哪些新特性,并选取其中一些进行实战小练习
实现 示例图(点击查看) 中的几个例子
本任务只涉及 HTML 及 CSS
HTML 及 CSS 代码结构清晰、规范
除了任务中的3个小任务,尽量多地尝试 CSS 3 的其余新特性