你应当了解的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都留给我们在后面的工作中添加样式。
0
投稿猜你喜欢
Python OrderedDict字典排序方法详解
浅析javascript中函数声明和函数表达式的区别
Python中的各种装饰器详解
python实现批量图片格式转换
Python程序打包工具py2exe和PyInstaller详解
Java+Spring+MySql环境中安装和配置MyBatis的教程
Python-OpenCV实现图像缺陷检测的实例
Python中实现switch功能实例解析
在Python中使用PIL模块处理图像的教程
详解MySQL数据库--多表查询--内连接，外连接，子查询，相关子查询
ASP不允许同一个用户同时登陆两次
深入了解Python的异常处理机制
Python爬虫实战演练之采集拉钩网招聘信息数据
python错误：AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
opencv调用yolov3模型深度学习目标检测实例详解
python 包实现 urllib 网络请求操作
如何基于Python实现电子邮件的发送
Python标准库inspect的具体使用方法
python方法如何实现字符串反转
PyCharm+PyQt5+QtDesigner配置详解
