网页背景全攻略

《网页背景全攻略》由会员分享，可在线阅读，更多相关《网页背景全攻略（30页珍藏版）》请在装配图网上搜索。

1、网页背景全攻略网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现在就由我来为大家作一个比较完整的总结。1.颜色背景颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过标签来指定页面的颜色背景，其HTML语法为

2、：其中的color表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。2.沙纹背景沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。初学主页

3、制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的HTML语法如下：其中的picture表示背景图片的URL路径。3.条状背景条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的

4、，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。也通过1. 使用方法： 2. 卷标解说：这个卷标其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在这卷标里面。工友就其属性来一一解说：背景颜色用法：设定背景颜色。有人会说：我已经设定了背景图片，那背景颜色还有用吗？当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显

5、现背景颜色，您说，是不是比一片灰灰的好看多了呢！原始码这是标题这里是本文区呈现结果这里是本文区将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。4.照片背景把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，没有做不到的，这里我们用上一点简单的CSS。在网页文件的之间加入下面的CSS语句:这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚

6、动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整background-position的值就可以了。5.复合背景如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧！6.局部背景前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自

7、己的背景呢？回答是肯定的。最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。请看下面这个表格例子：在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，是不是有点相当不错，这也需要用上一些CSS。请先看一下下面的这个例子：不仅仅是页面的背景记得毛主席有这么一首诗：坐地日行八万里，巡于遥看一千河。伟人就是了不起，几万里就出去了。在浏览器中的显示效果如图所

8、示，现在是不是有点兴奋了，啊，原来文段也可以有自己的背景。只要你愿意，你就可以为页面的任何一个部分定义自己的背景，从而把页面打扮得更加漂亮和吸引人。说到这，关于网页背景设计的问题也就说得大概也就差不多了，但新的网页制作技术也在不断涌现，说不定今天你看了这篇文章，明天就觉得它太过时了。笔者写这篇文章，目的是引起广大网页制作者对背景设计的注意，毕竟，背景对网页来说实在是太重要了，当然，网站还是要以内容为第一的。7. 色带：语句为： 颜色按一.5.选择。例：8. 发移动字：(1) 向左移动字：向左移动字(2) 发向右移动字：向右移动字(3) 发来回移动字：向左来回移动字向右来回移动字(4) 发向上移

9、动字： 向上移动字- -(5) 发向下移动字： 向下移动字- -(6) 发限高向上、向下移动字： 限高向下移动字 限高向上移动字- - -(7) 发限高上下来回移动字： 限高上下来回移动字 限高上下来回移动字- - -(8) 控速移动字：控速移动字控速移动字的速度控制值N的取值：1. N0与N=6速度相同；2. N0；N0的任意值。控速移动字N=-9控速移动字N=-1控速移动字N=1控速移动字N=2控速移动字N=3控速移动字N=4控速移动字N=5控速移动字N=6控速移动字N=7控速移动字N=8控速移动字N=9控速移动字N=10控速移动字N=20控速移动字N=30控速移动字N=40控速移动字N=

10、50控速移动字N=60控速移动字N=70控速移动字N=80控速移动字N=90控速移动字N=100控速移动字N=200控速移动字N=300(9) 发限高控速向上、向下移动字： 限高控速向下移动字 限高控速向上移动字- - -(10) 左右跳动移动字：左右跳动移动字向左跳动移动字向右跳动移动字(11) 发向上跳动移动字：向上跳动移动字向下跳动移动字- - -9. 发图片：注意，图片必须是网络上的图片。语句：例：img src= 11. 地址链接：语句：点击这里12. 发按钮和按钮字：按钮：空白按钮： & nbsp; 按钮字：按钮字按钮字2. 发色带移动字：色带移动字9. 方框游动字：(1) 方框游

11、动字15. 文字色带组合： (1) 文字、色带双游动：文字、色带双游动 (2) 发左定位色带移动字： 1) 左定位20色带移动字：左定位20色带移动字 2) 左定位40色带移动字：左定位40色带移动字 3) 左定位80色带移动字：左定位80色带移动字 4) 左定位160色带移动字：左定位160色带移动字1、Alpha 滤镜 语法：FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy) Alph

