• 网页模板 http://www.lmlblog.com/wo/share/

标签:css

HTML/CSS

CSS3流体(columns)多列布局

一.早期多列问题 我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期CSS 提供的布局方式都有着极大的限制。如果是固体布局,那么使用浮动或定位布局都可以完成。但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制。 因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力。……全文阅读 »

maolai 1年前 (2016-12-18) 1023浏览 0评论

HTML/CSS

position定位层:absolute+relative的应用

html定位层的特点: 完全脱离默认文档流,独立于立体层面的Z轴之上。和float浮动一样都脱离了默认文档流。但float元素与默认文档流之间会相互产生影响,而定位层元素则完全独立互不干扰。 让元素inline-block化:例如一个div标签默认宽度是100%显示的。但是一亘变成absolute绝对定位,则默认独占一……全文阅读 »

maolai 1年前 (2016-12-08) 1743浏览 10评论

HTML/CSS

css中position属性定位:absolute与relative

定位层是由html元素(标签)形成的一个特殊的box盒子。其重点在于“定位”,而html元素(标签)的定位方式由css来控制。通常情况下,html元素(标签)默认的定位方式叫作“静态定位”,存在于普通文档流中。而定位层是指的那些修改了定位方式的box,即非静态定位的box。 定位层的“定位”需要根据参照对象来实现定位的……全文阅读 »

maolai 1年前 (2016-12-08) 1355浏览 0评论

HTML/CSS

web前端开发之CSS传统布局

一、定位布局 在使用定位布局前,先了解一下定位属性的用法。CSS2 提供了 position 属性来实现元素的绝对定位和相对定位。 属性 说明 static 默认值,无定位。 absolute 绝对定位,使用 top、right、bottom、left进行位移。 relative 相对定位,使用 to……全文阅读 »

maolai 2年前 (2016-08-05) 1183浏览 2评论

HTML/CSS

web前端开发之CSS3动画效果

一、动画简介 CSS3 提供了类似 Flash 关键帧控制的动画效果,通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。 animation 实现动画效果主要由两个部分组成: 1、通过类似 Flash 动画中的关键帧声明一个动画……全文阅读 »

maolai 2年前 (2016-08-05) 1211浏览 0评论

HTML/CSS

css如何清除浮动

大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: 未清除浮动后的效果: 实例代码(未清除浮动): <!doctype html> <html> <head><meta charset="utf-8"> <title>M……全文阅读 »

maolai 2年前 (2016-03-01) 1333浏览 1评论

HTML/CSS

CSS3过渡效果

HTML5中CSS3的过渡效果,通过这个功能可以不借助 JavaScript 来实现简单的用户交互功能。 一、过渡简介 过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能,比如::hover、:focus、:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能,主要……全文阅读 »

maolai 2年前 (2016-02-29) 1553浏览 0评论

HTML/CSS

CSS3变形效果(下)

一、3D 变形简介 元素的平移、旋转、缩放和倾斜等功能这些效果只是单纯在二维平面图上的,我们称之为 2D。那么其实CSS3也提供了三维立体的一些功能效果,并且目前较新的主流浏览器都比较支持,只不过比 2D 晚一些,对浏览器的版本要求也要高一些。 由于3D是立体三维,在 x、y 轴的基础上一般会多出一个z轴,深入跃出轴。……全文阅读 »

maolai 2年前 (2016-02-28) 1864浏览 0评论

HTML/CSS

CSS3变形效果(上)

HTML5 中 CSS3 的变形效果,通过变形效果,可以平移、缩放和旋转元素的功能。 一、transform CSS3提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 属性 说明 transform 指定应用的变换功……全文阅读 »

maolai 2年前 (2016-02-27) 1111浏览 0评论

HTML/CSS

CSS3渐变效果

HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变。 一、线性渐变 CSS3提供了linear-gradient 属性实现背景颜色的渐变功能。在以前,这种效果必须采用图片才能实现的。首先,先看一下它的样式表,如下: linear-gradient(方位, 起始色, 末尾色) 方……全文阅读 »

maolai 2年前 (2016-02-15) 1205浏览 0评论