【百度前端技术学院-task1.8源代码】的更多相关文章

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

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

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

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

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

任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>six</title> <link rel="stylesheet" href="./six.css"…

百度前端技术学院-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.4源代码

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

百度前端技术学院task1.10

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

百度前端技术学院task1 总结

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

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

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

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

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

通过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…

百度前端技术学院-基础-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开发入门 还提供了一些制作的很…

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

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

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

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

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

这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[i].innerText即可获取去掉标签的内容. <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title>…

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

刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body> <h3>污染城市列表</h3>…

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

突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body>…

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

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

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

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

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

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

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

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

百度前端技术学院-基础-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…

百度前端技术学院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)) {…

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

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

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是向服务器传送数…

百度前端技术学院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…

百度前端技术学院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…

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

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