专栏首页HTML5学堂2016.07 第一周 群问题分享

2016.07 第一周 群问题分享

HTML+CSS

如何用CSS实现一个元素footer一直贴在浏览器底部

2016.06.27~2016.07.01

核心概念

margin-bottom负值、margin-top负值、Flexbox布局

参考答案

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;
}

如何用CSS实现背景透明文字不透明

2016.06.27~2016.07.01

核心概念

rgba()

参考答案

按照以前的写法是使用两个元素来控制,一个写背景透明、一个写文字。然后通过定位: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黑色)。

如何用CSS写出三角形并兼容IE6

2016.06.27~2016.07.01

核心概念

盒模型的border

参考答案

/* 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

JavaScript中的toString()方法怎么用

2016.06.27~2016.07.01

核心概念

toString()

参考答案

(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

怎样改变this指向

2016.06.27~2016.07.01

核心概念

call()、apply()、bind()

参考答案

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

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-07-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 传统企业站开发 - 模块开发

    这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理...

    HTML5学堂
  • CSS3盒阴影 box-shadow

    HTML5学堂:CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,在移动端我...

    HTML5学堂
  • CSS3圆角 border-radius

    HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

    HTML5学堂
  • 55 个提高你 CSS 开发效率的必备片段

    这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找?

    enoyo
  • 通过代码WordPress文章超过N天未更新提示

    方法:复制以下代码添加至文章页面Single.php 添加至合适的位置其中代码中的180为180天,可根据需要自行修改。

    叮当叮
  • 使用iframe实现在pc端预览移动端页面的效果

    前段时间需要做一个在PC端预览移动端的功能,由于我是前端不太好,就在网上查找资料,花了半天的时间终于有所收获,在这里把我的实现代码分享给大家。想要在PC端实现模...

    AlbertYang
  • 博客园样式管理总结(个人博客园装修指南)

    参考博客:https://www.cnblogs.com/maxiaodoubao/p/9854705.html

    CherishTheYouth
  • 盒子模型超详解——大佬不用看,新手看过来

    CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将...

    泰斗贤若如
  • 显示3D文字且左右摆动效果

    图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看...

    无邪Z
  • 60个非常实用的CSS代码片段,千万要收藏好了!

    如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

    winty

扫码关注云+社区

领取腾讯云代金券