baidutask-2017

KO | EN

gitlite — search

#react #ai #typescript #llm #deep-learning #macos #nodejs #java #windows #cli #vue #awesome-list #openai #open-source

(★ 11)

百度前端技术学院2017年任务demo

baidutask-2017 Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# baidutask-2017
百度前端技术学院任务2017（代码请见gh-pages分支）

># task1：有趣的鼠标悬浮模糊效果（糯米学院-进阶）

任务描述： 
1.实现任务图示效果（效果基本为下面2、3、4条所描述）； 
2.实现文字的流光渐变动画； 
3.背景图需要进行模糊处理； 
4.实现按钮边框的从中间到两边扩展开。 
完成时间：2017-2-26。 
完成效果：完成任务所要求效果，对边框扩展的实现使用了两种方法，并使用css3实现了两种另外的效果。 
demo：http://smallstarz.com/baidutask-2017/nuomi-task1-mouseSuspending/mouseSuspending.html; 
demo代码：https://github.com/smallstar92/baidutask-2017/tree/gh-pages/nuomi-task1-mouseSuspending; 
学习笔记：http://smallstarz.com/2017/02/26/baidu2017-nuomitask1-css/;

># task2：CSS3饼状loading效果（糯米学院-进阶）

任务描述： 
1.需要使用HTML和CSS实现半圆和四分之三圆环； 
2.longding动画页面上下左右剧中； 
3.所有的动画元素采用HTML和CSS实现。 
完成时间：2017-3-15。 
完成效果：按照任务内容完成效果，对于制作圆饼，使用了两种方法实现。 
demo：http://smallstarz.com/baidutask-2017/nuomi-task2-loadingcircle/loadingcircle.html; 
demo代码：https://github.com/smallstar92/baidutask-2017/tree/gh-pages/nuomi-task2-loadingcircle; 
学习笔记：http://smallstarz.com/2017/02/26/baidu2017-nuomitask1-css/;

># task1-10：小薇学院基础任务1-10