12、a属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下： “opacity代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。”finishopacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。“style 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透

13、明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。效果如下：2、Blur 滤镜语法：对于HTML：ilter:blur(add=add,direction=direction,strength=strength) 对于Script语言： oblurfilter= object.filters.blur用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur就是产生同样的模糊效果。“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，“DIRECTIO

14、N”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，她代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体，如果设置他的模糊”ADD=1“，那么这些字体的效果会非常好看的。如下：filter:blur(add=ture,direction=135,strength=10）我向你飞，雨温柔地缀！3、FlipH, FlipV 滤镜 语法：filter:filph ,filter:filpv 分别是水平反转和垂直反转，具体如下：4、Chroma 滤镜语法：filter:chroma(color=c

15、olor) 使用”Chroma属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。filter:chroma(color=blue)滴水檐坊、DropShadow 滤镜语法：filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)“DropShaow顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。Color代表投射阴影的颜色，offx和offy分别是X方向和Y方向阴影的饿偏移量。Positive参数是一个布

16、尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果 正常文字 dropshadow(color=gray,offx=5,offy=5,positive=0)后的文字6、Glow 滤镜语法：filter:glow(color=color,strength)当对一个对象使用glow属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。filter:glow(color=red,strength=10) 后的效

17、果滴水檐茶坊filter:glow(color=#ffff00,strength=10) 后的效果好象可以把PhotoShop踹到一边了，是吗？7、Gray ,Invert,Xray 滤镜 语法：filter:gray ,filter:invert,filter:xrayGray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。效果如下：8、Light 滤镜语法：Filterlight这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT滤镜属性，那么就可以调用它的

18、“方法(Method)来设置或者改变属性。“LIGHT可用的方法有： AddAmbient 加入包围的光源 AddCone 加入锥形光源 AddPoint 加入点光源 Changcolor 改变光的颜色 Changstrength 改变光源的强度 Clear 清除所有的光源 MoveLight 移动光源 可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。后面几页会有具体范例。9、Mask 滤镜语法：filter:mask(color=

19、color)使用MASK属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。10、Shadow 滤镜语法：filter:shadow(color=color,direction=direction)利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。filter:shadow(color=red,direction=225) filter:shadow(color=blue,direction=225) filter:shadow(color

20、=gray,direction=225) 效果分别如下：Shadow 滤镜 Shadow 滤镜 Shadow 滤镜 11、Wave 滤镜 语法：filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)wave属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”， “ADD”表示是否要把对象按照波形样式打乱，“FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0-100，“PHASE”参数用来设

21、置正弦波的偏移量。“STRENGTH”代表振幅大小。就是在添加内容的代码中（蓝色代码 TABLE这个元素后面）添加一个CSS滤镜的梦幻效果代码-style=FILTER: Alpha(opacity=100,style=2) 很简单，识破不值半文钱！二、音画代码:红色代码是边框代码,蓝色代码是添加内容的代码,桔黄色代码是添加内容代码部分的结束标记. 三、看看效果: 请点击查看影音文件.图片满天小星星4代码5代码 2006年B2C全面市场回顾 三大特征值得关注发表时间：2007-06-15 09:02:47 作者：CBINews编辑 H3C OCS开放通讯解决方案 易观国际对B2C市场

22、规模的研究表明，2007年第1季度B2C的市场交易规模达到10.2亿元，与2006年第4季度基本持平。 当当网宣布地处北京南五环的新物流中心建成，将于五一期间启用新的物流中心。当当网称：新物流中心不仅面积增大，在硬件和软件上也有很大的提高，在提高物流中心运作能力的同时最大程度降低了配送错误率，预计配送错误率将减少一半以上。 4月23日，卓越网宣布推出一项新的功能-“拆分订单服务”。一旦用户选择“拆分订单”服务，将先行发送有货商品，而预售商品将在到货之后再次发售。5月18日，卓越网正式宣布其华南区广州运营中心正式启用。结合设立于苏州、北京两地的运营中心，卓越网已完成了全国贯通运营的战略部署。 易

