百度前端技术学院-基础-day22-24

百度前端技术学院-基础-day1

2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3school的HTML.HTML5等等. Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么? W3School的HTML教程 W3School的HTML5教程 MDN Web开发入门还提供了一些制作的很…

百度前端技术学院-基础-day2

2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简历回答课程最后的小问题: HTML是什么,HTML5是什么? HTML是一种超文本编辑语言,是编辑网页内容的语言. HTML5是目前html系列最新的标准. 具有如下新的特性: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内…

百度前端技术学院-基础-day20-21

第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项当用户选择了 School 的单选框时,显示 Company 的下拉选项,隐藏 School 的下拉选项 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title…

百度前端技术学院-基础-day17-18

JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异常的时候,把错误信息提示到Console中. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE ECMAScript</tit…

百度前端技术学院-基础-day22-24

第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text"> <la…

百度前端技术学院-基础-day25-27

倒数开始滴答滴滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新格式为 YYYY 年 MM 月 DD 日星期 D HH:mm:ss 注意位数的补齐,比如:-- 假设时间为2008年10月10日星期一的12点12分12秒,显示2008年10月10日星期一 12:12:12-- 假设时间为2008年1月1日星期一的3点2分2秒,显示2008年01月01日星期一 03:02…

百度前端技术学院-基础-day7.8

任务:参考如下设计稿实现HTML页面及CSS样式代码点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 &…

百度前端技术学院-基础-day3

2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. 增加了基础CSS样式的简历回答问题: 什么是CSS,CSS是如何工作的 CSS是给HTML的内容添加样式的,通过选择器选择要改变样式的元素,通过属性名称:值表达要改变成的样式. CSS全称是层叠样式表,说明不同选择符之间具有优先级.复杂网站可能会有非常多CSS的规则,因此必须先定义好这些规…

百度前端技术学院-基础-day5.6

今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github.com/ole511/font-end-learning/blob/master/day5.6-resume.html CSS: https://github.com/ole511/font-end-learning/blob/master/day5.6-resume.html…

百度前端技术学院（IFE）2016春季学期总结

今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了,但是做任务只是一个引导,而在做任务的过程中学到了知识和思想,开阔了视野,从一个对前端一无所知的小白,到现在掌握了基本的前端编程能力.对前端的整个生态圈.当前热门技术和发展趋势有了一个初步的认识,为自己继续成长打下了坚实的基础,这才是最大最重要的收获.当然,满满的成就感也是很让人开心的! 总结一下2月…

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

任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同…

百度前端技术学院task1.10

任务十:Flexbox 布局练习面向人群: 有一定HTML及CSS基础的同学难度: 中重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终…

通过Github Pages在线查看百度前端技术学院完成的任务成果

