HTML+CSS
2016.06.27~2016.07.01
核心概念
参考答案
footer元素始终贴在浏览器底部。我们知道当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部。下面要讲的布局就是解决如何使元素贴住浏览器底部。
方法一:全局增加一个负值的下边距等于底部高度
有一个全局的元素包含除了底部之外的所有内容。它有一个负值的下边距等于底部的高度
结构如下:
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
样式如下:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
这个代码需要一个额外的元素.push等于底部的高度,来防止内容覆盖到底部的元素。这个push元素是智能的,它并没有占用到底部的利用,而是通过全局加了一个负边距来填充。
效果如下:
方法二:底部元素增加负值的上边距
虽然这个代码减少了一个.push的元素,但还是需要增加一层的元素包裹内容,并给他一个内边距使其等于底部的高度,防止内容覆盖到底部的内容。
结构如下:
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
样式如下:
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
方法三:使用Flexbox布局
结构如下:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
样式如下:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
2016.06.27~2016.07.01
核心概念
参考答案
按照以前的写法是使用两个元素来控制,一个写背景透明、一个写文字。然后通过定位:absolute和层级:z-index来控制。现在我们可以通过如下方法使用一个元素来控制。
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属特性filter:属性来制作透明背景。
.rgba{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType= 1,startColorstr= #80000000,endColorstr= #80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 1,startColorstr= #80000000, endColorstr= #80000000); /*Filter for older IEs */
}
:root .rgba {
filter: none; /*IE9不需要filter*/
background: #000;
background: rgba(0, 0, 0, 0.5);
}
这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面6位是十六进制的颜色#000000(black黑色)。
2016.06.27~2016.07.01
核心概念
参考答案
/* create an arrow that points up */
.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* create an arrow that points down */
.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* create an arrow that points left */
.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-right:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/* create an arrow that points right */
.arrow-right {
width:0px;
height:0px;
border-bottom:5px solid transparent;
border-top:5px solid transparent;
border-left:5px solid #2f2f2f; /
font-size:0px;
line-height:0px;
}
JavaScript
2016.06.27~2016.07.01
核心概念
参考答案
(1)Array.toString():将数组转换成一个字符串,并且返回这个字符串。
描述:当数组用于字符串环境中时,JavaScript会调用这一方法将数组自动转换成一个字符串。toString()在把数组转换成字符串时,首先要将数组的每个元素都转换成字符串(通过调用这些元素的toString方法)。当每个元素都被转换成字符串时,它就以列表的形式输出这些字符串,字符串之间用逗号分隔。返回值与没有参数的jion()方法返回的字符串相同。
var arr = ['aa','bb','cc'];
console.log("使用join方法的结果" + arr.join()) // 使用join方法的结果aa,bb,cc
console.log("使用toString方法的结果" + arr.toString()); // 使用toString方法的结果aa,bb,cc
(2)Boolean.toString():将布尔值转换为字符串。
描述:根据原始布尔值或者Boolean对象的值返回字符串“true”或“false”。
var b = new Boolean();// boolean对象默认值为false
console.log(b.toString()); // false
console.log(("chia" == "chia").toString()); // true
(3)Date.toString():将Date对象转换成一个字符串,采用本地时间。
var today = new Date();
console.log(today); // Thu Jun 30 2016 16:45:14 GMT+0800 (中国标准时间)
console.log(today.toString()); // Thu Jun 30 2016 16:45:14 GMT+0800 (中国标准时间)
console.log(today.toLocaleString()); //2016/6/30 下午4:45:14
注意:toLocaleString()是返回使用地方日期格式规范的字符串。
(5)Number.toString():将数字转换为字符串。用它的参数指定的基数或底数(底数范围为2-36)。如果省略参数,则使用基数10。当参数值为2时,返回二进制数。
var a = 34;
console.log(a.toString()); // 34
console.log(a.toString(2));// 100010
console.log(a.toString(8));// 42
console.log(a.toString(16));// 22
2016.06.27~2016.07.01
核心概念
参考答案
1、call()方法
用于操作this的函数方法是call(),它可以指定的this值和参数来执行函数。call()的第一个参数指定了函数执行时this的值,其后的所有参数都是需要被传入函数的参数。
2、apply()方法
apply()是你可以用来操作this的第二个函数方法。apply()的工作方式和call()完全一样,但它只能接受两个参数: this 的值和一个数组或者类似数组的对象,内含需要被传入函数的参数(也就是说你可以把arguments对象作为apply()的第二个参数)。你不需要像使用call()那样一个个指定参数,而是可以轻松传递整个数组给apply()。除此之外,call()和apply()表现得完全一样。
3、bind()方法
改变this的第三个函数方法是bind()。ECMAScript 5中新加的这个方法和之前那两个颇有不同。按惯例,bind()的第一个参数是要传给新函数的this的值。其他所有参数代表需要被永久设置在新函数中的命名参数。你可以在之后继续设置任何非永久参数。
HTML5学堂小编 - 陈林&堡堡 耗时6h