网页制作

网页设计应该熟知的CSS 3.0技术
网页制作 2024/11/15 佚名
3 2

1. 基本的xhtml标记

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

在开始这个教程之前，让我们来做点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 圆角

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

如上面所说，我们的代码会是这样的：

#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. 半径），明白了吧！

3. 单独圆角的定义

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

看了上面的CSS圆角，你可能会觉得，如果我想让它只显示两个三个圆角，需要怎么办呢，难道还是要用到制图工具? 当然不用，CSS3已经为我们想好了。这里，我们的代码将是：

#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}

注意到topright和top-left这两个值没有? 这表明的是圆角的方位，完整的方位书写出下：

  • 以-moz为前缀的：topleft topright bottomleft bottomright
  • 以-webkit为前缀的：top-left top-right bottom-left bottom-right

而且，你注意到了没，-moz为前缀的，是写在最后，而以-webkit前缀的，写在半径的前面。

4. 显示不透明度

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

搞过透明没有， 很难搞，是不是？对，就是难搞，特别是IE(友情推荐:让IE支持PNG透明的最好方法)。而CSS3只要一行代码。如果浏览器都支持CSS 3，事情就好办多了。我们的代码如下：

#opacity {
background-color: #000;
opacity: 0.3;
}

再来一次英文解释吧，opacity，就是不透明度的意思。我想，只要知道这个，你就会用了吧?

5. CSS 投影

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

你可能知道如何用CSS技巧来实现投影吧? 不过，这里要说的不是技巧，而是CSS 3的一个技术，看代码：

#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

看到没，-webkit这一行，只要这一行。3px表示水平方向的投影，5px表示纵向投影，而10px而指模糊的跨度（使用过fireworks或者photoshop的feather功能没有? 对，就是这个!）。而且，像你看到的，-webkit为前缀，证明只有safari和chrome这样的浏览器才会显示，firefox则不会。

6. 调节大小

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

用过safari的人都知道，一般情况下，textarea部分是可以调节大小的，就是这样。不过，这个功能现在也暂时只支持safari。代码如下：

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}

resize:both。像clear:both一样。表示，可以向水平方向和纵方向选择拖动，调节大小。当然，也支持下面的值：

  • resize:horizontal; 水平方向调作
  • resize:vertical; 纵向调节

而另一个要让你明白的是，你必须把overflow:auto;写上，才能保证Resize正常使用。当然，你还可以设定最长宽度，最低高度来让这个元素在可一个范围内可调节，知道下面这个不?

  • max-height: 123px;
  • min-height: 321px;
  • max-width: 123px;
  • min-width: 321px;

不懂? 那你可以回去学一下CSS啦，虽然IE6这个曾经的伟大过的浏览器不支持这个属性（可用JS来hack它）。这可是很重要的哦!

你有没有一边看，一边跟着做呢? 如果没有，建议你做一次。像你知道的，代码这东西，看着，以为懂了，到了用的时候，可能会不知道如何下手用。自己动手，会让你发现更多问题，会让你有更多的进步，而不是单纯看。anyway，这个还是提供出来：

提示：您可以先修改部分代码再运行

标签：
CSS3,技术
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“网页设计应该熟知的CSS 3.0技术”

暂无“网页设计应该熟知的CSS 3.0技术”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com