前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;} .note-content img {border: 0.3em solid #e0dfcc; -moz-border-r…

百度前端技术学院-task1.3源代码

因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task1-3</title> <link rel="shortcut icon" href="/sjq_ico.png" /> <style…

百度前端技术学院2015JavaScript基础部分代码实现

2. JavaScript数据类型及语言基础(一) 2.1 任务描述创建一个JavaScript文件,比如util.js: 实践判断各种数据类型的方法,并在util.js中实现以下方法: // 判断arr是否为一个数组,返回一个bool值 function isArray(arr) { // your implement } // 判断fn是否为一个函数,返回一个bool值 function isFunction(fn) { // your implement } 解题思路: …

百度前端技术学院2015JavaScript基础部分-BOM

5.1 任务描述实现以下函数 // 判断是否为IE浏览器,返回-1或者版本号 function isIE() { // your implement } // 设置cookie function setCookie(cookieName, cookieValue, expiredays) { // your implement } // 获取cookie值 function getCookie(cookieName) { // your implement } 1.判断是否为IE浏览器,则需要…

百度前端技术学院2015JavaScript基础部分实现自己的小型jQuery

// 实现一个简单的Query function $(selector) { ); if (firstChar == "#") { var len = selector.split(" "); ) { ,selector.length)); } else { var resu = []; ].slice(,len[].length)); ; i < getId.children.length; i++) { ].slice(,len[].length)) {…

对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的组别: * 语义:能够让你更恰当地描述你的内容是什么: * 连通性:能够让你和服务器之间通过创新的技术方法进行通信: * 离线&存储:能够让网页在客户端本地存储数据更高效地离线运行: * 多媒体:使用video和audio成为了所有web中的一等公民: * 2D/3D绘图&效果:提供了一个更加…

百度前端技术学院Html&CSS学习资源

Web相关名词通俗解释 https://www.zhihu.com/question/22689579 MDN HTML入门 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction 慕课HTML+CSS基础教程视频 http://www.imooc.com/learn/9 MDN HTML入门 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Intro…

百度前端技术学院task35源代码——听指令的小方块3

任务描述如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致当textarea发生上下滚动时,代码行数列同步滚动能够判断指令是否合法,不合法的指令给出提示(如图) 点击执行时,依次逐条执行所有命令对于GO,TRA以及MOV指令增加可以移动格子数量的参数,例如 GO 3:向当前方向前进三格 TRA TOP 2:向屏幕上方平移两格 MOV RIG 4:方向转向屏幕右侧…

百度前端技术学院task34源码——会指令的小块2

任务描述增加新的指令如下: TRA LEF:向屏幕的左侧移动一格,方向不变 TRA TOP:向屏幕的上面移动一格,方向不变 TRA RIG:向屏幕的右侧移动一格,方向不变 TRA BOT:向屏幕的下面移动一格,方向不变 MOV LEF:方向转向屏幕左侧,并向屏幕的左侧移动一格 MOV TOP:方向转向屏幕上面,向屏幕的上面移动一格 MOV RIG:方向转向屏幕右侧,向屏幕的右侧移动一格 MOV BOT:方向转向屏幕下面,向屏幕的下面移动一格分析: 只是在1的基础上添加了相应的命令,其他并没有…

百度前端技术学院-task1.8源代码以及个人总结

通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了absolute,relative,float的用法了,这三者结合在一起真的很强大.当然要注意的就是清除浮动了. 清除浮动所用的代码: .clearfix { *zoom:; } .clearfix:before, .clearfix:after { display: table; line-heig…

百度前端技术学院task16源代码

欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3.在正则判断过程中,没有添加return,导致后面出现一系列异常.添加return之后,后面的函数不会继续运行,整个函数体提前结束,再重新开始: 4.条件运算符的?打成中文状态下的问号.也因为之前没有添加return,导致这里产生了错误. 5.就是怎么绑定事件动态删除一行数据. 6.js中call的…

百度前端技术学院2018笔记之利用 CSS animation 制作一个炫酷的 Slider

前言题目地址利用 CSS animation 制作一个炫酷的 Slider 思路整理首先页面包含三种东西一个是type为radio的input其实就是单选框二是每个单选框对应的label 三是你要用作背景的每个图片然后具体实现思路是你点击每个label然后出现对应的图片基本布局首先是对界面进行布局 <div class="page"> <div class="slider"> <input id="img1&q…

IFE 百度前端技术学院 2016年春季班作业第一阶段任务（1-4）的总结

具体任务详细介绍可参考http://ife.baidu.com/task/all 具体代码参考:https://github.com/sunshineqt/webxt/tree/master/stage1 遇见的问题及解决: 任务1: 1 中文乱码在<head></head>标签内加上<meta charset=”utf-8”>. 2 表单中method属性值 post和get两个属性值,一般选用post,安全性高.get是从服务器上获取数据:post是向服务器传送数…

百度前端技术学院js任务三

任务地址:http://ife.baidu.com/course/detail/id/98 代码: <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body> <ul id="source"> <li>北京空…

百度前端技术学院-task2.18-2.19源码以及个人总结

源码:http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551 1.感觉在写js的时候,最好先理清思路,先干什么,在干什么,不要想到哪里写到哪里: 2.一定要学会调试js,不然你哗哗写了好多,结果一运行,却不知问题出到哪里,那就是浪费时间: 3.正则表达式的写法,以及如何运用,有两种方式,分别采用test()和match(); var pattern=/^[+,-]?\d+$/; iptValue=ipt.value.tri…

百度前端技术学院-task1.8源代码

主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@media (min-width: 769px){}代表的是屏幕至少大于等于769px;@media (max-width: 769px){}代表的是屏幕至少小于等于769px; 3.before,after的用法,还有待进一步去理解. 4.calc()的运用,注意不要符号之间要留有空格. 5.out…

百度前端技术学院task1 总结

1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-right为元素宽度的负一半. 2.关于表单对其,较好的方法是使用table来制作表单. 3.制作表格的时候,有时一个单元格包含多行,这时可以使用<td rowspan="x"></td>或<td colspan="x"></td&…

百度前端技术学院-task1.4源代码

任务描述实现如示例图(点击打开) 的效果灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值.思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的. 注意测试不同情况,尤其是极端情况下的效果. 调节浏览器宽度,灰色元素始终水平居中. 调节浏览器高度,灰色元素始终垂直居中. 调节浏览…

【百度前端技术学院-基础-day22-24】的更多相关文章