分类 CSS 下的文章
-
CSS3的content属性1
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 1、插入纯文字 html： <h1>这是h1</h1> <h2>这是h2</h2> css： h1::after{ content:"h1后插入内容" } h2::after{ content:none } 效果图： 2、嵌入文字符号 可以使用content属性的 open-quote 属性值和 c......
-
flexbox布局实践2
1、两端对齐垂直居中 这种布局常用于头部 header{ display:flex; justify-content:space-between; align-items:center; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>t......
-
屏幕尺寸、分辨率、倍率到底是什么鬼
目前我们做移动端项目几乎不需要考虑为什么要这样写样式，为什么设计稿上100px我们直接写成1rem，移动端的屏幕尺寸那么多变，为什么能轻松兼容？那我们得从移动端的屏幕尺寸来探索一下其中的原理，首先就得了解这些费解的概念。 我在网上收集了很多资料，众说纷芸，我按自己的理解整理了这篇文章，如果有理解不当的地方，请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦，指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等，我感觉是一个概念。比如iphone6是1334*7......
-
flexbox布局实践1
1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......
-
sticky解决粘性交互在微信的问题
前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......
-
浅谈css3的混合模式
在photoshop中，我们处理图片，在图层之间有混合模式，点击混合模式里面的选项，可以使图片实现不同的效果，这个混合模式在css3中也有实现！下面就来介绍一下css3的混合模式。css3的混合模式主要使用mix-blend-mode这个属性来实现的。当然，也可以用background-blend-mode。下面我就来介绍一下这2个属性吧！ mix-blend-mode 这个用法很简单，就是在你需要混合的div上面添加这个属性就可以了，例如如下： mix-blend-mode: multiply; multiply，这个就是我们ps中的正片叠底！ 类似的属性我列举一下......
-
十月知识记录
最近做镇魔曲手游项目，对做项目及注重交互又有了深一层的了解。这里学习并记录几个技能点，方便以后开发。 一、水波纹交互效果 鼠标交互效果：鼠标滑上去时出现水波纹由内往外扩张并逐渐消失。那这个效果是怎么实现的呢。 <div class="skill-slide"> <a href="javascript:;"></a> </div> .skill-slide a{ width:70px; height:70px; border-radius: 50%; ......
-
用less编写PC端上CSS3的小技巧
在说到这个小技巧前，我们首先了解less与css的区别： CSS: （Cascading Style Sheet）级联样式表,目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网 页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本 展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 LESS: LESS将CSS赋予了动态语言的特性，如变量、继承、运算和函数。LES......
-
负margin小结
关于负margin 对负边距使用恰当的话，其实它是具有非常强大的属性的，以下是几条关于负margin需要注意的地方： 负边距是绝对标准的css，并不是一种hack的方法 当没有使用浮动时，负边距不会破坏页面的文档流 浮动会影响负边距的使用，因此使用负边距的时候要小心 使用负边距，做了几个小demo 1.两个设置了固定高宽的div，分别是A,B 2.A设置margin-left为负值,如图A元素向左移了10像素 3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px 4.A设置margin-bottom为负值时，A并不会像你想的那样往下......
-
CSS3的3D转换
在做新版本的3d轮播插件的时候，使用到CSS3中的3D转换属性，对各种3D属性做了一些深入一点的了解。 transform-style 官方解释：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 我的理解是它是用在一个3D空间的父元素上，其所有子元素处于同一个3d空间坐标内，如果子元素之间有相互交错的层级关系时我都会给父元素加上这个属性，让它们处于同一坐标系中。（以下讨论均基于这个前提） 来一张空间坐标系示意图： 3D转换的层级关系 因为轮播中会有slide叠加的情况，正常情况是后面的层级低于前面的，在这个时候我们的z-index属性将会失去作用......
-
关于position:sticky的使用
前段时间做的一个项目中有要求导航随页面滚动然后固定在窗口的某个位置（下面简称粘性布局），所以本文主要介绍 position:sticky 实现的粘性布局；链接在此； 为了实现这种粘性布局我们一般都是通过js监听window的scroll事件，当需要固定的元素滚动到窗口顶部时，把元素的position属性设置为fixed，否则，取消fixed，简单的js代码如下： $(window).scroll(function () { var top = $(window).scrollTop(); if (top >= nav_top) { ......
-
关于魅族机子自带浏览器下视频弹层无法关闭问题
20170720更新 最近发现下文提到的解决方案有点问题估计是魅族系统有更新了。而且下文的demo地址已经无法访问。 新的解决方案如下（其实是按照下文的方案二来改的）： 定位加transform来实现居中 .m-video-con{ position: absolute; top: 0; //这里是关键，设置50%时就关闭不了了 transform:translateY(100%); -webkit-transform:translateY(100%); } 新的测试地址：http://test.nie.163.com/lj/video.html 之前做移动端......
-
关于移动端垂直居中对齐的几个方法
在移动前端制作中，我们会遇到垂直水平居中问题，下面介绍几种css3方法来解决； 1、CSS3的transform:translate 需要注意的是，这种写法会和其他transform样式有冲突，在某些情况下边缘和字体渲染会有问题 css .center{ width:50%; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webki......
-
关于图片垂直居中的几个方法
偶尔会有这样的需求：在不知道图片宽和高情况下，需要让图片水平和垂直居中在某个容器下，而且，如果图片宽或者高超出容器，需要按照比例进行缩放，下面介绍几个常见的方式 Javascript篇 用JS的方式处理解决图片，思路就是预加载图片，然后取宽和高，计算位置，设置margin值，达到目的 //计算图片居中位置的信息 function getImgSize(img,maxWidth,maxHeight){ var ratio, picW = img.width, picH = img.......
-
元素在页面中的尺寸和定位
在平时开发过程中经常会遇到要获取元素的各种尺寸或者定位，什么offset，scroll，client，什么x，y，很晕有木有，从来没分清楚过有木有,于是决定花点时间把它理一理，分享给大家。 1、原生JS获取元素尺寸的方法 1.1、偏移量(offset) 包括元素在屏幕上占用的所有可见的空间，包括内边距、滚动条、和边框（不包括外边距）有四个属性——offsetHeight、offsetWidth、offsetLeft、offsetTop：如下图示意 1.2、客户区大小(client) 指元素内容及其内边距所占据的空间大小(不包括滚动区域)，有两个属性——clientHeight......
