CSS3 Flexbox布局快速入门教程 Flexbox 是是 CSS3 引入的新的布局模式,全称是 flexible box (意思是“灵活的盒子容器”)。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强... Web前端开发 / 2018-09-04 / 4097次阅读
前端移动端适配方案之rem之小白解惑 移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知... Web前端开发 / 2018-06-05 / 5343次阅读
通过css修改select下拉列表框的默认样式 实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:... Web前端开发 / 2017-12-19 / 7047次阅读
通过CSS或JS实现gif动态图片的停止与播放 到需要可以随时随地停止gif动态图片播放的需求的时候,可以通过下面几种方法实现。 方法一:多img资源控制处理 就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片,如jpg图片。然后使用JS来回切换<img>的src值为这两张图片地址,或者通过js实现点击就切换显示两张图片。 这种方法的优点就是兼容性强,所有浏览器都可以实现停止效果。然而这种方法有个局限,就是暂停... Web前端开发 / 2017-08-31 / 12556次阅读
HTML5+CSS3实现响应式导航菜单 不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐,它也包含一个指示器来显示当前激活的菜单项。菜单可以在hover时展开,触屏手机如果点击的话会变成链接跳转,需要用手拨动才是正常的,关闭的话即点击其它地方。 演示地址:http://webdesignerwall.com/demo/responsive-menu/ HTML代码 &l... Web前端开发 / 2014-01-31 / 11875次阅读