Skip to content

shp87285604/baidutask-2017

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 

Repository files navigation

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;

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published