任务描述： 
小薇学院主要是通过练习一些基础任务，达到巩固html/css基础的目的。学院的任务主要来自百度前端技术学院2016，
在2月份的时候，已经完成了百度前端技术学院2016的五个基础任务，通过再一次学习和修改代码，进一步巩固基础。 
#任务一：零基础HTML编码 
完成时间：2017-3-16。 
完成效果：通过此任务，主要了解html各类标签的使用，主要掌握标签语义化，这是html5的主旨之一。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task1/task_1_2_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task1; 
#任务二：零基础HTML及CSS编码（一） 
完成时间：2017-3-16。 
完成效果：通过此任务，主要对css的基础知识进行学习，掌握盒模型、定位等原理。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task2/task_1_2_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task2; 
#任务三：三栏式布局 
完成时间：2017-3-17。 
完成效果：个人认为，三栏式布局除了一般定宽的布局之外，需要了解双飞翼/圣杯布局。在完成本任务时，分别使用了圣杯及双飞翼来实现三栏式，
详请见代码地址。具体两者的使用和区别请见学习报告。 
demo1：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task3/shuangfeiyi/task_1_3_1.html; 
demo2：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task3/shengbei/task_1_3_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task3; 
学习笔记：http://smallstarz.com/2017/02/20/baidutask3-css/ 
#任务四：定位和居中问题 
完成时间：2017-3-18。 
完成效果：对父元素采用定宽高，设置top/left值和margin-top/margin-left值来居中；此时，由于父元素已定宽高，对于两个子元素，直接使用top/left值即可定位到正确位置。对于子元素，直接设置border-radius值即可达到四分之一圆效果。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task4/task_1_4_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task4; 
#任务五：零基础HTML及CSS编码（二） 
完成时间：2017-3-18。 
完成效果：根据任务描述基本完成效果图样式，其中存在差别的地方在于：我的demo未设置边框阴影效果；此外，header和footer未采用黑色。
对于任务的要求，为保证模块内图片自适应窗口宽度变化，对其宽度设置为百分数值；为保证十张图片完整显示，且随窗口宽度变化自动变化排列以适应，
采用dd列表包含图片，并设置向左漂移；对于这一个问题，还有一个解决思路是，设置其为内联块级元素或者display为自适应伸缩盒（flex）。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task5/task_1_5_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task5; 
#任务六：通过HTML及CSS模拟报纸排版 
完成时间：2017-3-28。 
完成效果：主要通过该任务，对css布局定位/字号设置等进行了学习，目前，已经能够熟悉掌握css/html。在完成过程中遇到的问题：
对段落首字进行下沉时，需要设定其行高等于字体尺寸，否则在某些浏览器里不会达到首字下沉效果；对a标签的url地址等，
需要设置其word-wrap:break-word，否则在某些浏览器里不会有自动强制换行的效果。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task6/task_1_6_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task6; 
#任务七：实现常见的技术产品官网的页面架构及样式布局 
完成时间：2017-4-1。 
完成效果：通过完成本任务，进一步了解html结构/css样式编写，在本任务中使用了部分css3动画效果，让按钮/图片转换等看起来更平滑。
此外，在过程中也发现几处之前不曾注意会出现误差的细节，并且，感觉需要对css选择器的优化进行学习。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task7/task_1_7_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task7; 
#任务八：实现常见的技术产品官网的页面架构及样式布局 
完成时间：2017-4-4。 
完成效果：通过完成本任务，了解栅格化布局，主要使用到@media，此外，对bootstrap使用栅格化的原理进行了了解。 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task8/task_1_8_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task8; 
#任务九：使用HTML/CSS实现一个复杂页面 
完成时间：2017-4-9。 
完成效果：通过完成本任务，主要是对html和css进行了综合使用。该页面较复杂，使用到ul（ul的嵌套），table表格（table与其内部tr/td/th等的样式设置），
form表单（表单内select/label/input等元素的样式设置）等元素。在完成过程中，对右边的主体部分采用了上个任务中学习到的栅格化布局思想；
重点熟悉了:nth-child选择器的使用；最后，考虑代码复用的情况，对左侧栏的列表的类名及结构重新进行了设置，
除第一层列表和最后一层列表的类名与中间层列表有少许差别外，中间层列表类名命名进行系统化，如果在后续使用js进行交互的话，可以嵌套多层列表；
对右侧主体几大块区域的元素设置类名的时候，也重新进行了系统化，避免类名太多以致查找困难，设置重复 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task9/task_1_9_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task9; 
#任务十：Flexbox 布局练习 
完成时间：2017-4-10。 
完成效果：通过完成本任务，初步对flex伸缩盒进行了学习。了解其一些常用属性的使用方法 
demo：http://smallstarz.com/baidutask-2017/xiaoweixueyuan/task10/task_1_10_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/xiaoweixueyuan/task10; 
#以上，对task4-9的小结请见笔记，对flex盒子的学习笔记请见： 
task4-9：http://smallstarz.com/2017/04/10/baidu2017-xiaoweixueyuan5to10-html-css/; 
task10flex盒子：

># task11-12：斌斌学院基础任务1-2

任务描述： 
彬彬学院主要是通过练习一些基础任务，对js的基础知识进行学习。 
#任务一：零基础JavaScript编码（一） 
完成时间：2017-4-13。 
完成效果：对js基本语法，事件及DOM原理进行学习，任务涉及鼠标点击事件以及一个简单的函数。 
demo：http://smallstarz.com/baidutask-2017/binbinxueyuan/task1/task_1_1_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/binbinxueyuan/task1; 
#任务二：零基础JavaScript编码（二） 
完成时间：2017-4-15。 
完成效果：本任务涉及的是数组的知识，在任务中使用到filter()，sort()方法，在完成任务过程中对数组的各种方法也进行了学习。 
demo：http://smallstarz.com/baidutask-2017/binbinxueyuan/task2/task_1_2_1.html; 
demo代码：http://github.com/smallstar92/baidutask-2017/tree/gh-pages/binbinxueyuan/task2;

baidutask-2017

baidutask-2017 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

baidutask-2017

baidutask-2017 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README