DIV+CSS网页布局技巧20例

来源：远方教程作者：远方教程发布时间：2015-01-29 查看次数：15311　访问[新版]

　　DIV+CSS网页布局技巧实例9：不需要重复定义可继承的值

　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
<!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=gb2312" /> <title>无标题文档</title> <style> body { background:url(/upfile/images/bg.jpg)} #layout { position:absolute; top:50px; left:200px; width:500px; height:500px; border:1px solid #006699; background:#fff; filter: alpha(opacity=80); moz-opacity: 0.8; padding:30px; font-size:18px; font-weight:bold;} #son_layout { width:300px; height:200px; background:#fff; border:1px solid #f60;} </style> </head> <body> <div id="layout"> <p>标准之路（这是父层）</p> <p> </p> <div id="son_layout">这是子层，继承父层的字体大小及粗体属性</div> </div> </body> </html>
提示：可以先修改部分代码后再运行

　　DIV+CSS网页布局技巧实例10：最近优先原则
　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class="update"将被使用，因为class比p更近。

第1页第2页第3页第4页 第5页 第6页第7页第8页第9页第10页

标签： DIV CS S网巧例导航 Google一下

分享到： QQ空间新浪微博腾讯微博人人网

打印 |

关闭评论

上一篇：DIV+CSS：网站首页布局实例教程

下一篇：没有了

·查看安全快捷上网技巧

图片新闻

美女户外健身, 美翻

真人美女和动漫美女

站内搜索

猜您喜欢