腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

HTML5学堂

专栏作者

296

文章

550639

阅读量

70

订阅数

案例效果 | canvas刮刮卡抽奖

javascript html

案例效果 📷 案例代码 HTML代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>刮刮卡抽奖 - 公众号：HTML5 WEB前端分享</title>

2021-11-25

2.4K0

浮动其实真的很简单

码匠（HTML5学堂）：传说中的水槽原理真的正确、严谨吗？如何才能轻松理解浮动的基本原理，实现网站浮动布局？

2018-10-25

3810

解密clear:both的真实含义及 after伪元素清浮动的核心原理

码匠（HTML5学堂）：据说只有12%的HTML5（前端）开发工程师，在最初学习浮动布局时，没有被clear属性所“迷惑”……

2018-10-25

2.3K1

JavaScript | 选中并获取多行文本框内容的效果

html5 html javascript

HTML5学堂（码匠）：文本操作一直是开发中不可避免的存在，用户选中的文本内容，是否可以进行获取并处理到需要的位置当中？如果可以，这样的操作到底需要使用到哪些方法呢？本文主要内容 1. 目标效果展示

2018-03-13

5K0

CSS3蒙版 — 元旦快乐！

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果，可我们在这里并不打算介绍PS的蒙版效果，而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-webkit-mask来实现在网页中。-webkit-mask这一属性相信大家并不是很熟悉，也是CSS3中一些高级且被严重低估的属性之一，很多人都是第一次见到，-webkit-mask之所以不常见，主要是还未被众多浏览器所支持，目前支持这一属性仅有-webkit-前缀的浏览器，但是相信不久的将来支持这一属性的浏览器会越来越多。本文主要内容 1.-we

2018-03-13

1.3K0

Gulp 定制专属提速“外挂”（下）

缓存 gulp javascript npm html

友情提示：推荐阅读时间10分钟 + 练习时间10分钟上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。相关阅读：前端工程化 | 定制专属提速“外挂”（上）

2018-03-13

1.1K0

让元素呈现出“七十二变”的效果，就是这么简单

HTML5学堂：作为前端开发者，总会在设计图上看到各种各样奇怪的图形，想用图片解决又怕觉得很low，想用其它方法又一下子反应不过来。不管现在的你有没有面对过这样的状态，多做准备总是好的。本文主要内容一、CSS3的变形引入二、二维变形的语法三、二维变形的常用属性分析四、二维变形的操作实例五、总结一、CSS3的变形引入在网页设计中，CSS被习惯性的理解为擅长表现静态样式，动态的元素必须借助于javascript才可以实现，而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外，还

2018-03-13

1.7K0

2016.07 第一周群问题分享

html css javascript

HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、margin-top负值、Flexbox布局参考答案 footer元素始终贴在浏览器底部。我们知道当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部。下面要讲的布局就是解决如何使元素贴住浏览器底部。方法一：全局增加一个负值的下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值的下边距等

2018-03-13

9080

2016.07 第2周群问题分享

html css javascript

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念： viewport、CSS3属性参考答案：一、通过设置viewport方式来兼容目前这种兼容方案相对比较完美，手淘首页就是采用这种方案。在devicePixelRatio = 2 时，输出viewport <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-sca

2018-03-13

7040

2016.07 第3周群问题分享

html css javascript

HTML+CSS 怎么实现输入框高度自适应 2016.07.18~2016.07.22 核心内容 contenteditable 问题解析因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？ contenteditable 属性规定是否可编辑元素的内容。可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编

2018-03-13

9090

2016.06 第一周群问题分享

html css javascript

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口）参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width

2018-03-13

8210

详析设置样式的方法

html5 html javascript

上一期文章当中，小编与大家详细的总结了获取标签的方法，能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签，可以回复“获取标签”到“HTML5学堂”公众号。今天小编要与大家总结设置样式的方法，它能让大家更好的去操作标签的样式。本文内容概要： 1 使用className属性设置标签的样式 2 使用style对象设置标签的样式 3 使用cssText属性设置标签的样式 4 课程小结 5 课后作业 1 使用className属性设置标签的样式在项目开发中，通常是使用类名选择器来控制标签的样式。那我

2018-03-13

1.4K0

2016.06 第二周群问题分享

html javascript

