你应当了解的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都留给我们在后面的工作中添加样式。
猜你喜欢
- 这篇论坛文章(赛迪网技术社区)主要介绍了一种简单的MySQL数据库安装方法,详细内容请大家参考下文:虽然安装MySQL数据库的文章很多,但是
- 许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象,其实只要一句简单的CSS(层叠样式表),你也能在网页上实现这种效果。首先,你需要一个鼠
- 采用最小二乘的求逆方法在大部分情况下是低效率的。特别地,当局镇非常大时效率更低。另外一种实现方法是矩阵分解,此方法使用tensorflow内
- 1、引言小 * 丝:鱼哥,这个周末过得咋样小鱼:酸爽~ ~小 * 丝:额~~ 我能想到的,是这样吗?小鱼:有多远你走多远。小 * 丝:唉,鱼哥,你别说,
- MySQL 复制表详解如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等。 如果仅仅使用CREATE TABLE ...
- 错误:ImportError: libcublas.so.9.0: cannot open shared object file: No s
- 本文讲述了joomla组件开发知识点。分享给大家供大家参考,具体如下:在你进行编码之前,有一些文件和文件夹需要创建和一些查询语句需要运行。你
- MySQL事务处理(TransAction)思考了很久,决定写一篇关于mysql事务(transaction)的博客,一来嘛,因为最近在复习
- 本文讲述了python实现的正则表达式功能。分享给大家供大家参考,具体如下:前文:首先,什么叫正则表达式(Regular Expressio
- 这段时间写了很多页面代码,除了一些知识重复以外,也学到css的一些新东西,或许是旧东西,但是还是希望能对大家有用。其实在css里面有很多对a
- yaml文件内容apiVersion: policy/v1beta1kind: PodSecurityPolicymetadata: &nb
- 1. Single array iteration>>> a = np.arange(6).reshape(2,3)>
- 本文实例讲述了Python使用PyCrypto实现AES加密功能。分享给大家供大家参考,具体如下:#!/usr/bin/env python
- 基础知识# 在Linux操作系统下,Python3的默认环境编码变为了utf-8编码,所以在编写代码的时候,字符串大部分都是以utf-8处理
- 前言我们在分析列表数据时,常常需要对列表数据进行输出或多列表关联拼接。直接使用列表,列表中的各元素以逗号分隔,每个元素包含引号。如何连接列表
- 关于Python 黑魔法 metaclass 的两种极端观点:这种特性太牛逼了,是无所不能的阿拉丁神灯,必须找机会用上才能显示自己的 Pyt
- “看图购”beta版今日起正式在淘宝网上线了,域名是:http://go.taobao.com。从此您也可以像翻看杂志一样翻看女装的图片了,
- APScheduler (advanceded python scheduler)是一款Python开发的定时任务工具。文档地址
- 首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果。以下为完整代码,很简单,但也是个技巧。<!DOCTYP
- 这篇论坛文章着重介绍了SQL Server数据库简体繁体数据混用的问题,详细内容请参考下文:我现在要说的是一个在简体繁体数据混用的时候很容易