首页 » Tag Archives: css3

css3

本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html> <html> <head> <style> ul {     list-style-type: none; } ul li […]

CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所 […]

弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数 […]

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 属性 box-sizing 10.04 […]

本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页: CSS 实例 ul.pagination {     display: inline-block;     padding […]

本章节我们为大家介绍使用 CSS 来制作按钮。 CSS 实例 .button {     background-color: #4CAF50; /* Green */     border: none;     color: white;     padding: 15px 32px;     text-align:  […]

本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img { border-radius: 8px; } 实例 椭圆形图片: img {     border-radius: 50%; } 缩略图 我们使用 border 属性来创建缩略图。 实例 img {     border: 1px  […]

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前 […]

浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 属性 column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-11.1 column-gap 4.0 – […]

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式 […]