您现在的位置：计算机技术学习网 > 技术中心 > WEB编程 > DIVCSS >

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

来源：互联网 责任编辑：栏目编辑 发表时间:2013-07-01 21:18　点击:次
ASPPHPJSPJavaScript网页设计DIVCSSAjax技术HTML5

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

1：基本标记

css3-教程

在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。

我们的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设计符合Web标
CSS设计符合Web标
热门新闻进入WEB编程频道>>
DIVCSS
网页设计规范经验：应保持CSS的整洁度和有序性
DIVCSS
关于网站背投广告设计的效益：用最少的时间来做最效率的事情
DIVCSS
网页设计之元素描述：应该选择合适的、有意义的元素描述内容
DIVCSS
网页设计规范思考：CSS文件应该保持整洁和统一
DIVCSS
3款在线CSS代码生成工具
DIVCSS
把XHTML+CSS页面转换成为打印机页面
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

今日头条

更多>>

推荐热点

  • 扎实基础 9则css网页制作技巧
  • CSS设计符合Web标准的网页表单的几个技巧
  • 技巧：css星级效果总结
  • 用CSS建设网站的实例(9)
  • 提高网站性能:JavaScript+CSS优化的建议(3)
  • CSS制作网页实例：用CSS控制li标记样式

您可能感兴趣的文章

快速直达

新闻点评智问网络

新闻关注排行榜

热门推荐 最新推荐

WEB编程导航

网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1