开发中我们经常会遇到关于如何展示列表的问题，例如： 图片选择器列表 人员部门选择列表 工作状态列表 通用方法 为了让其看起来更加舒适美观，通常我们会在每个列表项上添加 margin-right 和 m...
CSS 列表项布局技巧:多用属性避免使用 javascript控制
阅读全文
HTML+CSS两栏、三栏布局及垂直居中实现方式
HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法。 1.两栏布局（左固定，右适应） 先写出初始样式和结构。 <div class="con...
HTML5 Audio标签的兼容性问题和优化
做的一个移动端互动项目中，遇到一个在 App 、微信、H5页面环境切换选择音频播放的功能，在测试的时候出了不少兼容性问题，这里有很多值得探索的知识，今天我们就来看一下这个 HTML5-Audio。 A...
CSS Flex弹性布局：容器和项目6个属性（附效果图）
Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式。通过Flex布局，可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会...
CSS Selectors Level 4 中新增选择器了解与使用
CSS 选择器在实践中是非常常用的，无论是在写样式上或是在 JS 中选择 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作组继续为选择器标准添加了更丰富的选择器。下面我...
css中margin负值的作用：实现自适应
CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了，margin负值并非hack，margin负值遵循文档流；假如使用margin负值促使一个元素向上位移，那么相关元素也会...
CSS技巧：mask遮罩实现PNG图标变色
原图标如下，是个蓝色的： 下面要变成#f4615c红色的图标，最简单的方法就是使用遮罩。 如下HTML和CSS代码： <span class="colorful"></span>...
为什么transform更加平滑？CSS3动画卡顿性能优化解决方案
最近在开发小程序，与vue类似，它们都有生命周期这回事。 onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思？ 所以这又触碰到了我的知识盲区，...
Dreamweaver制作虚线边框表格教程
Dreamweaver是中想要制作虚线边框，该怎么让边框虚线化呢？下面我们就来看看dw制作虚线边框的教程。 方法一： 1、打开Dreamweaver软件，新建一个HTML文档。 2、点击“插入”，选择...
Dreamweaver cc2018主题颜色怎么设置?
DW想要设置背景颜色，背景颜色包涵代码背景色与布局背景色，我们可以在首选参数里设定，下面我们就来看看详细的教程。 1、打开Dreamweaver，选择【编辑】-->下拉里选择【首选参数】 2、在...
HTML5 Video 标签去除下载按钮及禁用右键方法
去除HTML5 Video下载按钮，通过css样式来解决。 <style type="text/css"> video::-webkit-media-controls-enclosure ...
Firefox 改变添加搜索引擎方式，受HTML 新规范影响
Firefox 用户反映，在使用最新的 Firefox 65 Nightly 尝试从Mycroft Project、Mozilla AMO 或其它支持的站点安装搜索引擎时，发现该功能不再可用。以往用户...
html5新特性：Web Workers文件调用与对象创建
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 关于web...
html5新特性：WebSocket属性与事件
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 W...
html5新特性：Web 存储
如果说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式: localStorage,没有时间限制的数据存储 sessionStorage,...
html5新特性：离线存储
HTML5，通过创建 cache manifest 文件，可以创建 web 应用的离线版本。如果要启用应用程序缓存，必须在文档的 <html> 标签中包含 manifest 属性：每个指定...
html5新特性：地理定位
地理定位这个特性，故名思意，就是获取用户位置信息的。通过getCurrentPosition()获取一系列定位信息，getCurrentPosition()有两个回调函数参数，获取地理位置成功的回调和...
HTML5新特性概述：拖放（Drag 和 drop）
拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子，在h5之前实现拖拽功能，其实用的是一种模拟方式，鼠标onmousedown时，获取当前的一些信息，然后...
CSS 阴影技巧与细节（其他属性模拟阴影）
题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来...
CSS选择器（Specificity）优先级计算规则、特殊情况
什么是选择器优先级（Specificity） 直接复制了 MDN对优先级的定义 ： 浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的...
CSS content属性 你了解多少？
content属性，的确是很眼熟，也许很多童鞋和我一样，和它初次见面，是在清除浮动的时候： .clearfix:after{ content: "."; display: block; height:...
css内联元素错位引发对line-height的思考
line-height 对于一个前端小可爱来说，应该是一个会经常碰面的老朋友了。可是有一天，我突然发现自己好像对他没那么了解，他也没有外表看起来的那么简单。 事情的经过是这样的…… 在偶然一次工作中，...
CSS三角形纯代码写法（兼容IE6）
三角的做法有好几种： 图片、精灵图（网易） 字体图标（京东） 纯代码写（亚马逊） 这里主要介绍的纯代码写的。 优点 代码写的三角，不管大小是多少，是不失真的。 代码运行比图片更快。 如果项目中没有引用...
CSS技巧：背景混合模式制作高级效果
前端开发是否对设计师用的 Photoshop 中的图层混合模式一点办法都没有，然后现在我们可以通过 CSS 来实现网页中的图片混合了。 一、前言 如果「一图胜千言」，那多图混合创造的效果要超过千言万...
16