华易动力天津网站制作公司 免费咨询热线:400-0022-823 电话:022-28261501 28335110
地址:天津市河西区围堤道146号华盛广场B座22楼
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息
  首页 关于我们 建网站:从这里开始 域名空间服务 案例展示 新闻中心 网站制作知识 网站设计技巧 人才招聘 联系我们  
  网站制作知识
程序制作
数据库知识
域名空间知识
SEO网站优化
天津网站制作方案 更多..
如何获得了大量的好的外链资源
常见的长尾关键词组合方法
如何利用百度平台获取流量
营销优化型网站的简介
新顶级域名的形式
网站建设分为如下八步
网站专题设计
关于门户网站设计方案
华易动力售后服务规范
服务器机房介绍
优秀客户展示(排名无先后) 更多..
环化(天津)燃气设备安装有限公司
天津市国信投资担保有限公司
天津城市职业学院
天津大学EMBA
南开大学CID
北京同仁堂天津药店有限公司
金权道(天津)餐饮管理有限公司
天津市友好合作城市企业促进会
天津天大求实电力新技术股份有限公司
天津红旗农贸投资控股有限公司
天津二人锅餐饮管理有限公司
天津市滨湖剧院
渤海产业投资基金管理有限公司
天津天富软管工业有限公司
新闻中心-行业资讯 更多..
· 企业为什么要做APP   2016-11-24
· 如何搭配网站   2016-11-16
· css表单布局的五个小技巧   2016-11-16
· 服务器维护的重点   2016-11-14
· 如何建设你想要的网站类型   2016-11-14
· 阿里设计师用这2方法提升设计创新力   2016-11-3
· 我们看过的各种设计理论法则   2016-11-3
· Windows 8设计时的安全性   2013-12-27
· 未来网站技术的发展   2013-10-12
· 企业网站建设规划   2013-7-30
全部信息 当前位置:首页网站制作知识 → 详细内容
用CSS来控制网页背景
更新时间:2012/7/30 点击:922次
背景颜色 background-color
我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。
例:body{background-color:yellow}
H1{background-color:#000000}

·背景图片 background-image
背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none,而要加的话,就是在后面加上这个none就可以了。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}
h1{background-image:url(none)}

大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。

·图片是否重复显示 background-repeat
有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

·定位图片显示位置 background-position
一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制图片是否滚动 background-attachment
上面的两步可以帮你完成图像的定位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的,毕竟scroll是默认的,也就是不让图片随页面的内容而滚动的。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

好了,经过以上这番设置后,我相信你的背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。
例:body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

最后提醒一下大家,如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!

接下来我再介绍一下用DW4制作以上样式的方法,因为在DW中已经很详细的列出各项来了,具体的作用我也说明过了,所以就简要的介绍一下吧,只要大家能够明白就行了。
1.在此之前大家应该把CSS Styles这个窗口打开,如未打开的话,那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。
2.点击右键选择new style...这个选项或者点击下面的带有+号的图标。
3.在弹出的窗口中的选择如下,tag选择body因为我们上面介绍的CSS样式都是关于body的,而在这里我也只是介绍这个里面的background,其它的不要介绍内容之内;下面的type选择第二个;define也选择第二个,这样你呆会就可以在该文件中的之间找到一个了,而这里面的内容其实就是我上面介绍的。呵~_^
4.点击OK后弹出的窗口才是最重要的。我之前已说过,我们这次主要介绍的是background这个选项,所以在旁边的窗口中选中它吧。选中以后右边的窗口将会变成与它相关的设置项,具体的我在上面介绍过了,大家只要参照上面的介绍就可以完成了。不过需要说明一下的是在这个窗口中的最下面两项其实就是background-position中的水平方向垂直方向。
5.最后再点击OK就可以完成了。完成后你就可以在该页的代码(View下的Code选项)中找到它们了。

 
  公司总机:022-28261501 28335110
客户服务邮箱:service@nfree.cn,手机直线:15822335163
CopyRight 2006~2024 All Rights Reserved 天津市华易动力信息科技有限公司
地址:天津市河西区围堤道146号华盛广场B座22楼 邮编:300202

津公网安备 12010302001042号


在线QQ(售前咨询)
点击这里给我发消息  点击这里给我发消息  点击这里给我发消息