网页设计应该熟知的网页设计应该熟知的CSS 3.0技术技术
准备去应聘一个网页设计的职位。看起来应该去复习一下xHtml(CSS应该不需要多复习吧-_-!!),不过,先来
一些CSS 3.0的知识吧。怎么说呢?CSS 3已经非常强大了,圆角+resize则是我喜欢的。
1. 基本的基本的xhtml标记标记
在开始这个教程之前,让我们来做点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%;