随笔分类 -  CSS3技术

关于CSS3技术的学习和应用
摘要:CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到。 可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半,那么就在body中加入style="zoom:0. 阅读全文
posted @ 2018-08-06 15:31 整合侠 阅读(2663) 评论(0) 推荐(0) 编辑
摘要:CSS3 页面中展示邮箱列表点击弹出发送邮件界面 代码: 效果: 阅读全文
posted @ 2018-07-24 11:26 整合侠 阅读(677) 评论(0) 推荐(0) 编辑
摘要:CSS3 Flex Box(弹性盒子) 一、简介 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一 阅读全文
posted @ 2018-07-24 11:13 整合侠 阅读(539) 评论(0) 推荐(0) 编辑
摘要:CSS 分页实例 一、简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页: 效果: 二、点击及鼠标悬停分页样式 如果点击当前页,可以使用 .active 来设置当期页样式,鼠标悬停可以使用 :hover 选择器来修改样式 阅读全文
posted @ 2018-07-24 10:15 整合侠 阅读(1843) 评论(0) 推荐(0) 编辑
摘要:CSS 图片 一、圆角图片 二、缩略图 border 属性来创建缩略图。 三、响应式图片 响应式图片会自动适配各种尺寸的屏幕。 如果你需要自由缩放图片,且图片放大的尺寸不大于其原始的最大值,则可使用以下代码: 四、图片文本 (1)左上角: 效果: (2)右上角: 效果: (3)左下角: 效果: (4 阅读全文
posted @ 2018-07-24 10:12 整合侠 阅读(266) 评论(0) 推荐(0) 编辑
摘要:CSS3 用户界面 一、CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟 阅读全文
posted @ 2018-07-24 09:57 整合侠 阅读(176) 评论(0) 推荐(0) 编辑
摘要:CSS3 动画 一、CSS3 动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 二、CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规 阅读全文
posted @ 2018-07-24 09:51 整合侠 阅读(155) 评论(0) 推荐(0) 编辑
摘要:CSS3 过渡 一、CSS3 过渡 CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字 阅读全文
posted @ 2018-07-24 09:43 整合侠 阅读(501) 评论(0) 推荐(0) 编辑
摘要:CSS3 3D转换 一、3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前 阅读全文
posted @ 2018-07-24 09:35 整合侠 阅读(180) 评论(0) 推荐(0) 编辑
摘要:CSS3 2D转换 CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 一、浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 Internet Explorer 10, Fi 阅读全文
posted @ 2018-07-23 23:31 整合侠 阅读(165) 评论(0) 推荐(0) 编辑
摘要:CSS3 文本效果 一、CSS3 文本效果 CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break 二、浏览器支持 三、CSS3 的文本阴影 CSS3 中,text-shad 阅读全文
posted @ 2018-07-23 23:30 整合侠 阅读(119) 评论(0) 推荐(0) 编辑
摘要:CSS3 Gradients(渐变) 一、简介 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更 阅读全文
posted @ 2018-07-23 23:19 整合侠 阅读(307) 评论(0) 推荐(0) 编辑
摘要:CSS3 背景 一、CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。 二、浏览器 阅读全文
posted @ 2018-07-23 17:56 整合侠 阅读(171) 评论(0) 推荐(0) 编辑
摘要:CSS3 圆角 一、CSS3 圆角 CSS3 圆角制作器 二、浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。 三、CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 阅读全文
posted @ 2018-07-23 17:46 整合侠 阅读(219) 评论(0) 推荐(0) 编辑
摘要:CSS3 边框 一、CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 二、CSS3 圆角 在 CSS2 中添加圆角棘 阅读全文
posted @ 2018-07-23 17:26 整合侠 阅读(235) 评论(0) 推荐(0) 编辑
摘要:CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 阅读全文
posted @ 2018-07-23 17:09 整合侠 阅读(260) 评论(0) 推荐(0) 编辑
摘要:CSS 属性选择器 一、具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。 二、属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 三、属性和值选 阅读全文
posted @ 2018-07-23 16:07 整合侠 阅读(228) 评论(0) 推荐(0) 编辑
摘要:CSS 媒体类型 媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。 一、媒体类型 一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如,"font-size"属性可用 阅读全文
posted @ 2018-07-23 16:01 整合侠 阅读(297) 评论(0) 推荐(0) 编辑
摘要:CSS 图像拼合技术 一、图像拼合 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量,并节省带宽。 二、图像拼合 - 简单实例 与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif" 阅读全文
posted @ 2018-07-23 15:58 整合侠 阅读(398) 评论(0) 推荐(0) 编辑
摘要:CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 一、示例一:创建一个透明图像 CSS3中属性的透明度是 opacity。 首先,我们将向您展示如何用CSS创建一个透明图像 IE9,Firefox,Chrome,Opera, 阅读全文
posted @ 2018-07-23 15:53 整合侠 阅读(295) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示