23、观国际的研究认为，2006年中国B2C市场已更趋于理性，市场突变的可能性不大，市场呈现三大特征，值得关注。 B2C的理性首先表现在宏观上-市场激烈的起伏已经消退。根据易观国际的研究，2006年B2C市场的整体发展相当平稳，从该年2006年第1季度的8.54亿元，增长为2006年第4季度的10.3亿元，平均增长率约为7%，而此前在2005年第1季度则比2004年第4季度增长了37%。从2006年的趋势看，B2C大规模膨胀的泡沫几不存在，且各厂商既未获得数量巨大的投资，也无重要厂商崩盘，市场在理性中缓慢上升。 其次，B2C的理性也体现在业界心态的成熟。对于B2C模式，互联网玩家们已经清楚的意识到，

24、它既无法具备网络效应所带来的锁定（典型如C2C），也不可能仅仅依靠贩卖虚拟用户体验就能获得收益（典型如如网游和QQ）。B2C无可改变的“鼠标+水泥”模式意味着规模化和成本决定着一个B2C厂商的市场份额和前途。这使B2C行业本身少了很多投机的诱惑以及竞相追捧的热闹，留下的则是厂商实实在在的在积累用户，增加品类，以及压缩成本上的全力以赴 最后，用户也正趋于理性。一方面，用户开始认识到什么是B2C能够带给他们的，对于书籍，数码产品等典型的同质化商品，用户越来越认同这种购物方式；另一方面，用户开始增加对有实力的B2C厂商的品牌认同及信任感，也开始学会对于欺诈和风险的防范。这使B2C用户的数量迅速提升。

25、根据易观国际的研究，B2C注册用户数从2006年第1季度的6853万迅速增长到2006年第4季度的9409万37% 市场格局稳定中蕴含变数 由于市场进一步趋于理性，格局突变的可能性很小，“寡头+长尾”的格局正牢固的支配着市场。根据易观国际的研究，2006年第1季度，B2C市场前两位的厂商“当当网”和“卓越网”超过了全部B2C市场份额的1/3，其中当当网占26.35%，卓越网占11.02%。而到了2006年第4季度，这一情况仍未有显著变化。事实上，当当网和卓越网占2006年全年B2C市场份额的29.74%，其中仅当当网就占到了18.69%，二者始终保持市场前两位。 另一方面，用户也集中在领先的两

26、个厂商之中。从累积注册账户数看，截至2007年第1季度，当当网拥有1295万注册用户，占19%的用户份额；而卓越网也拥有1087万注册账户，占16%的用户份额，二者之和占到了全部B2C市场注册账户总量的35.3%。 值得注意的是，除了这两个重量级玩家，其他厂商所占市场规模则不在一个量级。例如，排名第三的云网，其市场份额仅占2006年全年的约5%，用户份额仅4%。另一个值得关注的现象是，B2C市场上超过5万个厂商的市场份额均不超过1%，但总量却占据了该市场50%左右的市场份额，使B2C市场呈现出典型的长尾分布。 易观国际认为，尽管寡头占有B2C市场的关键份额，但其地位将肯定受到挑战。最大的威胁自

27、于C2C平台向B2C模式的迁移。C2C平台上一部分固有的卖家（C）在马太效应的作用下实力日益增强，成为具备规模的大卖家（B），而另外一些本身即为B的商家也进入C2C，使C2C成为一个兼具个人卖家（C）和专业卖家（B）的包容平台，其商品品类的丰富程度、搜索功能以及比价功能必然将冲击传统B2C厂商，并敦促其进一步深挖固有优势。 同样值得关注的是，寡头B2C也在2006年开始悄然尝试平台业务，以自己庞大的用户基数为基础，在自己的网站上为其他互补业务的长尾B2C商家提供营销空间。以当当网为例，当当网开展的“店中店”业务在2006年已经入驻了近2000个专业网络商户和大商户，分在20个品类，日成交额已约

