11种常用css样式之background学习
background如何简写？如何在背景图像不变的情况下，依旧实现页面文字滚动，为之奈何？别担心，快用background-attachment: fixed;/*固定定位*/常用的background样式如下，1.background-color2.background-image3.backgr...
Day 31：CSS选择器、常用CSS样式、盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://...
11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角...
【JavaScript脚本宇宙】构建Web美学：CSS预处理器和UI库
构建优秀用户界面的必备利器：六款前端框架解析与比较 前言 前端开发中，选择合适的框架对于提高工作效率和实现设计目标至关重要。本文将介绍一些流行的前端框架，它们各具特色，能够帮助开发人员快速构建优秀的用户界面。 欢迎订阅专栏：JavaScript脚本宇宙 文章目录 构建优秀用户界面的必备...
什么时候css会见less
在一定程度上，css不能被视为一个节目。虽然和其他语言，它有自己的规范。编码，但它的笨拙实在让我失望。不喜欢css是由于不管怎么优化代码。项目大到一定程序后。都会看上去一团乱。并且有时候一个bug的定位也要花去不少时间。直到我发现了less。突然感慨。css中的jquery大概就是它了。less同意...
CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading这类Loading动画的基本思想是：在呈现容器中定义1个或多个子层，再对每个子层进行样式定义，使得其均显示为一个实心圆形，最后编写关键帧动画控制，使得各个实心圆或者大小发生改变、或者平移、或者旋转。 （1）小圆大小或透明度进行变化。例如，在container层中定...
CSS3实现的图片加载动画效果
来源：GBin1.com使用CSS3实现的不同图片加载动画效果，支持响应式，非常适合针对瀑布流布局图片动态加载特效进行增强！HTML<ul class="grid effect-4" id="grid"> <li><a href="http://drbl.in/f...
CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。1．圆环型Loading这类Loading动画的基本思...
css把超出的部分显示为省略号的方法兼容火狐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-T...
css 清除伪类active,hover效果-解决
使用pointer-events:none:注意：pointer-event会阻挡所有的事件，包括js的click之类的事件。 span{pointer-devent:none;}
css position 应用（absolute和relative用法）
1、absolute（绝对定位）absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标...
【CSS3基础-Flex布局】
关于Flex背景在flex布局出现以前，常用的水平和垂直居中对齐方式有很多。flex布局的出现基本规范了这一过程。通过justify-content和align-items两个属性即解决了水平居中、垂直居中、水平垂直混合居中的问题。display:flex应用在父元素的属性flex-flow：fle...
使用css3的Flex布局实现列表展示
实现效果图如下：通过css3样式实现（部分代码）：.box { display: flex; flex-wrap:wrap; justify-content:space-between; align-content: flex-start;}在实际中会遇到list列表对3取余...
[转载] 高大上的 CSS 效果：Shape Blobbing
这篇大部分是转载,来自《高大上的 CSS 效果：Shape Blobbing》和 《Shape Blobbing in CSS》 有部分是自己理解和整理，配合效果要做出 apple wathc 的一个效果（见最后）CSS3 给我们带来了一波又一波的技术革新，而我们似乎对它所能创造的效果又知道的太少太...
（转）CSS 禁止浏览器滚动条的方法
1、完全隐藏在里加入scroll="no"，可隐藏滚动条； 这个我用的时候完全没效果，不知道是什么原因！不过好多人说这么用可以，大概是用的位置不一样吧2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；3、样式表方法 在里加入style="overflow-x:...
Adapting to views using css or js
using css@media screen and (-ms-view-state: fullscreen-landscape) {}@media screen and (-ms-view-state: fullscreen-portrait) {}@media screen and (-ms-v...
css中的px与屏幕实际的分辨率的关系
1.css中的px称为逻辑像素 ：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。2.屏幕的分辨率是物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，...
纯css实现qqlogo图
<!doctype html><html><head> <title>CSS3logo</title> <style type="text/css"> html, body, div, img { ...
css3旋转立方体-_-
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <!--抱歉，时间紧暂时只写了谷歌的方法，ie等浏览器的兼容还没写0.0.--> <title...
No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:;}main{ perspective: 800px;}.cube{ transform-style: preserve-3d; position: relative; ...