资源描述：
《禅意花园作品研究》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、第14讲禅意花园作品研究秦円758寻乍品《筒约A阳》布局方法創析案例特点：1.颜色协调、意境优美;2.充分使用图片的技巧;3.布局规整中不失灵活。制作方法参考:设置渐变的页面背景body{font:llpxgeorgia^tiineSjserif;color：SF0E9CE;background：#F0E9CEurl(mainbg.gif)repeat~xtop;inargin：0;text~align:center;注：1、背景图片最下端的颜色为：#F0E9CE,将此颜色设为背景色可以很好的与背景图片相融合，
2、达到了渐变自然过渡的效果，这是网页设计中经常用到的一种手段。2、木案例由三个背景图像构成，一前两个分别是pageHeader和quickSummary的背景图片，第三个是用于竖直方向平铺的背景。ttcontainer{margin：0auto;text-align：left;background：url(contbg.gif)repeat-ycenter;width:672px;}.ttsupportingText{line-height:19px;}#pageHeader{height:287px;backg
3、round：url(top.jpg)no-repeat;}.ftquickSuiriiriary{background：url(prebg.gif)no-repeatcentertop;height:87px;font-size：9px;text-transforin：uppercase;}ttpreamble{width：380px;margin-top:~95px;padding：000260px;font-style：italic;}ffsupportingText{width：380px;
4、paddin
5、g：000260px;注：注意观察此时效果显示,整个页面的外层框架已经搭建起来了。设置整体结构1)pageHeader高度：287px,2)quickSummry度：87px,其中的两段文字通过绝对定位移动到了pageHeader的图片上。#quickSuiranary.p2[position：absolute;top：190px;width:280px;text-align：right;margin-left:360px;}.#quickSuiranary.pl{position：absolute;top：l
6、OOpx;width：158px;margin-left:482px;text-align：right;line-height:14px;}3)preamble,宽度：380px,原本在quickSummry下方，但是通过设置margin-top的负值,将他向上移动了95pxo4)SupportingText在preamble的下面，宽度：380px5)SupportingText和preamble都设置了260px的左侧padding,这样做是为了给linkList留出空间。2、设置linkList#link
7、List{position：absolute;top：325px;padding-left:45px;color：#250101;}注：此绝对定位没有上级元素，因此它是以浏览器窗口为定位基准的。设置.footer#footer{display：block;width:625px;margin-left:-235px;text-align:center;padding:15px025px0;font:lOpxverdana,arial,serif;text-transform:uppercase;letter-s
8、pacing：-lpx;background：#DCD5B8url(footerbg.gif)repeat-xbottom;display:none;}}^#extraDivl,#extraDiv2,#extraDiv3,#extraDiv4,#extraDivl,#extraDiv5,#paggHead&rhl,h2注：footer的扩展办法仍然是将margin设为负值。三、细节设f1、设置各个部分的标题图片替换文字的方法:1）将所有盒子中的h3标题的文字替换为图片，首先需要将文字隐藏起来。将h3里面的spa
9、n的display设置为none,就可以不显示了，再将h3背景设为背景图片即可。2)另一种方法，将文字设置为一个绝对值很大的负的text-indent(文字缩进)属性，使文字移动到页面外面，并且设置了高度，仍然占据着高度空间。ttpreainblehS,ttexplanationh3,#participationh3,#benefitsh3,#requirementsh3(text-i
