Dreamweaver CS6网页设计资料 参考案例1.docVIP

1. 设计诗情画决的图文效果建一个结构保存为?xml version=1.0 encoding=utf-8? ?xml-stylesheet type=text/css href=images/xml.css? poem title登乐游原/title author唐 李商隐/author wen li向晚意不适，/li li驱车登古原。/li li夕阳无限好，/li li只是近黄昏。/li /wen /poem （2）新建CSS式表文件为样式表文件中定义中各个标签的基本显示样式poem { margin:0px; background-image:url(06.jpg); } title { position:absolute; left:80px; top:20px; font-size:26px; color:#FFF; font-weight:bold; } author { position:absolute; left:100px; top:60px; font-size:14px; color:#0033FF; } wen { position:absolute; left:80px; top:90px; } li { display:block; color:#000; font-size:20px; font-weight:bold; margin:6px; } （3）使用CSS在文档中嵌入人画通过性定义诗文外包含框的大小用性定义嵌入人画位到包含框右下角wen { width:620px; height:350px; background:url(author.png) bottom right no-repeat ; } （4）完成以上代码之后示效果如图示 图古诗欣赏页效果图层叠包含本实例中对定元素div id=wrap包括两子元素div id=header和div id=main也是一个绝对定位元素 由于logo和div id=main是一个相对定位元素是们在中所处的层级不同无论logo绝对定位元素的层叠值有多高器下它都被覆盖在div id=main象的下面图示style type=text/css body { padding:0; margin:0; } #wrap, #header { position:relative; } #logo { position:absolute; width:231px; height:159px; left:20px; top:20px; background:url(images/logo1.gif) no-repeat; z-index:1000; text-indent:-999px; margin:0; } #main { width:100%; height:400px; position:absolute; background:#6699FF; top:140px; text-align:center; } /style /head body div id=wrap div id=header h1 id=logo网页标题/h1 /div div id=main主体区域/div /div /body 图1-2IE下定位元素的层叠包含关系效果 对于器的这个特殊现象妨从同级别的入手来解决就是说定义logo对象的包含块div id=header象的层叠值大于象的层父元素之间以平级身份进行层叠排序样果父元素排在上面它们的子级元素也都排在上面体来说也就是在div id=header象加一个-index属性值 #header { z-index:1; } 通过上面的样式定义div id=header象在象面样div id=header象的子元素不会层叠在上示 图1-3 解决IE浏览顺中定位元素的层叠包含问题 1 37 工学结合创新教程 Dreamweaver CS6网页设计实用教程 项目1 项目2 项目3 项目4 项目5 项目9 项目8 项目6 项目7 项目10