【百度前端技术学院 Day7/8】布局

1. 定位 1.1 文档流单个元素: 块级元素:内容宽度是其父元素的宽度的100%,并且与其内容一样高. 内联(行内)元素:高宽与他们的内容高宽一样.(所以不能为他们设置宽高) 元素之间的交互: 块级元素:在视口中垂直布局——每个都将显示在上一个元素下面的新行上. 内联元素:它们互相之间以及任何相邻(或被包裹)的文本内容位于同一行上.如果没有空间,那么溢出的文本或元素将向下移动到新行. 外边距折叠:两个外边距接触,则两个外边距中的较大者保留,较小的一个消失. 1.2 介绍定位 1.2.1 静态…

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

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

百度前端技术学院task1.10

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

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

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

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

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

【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含content.padding.border //width和height属性包括content.padding和border,但是不包括margin(外边距)box-sizing: border-box; 1.2 内边距 padding 1.3 边框 border 1.4 外边距 margin 外边距塌陷:…

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

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

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

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

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

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

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

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

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

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

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

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

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

百度前端技术学院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 } 解题思路: …

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

百度前端技术学院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的基础上添加了相应的命令,其他并没有…

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