搜索:
首页 >> 网页设计 >> CSS/HTML >> 你应当了解的5个CSS3新技术

你应当了解的5个CSS3新技术

2009-2-11 作者:暴风彬彬 来源:彬Go 投递文章

 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都留给我们在后面的工作中添加样式。

1   2  3  4  5  6 下一页 尾 页
Tags:css3  技术  样式  设计  圆角  透明度 
相关文章
手机版 CSS/HTML Asp之家 Aspxhome.com
闽ICP备06017341号