你应当了解的5个CSS3新技术
作者:暴风彬彬 来源:彬Go 发布时间:2009-02-11 13:01:00
CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
1:基本标记
在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。
我们的xHTML需要一下div元素:
#round, 使用CSS3代码实现圆角.
#indie, 应用个别的几个圆角.
#opacity, 展示新的CSS3实现不透明度的方式.
#shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果.
#resize, 展示如何使用某种CSS来实现重设大小的效果.
综上所述,我们的xHTML应该是这样的:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”round”> </div>
<div id=”indie”> </div>
<div id=”opacity”> </div>
<div id=”shadow”> </div>
<div id=”resize”>
<img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</div>
</div>
</body>
</html>
下面来创建基本CSS文件:
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
正如你上面看到的,我们给每个div元素300px的宽和高,并让它们向左浮动,整个页面的div都留给我们在后面的工作中添加样式。
猜你喜欢
- 一.概念简介 脚本:script是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。 二.背景 近来在Wind
- 四、XML应用分类 总的说来的XML的应用可分为四类: (1)应用于客户需要与不同的数据源进行交互时。数据可能来自不同的数据库,他们都有各自
- ASP中判断字符串中是否包含字母和数字的两个函数function isnaw(str) for
- 1、并双击新建工程窗口中ActiveX DLL图标,VB将自动为项目添加一个类模块,并将该项目类型设置为ActiveX DLL。2、在属性窗
- 前后端分离的开发模式,原本觉得没什么稀奇的玩艺,在最近参与的一个大型项目中,让我有了更深的理解。前后端分离的开发模式:系统分析阶段,系分和前
- 前言相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript。原文链接: http://dojotool
- 今天闲逛在网上时,看到一个11px大小的字体,显示却很清晰,赶紧查看站点的CSS,这字体称叫做:PMingLiu。效果相当不错,相比于我们使
- 首先要作出决策,你是否想要使用最新的开发版本或最终的稳定版本。在MySQL开发过程中,同时存在多个发布系列,每个发布处在成熟度的不同阶段:&
- 下面直接记录下配置主从库的操作:(本文用的是mysql5.0以上)1.在主库建立要同步的数据库,建立主库的帐号和修改主库配置首先连接上数据库
- 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不
- 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题
- 安装MySQL假设你把所有必须的源码或者包都放在了/tmp下。如果你下载的是RPM包的话,那比较简单;如果你下载的是二进制包(你没有rpm程
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- iframe标签在网页中可以创建一个内嵌框架,通过指定src属性来调用另一个网页文档的内容。和frameset一样,用它来对网页结构进行拆分
- 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个
- 代码如下:td=date() '此次为设置当前日期,主要是为了调试方便,实际应用中可以使用当天日期.. str=
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 21 - Classes part
- CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position。1. positio
- SEO是指搜索引擎优化,主要就是通过对网站的结构、标签、排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎
- 用phpMyAdmin时在导入和导出MySQL5数据时,有一个SQL compatibility mode选项,其可选值为NONE、ANSI