dreamweavercs6网页设计资料参考案例1

《dreamweavercs6网页设计资料参考案例1》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、W工学结合创新教程DreamweaverCS6网页设计实用教程1.设计诗情画决的图文效果(1)构建一个XML文档结构，并保存为index.xml。唐李商隐vli>向晚意不适，v/li>vli>驱车登古原。vli>夕阳无限好，v/li>vli>只是近黄昏。

2、li>(2)新建CSS样式表文件，保存为xml.csso在样式表文件中定义XML文档中各个标签的基本显示样式。poem{margin:Opx;background-image:url(06.jpg);}title{position:absolute;left:8Opx;top:20px;fbnt-size:26px;color:#FFF;fbnt-weight:bold;}author{position:absolute;left:100px;top:60px;font-size:14px;color:#003

3、3FF;}wen{position:absolute;left:80px;top:90px;项目1H{display:block;color:#000;fbnt-size:20px;font-weight:bold;margin:6px;项目2项目3（3）使用CSS在文档中歐入诗人画像，并通过width和height属性定义诗文外包含框的大小，并用background屈性定义值bottom和right,把嵌入诗人画像定位到包含框的右下角。wen{width:620px;height:350px;background:url(autho匚

4、png)bottomrightno-repeat;（4）完成以上代码之后，显示效果如图1-1所示。•@Q・c13D'R*二•T夕阳无瞅好・只・项目6:图1"古诗欣赏网页效果图项目7项LI81.层叠包含在本实例中，相对定位元素vdivid=nwrapM＞下包括两个子元素：＜divid=HheaderH＞和vdivid二"main”〉也是一个绝对定位元素。项目9由于vhlid=“logo“＞和＜divid=“main”＞是-个相对定位元素，但是，它们在HTML结构中所处的层级不同，导致无论vhlid=“logo“＞绝对定位元素的层叠值有多高

5、，在IE浏览器下它项LI10都被覆盖在＜divid=umainH＞对象的下面，如图1・2所示。＜styletype=ntext/cssH＞工学结合创新教程DreamweaverCS6网页设计实用教程body{padding:0;margin:0;}#wrap,#header{position:relative;}#logo{position:absolute;width:231px;height:159px;left:20px;top:20px;background:url(images/logol.gif)no-repeat;z-in

6、dex:1000;text-indent:-999px;margin:0;}#main{width:100%;height:400px;position:absolute;background:#6699FF;top:140px;text-align:center;)网页标题v/hl>