网站制作学习网DIV+CSS→正文:css zoom属性
字体:

css zoom属性

DIV+CSS 2010/6/29 9:50:18  点击:不统计

<网f站o学a习s制p作.cn>
<本文原载于www.forasp.cn>

zoom
基本语法zoom : normal | number
语法取值normal :  默认值。使用对象的实际尺寸number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值
使用说明:设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于currentStyle 对象而言是只读的。对于视频对象而言是可读写的。对应的脚本特性为zoom

转载%77%77%77请%2E%66%6F%72%61%73%70%2E%63%6E注明

 


示例:
1.不添加zoom属性,查看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<html xmlns="http://www.w3.org/1999/xhtmlquot;>
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
a{font-family: Arial; font-size: 0.8em; text-align:center; margin:3px; }
a:link, a:visited{ color:#A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border-top:1px solid #EEEEEE; border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; }
a:hover{  color:#821818;  padding:5px 8px 3px 12px; background-color:#e2c4c9; border-top: 1px solid #717171;  border-left:1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right:1px solid #EEEEEE; }
</style>
</head>
<body>
<a href="#">首 页</a> <a href="#">课 件</a> <a href="#">教 案</a> <a href="#">试 卷</a> <a href="#">图 库</a> <a href="#">视频</a>
</body>
</html>

2.添加了zoom属性,查看效果
<!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" c />
<title>无标题文档</title>
<style type="text/css">
a { /* 统一设置所有样式 */
    font-family: Arial;
    font-size: .8em;
    text-align:center;
    margin:3px;
    zoom:1;
}
a:link, a:visited { /* 超链接正常状态、被访问过的样式 */
    color: #A62020;
    padding:4px 10px 4px 10px;
    background-color: #ecd8db;
    text-decoration: none;
    border-top: 1px solid #EEEEEE; /* 边框实现阴影效果*/
    border-left: 1px solid #EEEEEE;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
}
a:hover { /* 鼠标经过时的超链接 */
    color:#821818; /* 改变文字颜色 */
    padding:5px 8px 3px 12px; /* 改变文字位置*/
    background-color:#e2c4c9; /* 改变背景色 */
    border-top: 1px solid #717171; /* 边框变换,实现“按下去”的效果 */
    border-left: 1px solid #717171;
    border-bottom: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="#">首 页</a> <a href="#">课 件</a> <a href="#">教 案</a> <a href="#">试 卷</a> <a href="#">图 库</a> <a href="#">视频</a>
</body>
</html>


http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E

·上一篇:css控制鼠标放到表格时边框颜色改变 >>    ·下一篇:css设置页面满屏的代码 >>
推荐文章
最新文章