念:
在我写这次博客的时候,官网已经开了六门基础课,真的都是非产基础的课程。其实主要是因为这次的程序媛计划面向的对象是14岁以上没有丝毫基础的女生(是的就是没有男生)。
课程主要以对话的形式进行教学,其中穿插了一些代码练习。
学习的时候几乎每个对话都有经验,还有钻石,之后可能还会开竞技场。其实发这篇随笔主要是想记个小笔记,顺便安利一下。
曾几何时,我还在为仿站的事而苦恼着,几乎零基础的,被学长要求仿一个网页,靠着百度以及一本几乎没讲啥的书,愣是整出了个长得还挺像的东西(x),当然,棘手的问题还是没有解决。之前学到的Bootstrap课程,斌叔教了轮播图的基础,盯着那个特效我愣了很久,才反应过来,这不就是我之前棘手问题中的一个吗?!!!那一瞬间有种捡到宝的错觉哈哈哈!
在念上也关注了一些前端工程师,dalao们每次蹦出来的词汇都让我这个小渣一脸懵逼,百度了也没看懂他们说的是啥...然后看见斌叔开的课...噫之后的课感觉是挺难啃的了,咩继续努力吧(抖
——2017.07.15
之后自己在iMooc网上学了Python入门课程,目前正在学进阶课程,但是看着有些不会,学习进度很慢。程序媛计划新开的竞技场完美通过,C语言的课程也完美通过,很开心。在论坛中找到了小仙女们聚集的群号,加进去后看见了一群可爱的人。第一个晚上就聊了很久,学习的方向,职业发展,面试问题等。因为群里还有在职的程序媛,收获很大。平日里小仙女们也会将自己遇到的问题发出来,群内的成员们也会耐心解答,大家一起讨论,实验各种办法,挺好的,相处得很融洽哈哈。
——2017.07.25
依旧没有新课程,现在一边关注斌叔的微博一边学习基础算法(望天),今天依旧没有新课程...
——2017.08.06
学习课程中的笔记
*有错误的地方还请大佬们指出,万分感谢。
HTML
<hr/> 分割线(单身狗) 字体样式 <i> 斜体字 <b> 粗体字 <u> 下划线 src 值为图像文件的URL 列表 <ul> 无需列表 <li> 列表中每行的内容 <ol> 有序列表
<div>:可定义为文档中的分区或节,把文档分割为独立的、不同的部分。
<table border='1'><!--table表表格,border表示边框粗细-->
<tr><!--表元素行-->
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<video width:"200" height="200" src="视频地址" controls></video><!--controls设置底部控制条-->
<a href="地址"></a>
CSS
px:网页中的长度单位,类似于“千米”。
margin:设置外边距。
margin-top:上边距。
margin:0 auto; 上下边距为零,左右根据浏览器边框自动设置,也就是居中。
padding: 10px 10px 10px 10px; 上右下左,内边距。
text-align:规定元素中的文本的水平对齐方式。
<p>的style设置float可以变为一行。
position:absolute; 绝对定位。
JavaScript
1 alert('Hello World!'); 提示框显示“Hello World!”。 2 alert(1+1); 提示框显示“2”。 3 var i; 声明 i。 4 var i=1; 定义 i。之后 alert(i); 显示“1”。 5 6 var s; s="hello"; var b="world"; 7 var c=s+b; alert(c); 8 字符串可相加,结果串在一起,提示框显示“helloworld”。 9 10 通过 DOM(Document Object Model) - 文档对象模型,使HTML和JavaScript紧密地联系在一起,也称作DOM树。 11 12 1、HTML中 13 <div> 14 <p id="p1">Year.</p> 15 16 2、JS中 17 var p1=document.getElementById("p1"); 18 p1.innerHTML; //表p1的内容 19 20 p1.innerHTML='THIS IS A BOOM!!!'; 在JS中改变p1的内容。 21 22 function Hello(){ ... } 23 Hello(); //调用函数 24 25 function ola(content){ 26 alert(content); 27 } 28 ola(100); //提示框显示“100” 29 30 element.onevent=function; 31 例: 32 var b1=document.getElementById("b1"); 33 bi.οnclick=bclick; 34 function bclick(){ 35 alert('我被点击了!"); 36 } 37 通过id获取buttom这个元素: 38 onclick为点击事件,后调用bclick这个函数,弹出“我被点击了!”; 39 onmouseover 鼠标移动到元素; 40 onmouseup 鼠标按键被松开。 41 42 textarea:定义一个多行的文本输入控件。
jQuery
console.log(); 向web控制台输出一条信息。 $:document.getElementById,是在获取HTML元素。 例: $('#id'); $('#id').append(html); 选择 id 代表的元素插入html,append代表要插入 HTML。 AJAX:与服务器交换,在不重新载入整个页面的情况下更新网页的一部分。
Bootstrap
Bootstrap为一整套前端UI框架,使网页在不同尺寸的屏幕上正常显示。 网格(Grid):网页设计中的网格用于组成内容,让网站易于浏览,并降低用户端的负载。 行(row):必须放在 .container class 内,一个 row 代表一行,一行分为12列。 列(col):col-xx-y 中的 y 代表当前元素所占列数。 xx 的值可为四种(分别代表在四种尺寸宽度下的布局样式):lg(lg>=1200px)、md(md>=992px)、sm(sm>=768px)、xs(xs<768px)。 col-lg-offset-2:偏移量,在lg的布局下,当前标签加上对于列数的左外边距(margin-left)。 <div class="container"> <div class="row"> <div class="col-x-x"></div> <div class="col-x-x"></div> </div> <div class="row"> <div class="col-x-x"></div> <div class="col-x-x"></div> </div> </div> <div class="container">...</div> glyphicon/glyphicon-user:图标样式(Bootstrap官网上有更所内容)
[TBC]