qq_42309685的博客

css3分页如何使用html和css来创建分页 ul.pagination { display: inline-block; padding: 0px; margin: 0px; } ul.pagination li { display: block; float: left; } ul.pagination li a { padding:...

音频播放（audio）功能：播放和暂停音频代码如下<div id="btn">点击播放音乐：<img src="images/pause.png" alt="播放" style="width: 50px; height: 50px;"></div> <audio loop id="audio"> <!-- 兼容各浏览器播放格...

HTML5进度条和度量器标签进度条标签<progress>有两个参数：value和max度量器标签参数很多,value max, min, low, hignhead<!-- IE低版本浏览器兼容HTML5 --> <!--if lte ie 8> <script src="https://cdn.bootcss.com/html...

html5表单标签html5中新增了很多表单属性，例如：date、number、color等等.使用效果如下：head部分<script src="lib/jquery/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"&g...

IE浏览器兼容HTML5HTML5使很多语义化的标签的得到实现，比如：header、footer等，使文档结构显得更清晰，但是IE8及以下版本是不支持HTML5。这时候需要引入一个js包使这些低版本浏览器兼容HTML5链接如下：HTML5 JavaScript 补丁代码引入效果如下:head部分<!-- IE低版本浏览器兼容HTML5 --> <!--if lt...

:nth-child和:nth-of-type的区别:nth-child定义：:nth-child() 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序。/*css部分*/ul li { list-style: none; width: 200px; height: 30px; margin: 5px; } li:nth-child(...

垂直居中本案例使用的是动画中的transform属性做的：效果如下：可以看到：小圆在大圆里面垂直居中css部分.box { position: relative; width: 400px; height: 400px; margin: 100px auto; border-radius: 50%; background-color: #08AEEA; ba...

手风琴（transition）之间用了很多方法写了手风琴，js，jquery都可以，这回是用HTML5中新添加的过渡属性transition写的。（本案例没有考虑各浏览器兼容性）效果如下（oh~这该死的gif，效果真差）:代码如下：(CSS部分用到了渐变)CSS部分body, ul { padding: 0px; margin: 0px; } div { margin:...

解除透明度继承问题在写页面的时候，如果调整父元素的opacity属性，势必会影响子元素的透明度，怎么解决这个问题呢？HTML5新增了一个颜色属性：background-color:rgba(参数1,参数2,参数3,alpha);参数1，2，3分别三原色（红绿蓝），取值都是：0-255，例如蓝色（0,0,255）。效果如下：CSS.box1 { height: 400px; ...

3D轮播图效果如下：思路：首选先写好3D轮播图的结构<div class="view"> <ul> <li> <span></span> <span></span> <span></span> <span></sp...

后代选择器和子代选择器的区别后代选择器：div p：匹配div中所有的p元素子代选择器：div>p：匹配div子元素中的p元素代码：CSS部分<style> .wrap { width: 400px; height: 220px; padding: 9px; font: 700/20px/40px "microsoft yahei"; ...

拖拽元素效果如下：做这个案例遇到的最大的问题是：当把元素从左盒子移动到右盒子的时候，再从右盒子移动元素时报错了。原因是：在移动元素之前，右边的盒子是空的，虽然说拖拽的时候给第二个盒子里添加了元素，但是代码结构并没有刷新，第二个盒子从代码结构上仍然是空的，因而就对其添加事件是无效的。- 怎么解决这个问题呢？首先从百度了一下怎么动态获取添加的元素，从下面这位博主的博客里面找到了思路（十...

自制是视频播放器现在HTML5新增了很多视频制作方面的属性，比如控制音量(volume)的，视频进度(duration)的还有全屏(webkitRequestFullScreen)的，等等，很多很多，这就使得当对默认的视频播放器样式 不满意时，自己也可以做一个替换默认样式。自制播放器样式效果如下：录的比较仓促，媒体文件就一个视频，可以自己选择引用的外部文件主要有一些字体文件，jquer...

tab选项卡原生JavaScript很容易做一个Tab选项卡这里主要的是用HTML5新增的标签选择器querySelector和类名操作方法(dataset、classList等)效果如下：body部分<div class="tabs"> <nav> <a href="javascript:;" data-cont = "primary" cla...