准备去应聘一个网页设计的职位。看起来应该去复习一下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%; } div { width: 300px; height: 300px; margin: 10px; float: left; } /*稍后我们把要实现的代码写在这里*/
2. CSS3 圆角
如上面所说,我们的代码会是这样的:
#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. 半径) |