HTML+CSS display：none与visibility：hidden相同点与不同点 2016.06.06~2016.06.10 核心概念 display与visibility属性参考答案相同点： display：none和visibility：hidden都能把网页上的某个元素隐藏起来；不同点： display：none 1、不为被隐藏的标签保留其物理空间，即该标签在页面上彻底消失（标签还在网页中，只是不占物理空间而已）； 2、隐藏标签的时候会产生reflow和repaint

2018-03-13

6410

标签的选择

javascript html

这么多篇文章下来，大家对如何进行页面布局想必已经有了自己的一些想法，特别是上周的文本样式的介绍，让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有什么问题的情况下，我们需要考虑的就是如何能够实现的更好，能够让我们做的页面代码精简度、性能让能够更符合我们的开发规范。所以今天我们着重的给大家来讲解一下如何选择标签，以最精简的代码实现我们的页面制作。本文内容概要： 1 标签的默认样式 2 标签的语义性 3 标签的嵌套规则 4 标签的选用原则 5 合理选择标签的案例展示一、标签的默认样式通过这么

2018-03-13

1.2K0

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

这几周我们接连讲解了如何实现一个页面的搭建，从最初的各种分析，标签选择，一直到可以实现页面的整体布局。这一系列的知识点讲解中，我们熟知了对一个网页PSD图的处理，也懂得了该如何着手进行页面开发。但是上

2018-03-13

1.2K0

2016.05 第三周群问题分享

html css javascript

HTML+CSS 一个div里面有个img标签，div的高度由img撑开；img的兄弟级有个div要使内层div的高度等于外层div的高度，除了用JS实现，还能怎么实现？ 2016.05.16~2016.06.20 核心概念 flex、position、display 参考答案结构： <div class="wrap"> <img src="h5_course.jpg" alt="HTML5学堂"> <div>HTML5</div> </div> 设置多栏多列布局display

2018-03-13

1.1K0

2016.05 第四周群问题分享

html css javascript

HTML+CSS 如何让正在运行的动画暂停 2016.05.23~2016.05.27 核心内容 animation-play-state属性参考答案 animation-play-state 属性规定动画运行还是暂停，可以在JavaScript中使用该属性，这样就能方便控制动画的运行状态。 animation-play-state: paused（规定动画已暂停）| running（规定动画正在播放）; 浏览器支持程度：IE10、Firefox、Chrome 以及 Opera 支持该属性。 <!DOCT

2018-03-13

7050

传统企业站开发 - 页面布局

前几期我们讲解了HTML+CSS的基本知识点，也带着大家分析过一些案例。从简单的页面结构到页面布局的实现，再到页面的优化。我们学习到的东西挺多的，但是在实战开发中如何去应用它仍然有很多不理解的地方，所以今天这篇文章就以项目的首页制作来带着大家把之前学习过的知识点运用起来。本文内容概要： 1 页面的开发流程 2 页面效果展示 3 项目首页的基本布局 4 课后总结 5 课后作业 1 页面的开发流程 ——>PSD图的分析 ——>基本的前期准备 ——>页面的基本布局（一级布局与二级布局） ——>针对公共模块进

2018-03-13

1.1K0

2016.05 第二周群问题分享

html html5 javascript

HTML+CSS 如何实现360浏览器默认为极速模式打开网页 2016.05.09~2016.05.13 核心概念 meta参数设置参考答案 <meta name="renderer" content="webkit"> 国内主流浏览器大部分都是双核浏览器：基于webkit内核来渲染主流的网站；基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，优先通过webkit内核渲染主流网站，只有小量的网站通过IE内核渲染，以保证页面兼容。只要在网站里增加一个meta标签，告诉360浏览器这个网站应该

2018-03-13

9410

关于其他选择器以及选择器优先级详解

上周我们讲解了页面浮动之后产生的问题，以及针对这个问题所采取的措施——清浮动，同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题，那其中就包含了CSS选择器的详解，选择器的优先级介绍以及所有选择器的权重计算等一系列的问题。本文内容概要： 1 上周作业讲解 2 CSS选择器介绍 3 选择器的优先级 4 选择器的权重值一、上周作业讲解上周给出的作业是罗列清浮动的方法，大家如果查看了文章，相信都能得到答案，所以小编这边就简要的讲述下吧！清浮动方法：空标签清浮动、br标签清浮动、

2018-03-13

9620

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态