展开菜单

通过纯css3代码实现六边形边框

通过纯css3代码实现六边形边框

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible; 经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。 注意: 如果不对第3层div设置v...

IE9浏览器对CSS3的支持情况参考

以下整理的IE9对CSS3支持情况仅限初期发布的IE9版本,其余版本由于改进或修复的原因,可能已经支持之前不支持的CSS3属性,所以以下数据仅供参考。 更准确的支持情况请访问:https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85) IE9对CSS3属性的支持情况: CSS3属性 IE9支持情况 之前版本IE支持情况 ...

CSS3 Flexbox布局快速入门教程

CSS3 Flexbox布局快速入门教程

Flexbox 是是 CSS3 引入的新的布局模式,全称是 flexible box (意思是“灵活的盒子容器”)。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式: 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元...

前端移动端适配方案之rem之小白解惑

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的; 像素比(Asset)2x,就是2倍,物理像素/逻辑像素; ppi:像素密度326,实际平方英寸的光点个...

通过css修改select下拉列表框的默认样式

实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...

通过CSS或JS实现gif动态图片的停止与播放

通过CSS或JS实现gif动态图片的停止与播放

到需要可以随时随地停止gif动态图片播放的需求的时候,可以通过下面几种方法实现。 方法一:多img资源控制处理 就是准备2套图片,一个是gif动态图片,还有一个是只有一帧的静止的图片,如jpg图片。然后使用JS来回切换<img>的src值为这两张图片地址,或者通过js实现点击就切换显示两张图片。 这种方法的优点就是兼容性强,所有浏览器都可以实现停止效果。然而这种方法有个局限,就是暂停时候呈现的图片永远是同一张。基本上可以说是停止,而不是暂停。 代码如下: html <div class="inpic"&g...

HTML5+CSS3实现响应式导航菜单

HTML5+CSS3实现响应式导航菜单

不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐,它也包含一个指示器来显示当前激活的菜单项。菜单可以在hover时展开,触屏手机如果点击的话会变成链接跳转,需要用手拨动才是正常的,关闭的话即点击其它地方。 演示地址:http://webdesignerwall.com/demo/responsive-menu/ HTML代码 <nav class="nav"> <ul> <li class="current"><a hre...