28、200万人民币。 尽管部分小B2C厂商开始依托寡头B2C厂商，但绝大多数B2C厂商还是在自己的一片天地中经营，其中传统线下商户向线上扩展占据了主要部分。需要注意的是，线下商户并非是向线上迁移，而是以B2C电子商务作为其另外一个补充渠道。另一方面，长尾中纯粹的B2C电子商务网站正在减少，主要原因在于其规模难以扩大，导致成本无法通过规模经济降低或分摊，并导致盈利的困难。 用户深度仍待挖掘 易观国际发现，2006年B2C用户群体还呈现非常明显的集中，用户质量还有待提高。 首先，用户年轻化现象仍未改变。在易观国际对随机抽取的7075个用户的调研中，49.33%的用户年龄不超过20岁，而30岁以上的用户

29、不超过8%。其次，用户的身份仍以没有明显收入来源的学生为主，占全部调查用户的48.96%，其中在读高中及以下学生占35%。再次，用户平均消费金额仍不理想，2006年全年消费不超过200元人民币的用户竟占到46.88%，而年消费超过1000元的用户仅占17.88%，这说明用户潜力仍待挖掘。 不过，乐观的方面是，26岁35岁的B2C用户占全部用户的16.22%，而两年前的同样调查显示这一数据不足10%。这说明，B2C用户的平均年龄正在增长，那些在年轻时有过B2C购物经历的消费者，随着年龄的增长，并未放弃这一给他们带来更多便利的购物渠道。因此，对于B2C厂商而言，如何满足现有年龄群体用户的需求以及挖

30、掘实力客户（30岁以上，年收入超过6万元的客户），尤其是提升实力客户的体验，应该成为众厂商2007年的主要努力方向。 调查还显示，诚信度（包括产品质量及商家诚信度）、物流、商品价格和付款方式是用户最关注的四点体验，分别占90.04%，51.45%、43.55%和31.72%的关注度。传统B2C厂商已经开始在这些方面进一步发力。其中在今年的5月1日，当当网启用了新的更现代化的物流中心，以提高其配送速度和诚信度；卓越则在4月份推出了拆分订单服务，并增加了物流中心，其用意与当当网完全一致。 对居于领导地位的B2C厂商： 1. 对当当网和卓越网而言，诚信度不仅仅体现在支付交易环节，是否能够按承诺、完好

31、的将货品送抵用户也是重要一环。由于B2C目前还没有增加如C2C平台常用的信用中介工具，因此在用户付款之后，让用户在期望范围之内交付货物对用户体验的改善至关重要。 2. C2C平台无可撼动的综合商品能力对追求大而全的B2C厂商而言是极具冲击的，因此B2C应寻求自身的优势领域。相对于C2C，B2C的优势在于比C2C上单一卖家更具规模优势，并因此能够带来的商品的更低价格。另一优势在于，B2C的公信力和维护公信力的手段都要优于C2C厂商。 3. B2C平台化，即吸引其他B加盟自己的B2C网站是一个相当不错的思路，能够增加品类，并增加非主营业务的收入。不过对加盟商户的资质和可能产生的风险要加以评估。 4. 吸引实力客户应逐渐成为B2C平台市场策略的重点。而在这一领域，目前起步时间不长的网上彩票和网上金融服务已经表现出强劲活力，值得关注，而其他潜力领域也应注意发掘。 对长尾B2C厂商： 1. 专业化和实体化（即拥有实体店铺）的B2C模式要优于纯粹的在线B2C模式。 2. 社区化的B2C网站具有机会，物流和诚信度两大门槛对社区化B2C网站而言相对较低。 3. 如果没有任何独立操作B2C网站的经验，加入C2C平台不失为一个选择，但缺点在于，可能会立即陷入价格竞争和失去关注焦点的境地。