|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介:在这篇教程中,我会供应多种CSS事例来说解,怎样利用一张大概两张图片来创立年夜背景网站。
自从我宣布了年夜背景网站合集以后,我收到了良多邮件,扣问如何才干用CSS来界说网站中的年夜背景。因而我就想,分享下我在制造年夜背景网站中所使用到的手艺也许是个不错的主张。在这篇教程中,我会供应多种CSS事例来说解,怎样利用一张大概两张图片来创立年夜背景网站。
罕见的毛病:背景被扩充(检察演示)
看一下演示文件效果,在1280px分辩率时显现的是一般的。可是在高于这个分辩率的显现器中,背景的两则看起来就像是被切短的了。
实例1:单张图片(请看典范)
敏捷办理后面提到这一成绩:将图片边沿的色彩设置成跟BODY背景致不异的色彩。这里我以WebDesignerWall作为典范。请反省,下图中的边沿用的是纯色?
CSS部分
CSS部分十分复杂。指定BODY标签的背景图象(position定位为center,top)。
这里是CSS代码:- body{padding:0;margin:0;background:#f8f7e5url(wdw-bg.jpg)no-repeatcentertop;width:100%;display:table;}
复制代码 注重,在BODY选择器中有两行分外的代码。这是为了避免在扫瞄器的内容小于宽度时背景图片产生偏移(这在Firefox中会呈现).
实例2:两张图片(请看树模)
在这个实例中,我筹办用事情中一个款式模板,DesignJobsontheWall。我给BODY标签使用了反复的软木板反复图案,#wrapper标签使用了居中的背景。
这里的小技能是导出了一张近似软木板图案、暗棕色的gif图片。
实例3:天空背景(seedemo)
在这个实例中,我给标签BODY设置了反复1px程度偏向的突变。然后给标签#wrapper附上云层背景。
更新:天空背景利用HTML选择器(请看典范)
感激读者们的批评。上面的天空背景实例是利用HTML选择器来显现突变背景,以是#wrapperDIV标签也就不必要了。这是一个更干净的体例。
当即下载典范zip,不要忘了点击80个使用年夜背景图片的网站.
</p>
使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。 |
|