快速业务通道

网页设计应该熟知的CSS 3.0技术

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02

准备去应聘一个网页设计的职位。看起来应该去复习一下xHtml(CSS应该不需要多复习吧-_-!!),不过,先来一些CSS 3.0的知识吧。怎么说呢?CSS 3已经非常强大了,圆角+resize则是我喜欢的。

1. 基本的xhtml标记

css3.7.png

在开始这个教程之前,让我们来做点xHtml标记,我们需要的几个DIV来完成效果的显示,如下:

  • #round, 这个显示CSS 3圆角
  • #indie, 单个角的显示
  • #opacity, 不透明度
  • #shadow, 不用制图工具制作投影
  • #resize, 可调节大小

因此,我会的xHtml会像下面这样,你可以自己建立一个html文件:

<!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(还刻CSS reset吗? 可以看10款浏览器CSS Reset的方法),代码如下:

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/*稍后我们把要实现的代码写在这里*/

2. CSS3 圆角

css3.2.png

如上面所说,我们的代码会是这样的:

#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

在这里-moz是firefox上能显示的样式前缀,而-webkit刚是像safari/Chrome这样的浏览器的样式前缀。而10px刚是border的半径(radius : [''reidjəs] n. 半径)

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号