仓酷云

标题: DIV教程之利用一张或两张图片创立年夜背景网站 [打印本页]

作者: 变相怪杰 时间: 2015-1-15 23:31
标题: DIV教程之利用一张或两张图片创立年夜背景网站
业界越来越关注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>
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

作者: 不帅 时间: 2015-1-17 22:59
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 第二个灵魂 时间: 2015-1-25 19:36
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 小女巫 时间: 2015-2-3 20:00
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 蒙在股里 时间: 2015-2-9 06:38
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 飘灵儿 时间: 2015-2-27 04:38
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 简单生活 时间: 2015-3-16 19:41
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 若天明 时间: 2015-3-23 06:33
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

欢迎光临仓酷云 (http://www.ckuyun.com/)