开发代码

  • Hbuilder快速书写代码技巧

    1.在body内输入div.abc按下tab键效果:<divclass="abc"></div>2.在body内输入div#abc按下tab键效果:<div id="abc"></div>3.在body内输入ul>li{小花}*3按下tab键效果:<ul>......[详情]

  • CSS3实现鼠标移动到图片上图片逐渐变大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或......[详情]

  • CSS3中transition、transform区别

    css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~ 下面列举几个最容易混淆的属性: 属性 含义 t......[详情]

  • CSS3点击搜索按钮实现响应式伸缩框

    CSS3点击按钮实现响应式伸缩搜索框。文件引用: 1 2 3 <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css"......[详情]

  • 固定头部导航,下滑导航变颜色

    1.在导航css里设置position:fixed;z-index:1000; 2.下面是html <nav class="fh5co-nav" role="navigation"> <div class="top-menu"> <div class......[详情]

  • 数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画。插件说明 jquery.countup.js 是一款轻量......[详情]

  • wow.min.js使用方法汇总

    Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的,用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。 WOW.js 需要 animate.css......[详情]

  • 网页特效swiper使用教程

    Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等......[详情]

  • 网页动画animate.css使用教程

    animate.css的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了  下面来详细介绍animate.c......[详情]

  • -moz、-webkit、-ms、-o分别代表什么?

    这种方式在业界上统称:识别码、前缀 -ms代表【ie】内核识别码 -moz代表火狐【firefox】内核识别码 -webkit代表谷歌【chrome】/苹果【safari】内核识别码 -o代表欧朋【op......[详情]

移动端开发

  • css适配不同分辨率屏幕显示与隐藏

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种......[详情]

  • Bootstrap显示与隐藏的解决原理

    就像Bootstrap一样,Ionic(Ionic 3)允许我们使用 col-sm-8 ,根据屏幕大小调整列的宽度col-md-6 , col-lg-4 。 Bootstrap还附带类似 visible-xs , hidden-sm 等类,使我们能够显示或......[详情]

  • flex常用网页布局实例

    1.居中对齐.flex-container { /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wra......[详情]

  • flex常见缩写形式等同值

    如:flex 取值为 none,则计算值为 0 0 auto,如下是等同的: .item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 当 flex取值为 auto......[详情]

  • 详解flex-grow、flex-shrink、flex-basis

    flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;),子容器才能根据自身的属性来布局,简单的说,就是瓜分父容器的空间。相反就是说如果父容器没有flex......[详情]

  • flex进行骰子布局

    骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节的HTML模板一律如下。<div class="box"> <span......[详情]

  • flex弹性盒子布局基本教程

    一、Flex布局是什么? 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便 ,比如,垂直居中就不容易实现。 flexbox......[详情]

web设计

  • 快速网页配色方案

    一、Flat UI 色表最简单的方法是,从一个给定的色表选择颜色。我以前就是这样,主要根据 Flat UI 的色表配色。这个色表提供20种颜色(其实是10种,每种颜色有深和浅两个色调),对于简......[详情]