移动端轮播图效果实现

基本结构 基本css / 轮播图 / .focus{ position: relative; padding-top: 44px; overflow:hidden;//溢出的图片隐藏 } .focus ul{...

rem+css预处理+媒体查询与rem+flexible.js做网页适配

引入 1. 页面布局文字能否随着屏幕大小变化而变化？ 2. 流式布局和flex布局主要争对宽度布局，那高度如何设置？ 3. 怎样让屏幕发生变化时候元素高宽等比例缩放？ rem是什么？ l rem是一种新的单位，是一个相对...

初识flex布局

弹性布局 弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 使用方法 ：父元素设置`display:flex` > 注意：父元素属性设置了flex布局其子元素的float,clear,vertic...

移动web开发介绍

视口(viewport) 视口（viewport）浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口 布局视口(layout viewport) 一般移动设备的浏览器默认设置了一个布局视口，用于解决早期的PC端页面...

css3旋转木马效果

body{ perspective: 1000px; } section{ width: 300px; height: 200px; margin: 150px auto; position: relative; transform-style: preserve-3d; animation: rotate 20s linear...

css3实现3d导航

1.基本结构如下 ul{ margin:100px auto } ul li { width: 120px; height: 35px; list-style: none; } .box{ width: 100%; height: 100%; position:...

css3d实现两面翻转的盒子

body{ perspective: 500px; } .box{ position: relative; width: 300px; height: 300px; margin: 100px auto; transform-style: preserve-3d; transition: all .4s; }...

CSS3d转换

3D特点 近大远小 物体后面遮挡不可见 三维坐标系 x轴：水平向右 右边是正值，左边是负值 y轴：垂直向下 下面是正值，上面是负值 z轴：垂直屏幕 往外面是正值，往里面是负值 如下图： 不过在我们css中y轴向上...

CSS实现小箭头效果

项目中要使用小箭头时我们一般引入字体图标，但其实css3也可以画出一个小箭头主要利用了tranform的rotate 我们的小箭头的原型是一个正方形，我们只保留正方形底部和右边区域在使其旋转45度即可...

结构伪类选择器nth-child与nth-of-type的区别

首先他们都是属于结构伪类选择器，都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号，当查找指定元素是，会先根据序号查找该元素，找到后在与伪类前面的元素进...