zoukankan      html  css  js  c++  java
  • 页面背景图像的代码

    页面背景图像的代码


    1.(最普遍类)

    <style>
    body{background-image:url(logo.gif);
    background-repeat:no-repeat;background-position:center}
    </style>

    说明:以上代码为网页背景图片固定代码!

    网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的!

    2.(综合类)

    3.<P class=style6> </P></SPAN><SPAN>
    <TABLE width="100%">
    <TBODY>
    <TR>
    <TD class=ArticleTitle align=left>
    <DIV id=divTitle style="FONT-SIZE: 30px"><B></B> </DIV></TD></TR>
    <TR>
    <TD class=ArticleContent style="FONT-SIZE: 30px; LINE-HEIGHT: 150%" align=left>
    <CENTER> </CENTER>
    <STYLE type=text/css><!--body {background-image:url( 图片地址);

    background-repeat:no-repeat;

    background-attachment:fixed;background-position:50% 50%}</STYLE>
    </TD></TR></TBODY></TABLE></SPAN>

    说明:

    no-repeat;(不平铺)

    改为这个repeat(平铺)

    你要以看一下两边

    方法一:
    文章编辑的时候点击创建表格后在弹出的窗体中把边框设置为0,然后填上背景图片的链接地址就好了
    也能够用代码:
    <TABLE height=600 width=600 background=你的背景图片地址 border=0>
    <TBODY>
    <TR>
    <TD>你的主体内容</TD></TR></TBODY></TABLE>
    方法二:
    <body background=你的背景图片地址 >
    方法三:
    <STYLE type=text/css><!--body {background-image:url(你的背景图片地址);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--> </STYLE>
    方法四:
    背景图是在HTML模式下把下面代码加到已有代码最前面:
    <body background="图片地址">
    注:图片地址必须是网络上已有的图片,不是本地机的,假设要链接本地机的。必先在相冊或者其它文章上传之后才干够调用。

    方法五:
    <STYLE TYPE="text/css">
    <!--
    BODY {background-image: URL(图片名称.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;}
    -->
    </STYLE>



    ◆字体属性:<font color=00dfff face="幼圆" size=4.5>显示文字</font>

    ◆背景,正文,连接颜色:<body bgcolor="#000000" text="#ff9933" link="#ff66ff">

    ◆ 给字体加光晕<table style="FILTER: glow(color=颜色)">文字</table>当中的glow客换成shadow,dropshadow等,产生的效果各不同样

    ◆颜色代码网址http://shirley329.blogchina.com/3501281.html

    ◆背景图案:<body background="http://图片地址" bgproperties="fixed">假设去掉后面的bgproperties="fixed"那么选折的背景会跟页面一起翻,这里给点儿建议,一般上下衔接的非常巧妙的或者用碎花,星星之类的作成滚动的比較好,而那种完整的图片最好就固定下?

    当然自己最好都试一下,看哪个合适另外注意背景一定要选用颜色较浅的图画,要分得清主次,3楼有编辑的小工具,调一下GAMA值就能得到浅色的图片,还有个图片放大器。能够通过插值不失真的放大图片

    ◆背景音乐:<BGSOUND src="http://音乐地址" loop=infinite> 假设不加 loop=infinite 那么背景音乐仅仅播一边就结束了;假设想给自己的音乐加个精美的播放器,能够看这里,还能实现不同歌曲的连续播放里面有9种样式播放器

    ◆页面贴图:<img width=XXpx src="http://图片地址"> 即在涂鸦版里显示的图片,width事宽度还能够是height,也能够同一时候定义,注意数字与单位间不要有空格,也能用百分比表示。如以下

    ◆浮动的图片<div style="position:absolute;Top:0px;left:250px;"><img width=160% src="图片地址"></div> 这一条比上一个灵活非常多通过改动參数能够将图片定位在页面的不论什么位置 ,资源网址两边的引號是可有可无的单引也能够

    ◆贴图透明化:<IMG style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();" src=贴图的网址 width=400 height=300> Style能够是1.2.3代表不同的效果、自己试试吧 opacity是透明度0~100 假设是0全然透明

    ◆超链接: <a href=http://www.地址.com target="_blank">被连接的文字</a> 被连接的文字能够更改属性。也能够换成喜欢的图片方法就是换成页面贴图target="_blank"指在新窗体打开,也能够删掉校内对&有限制。一般假设链接中有&就取它前面的地址,当然最好能先试一下

    ◆滚动的超链接: <marquee scrollAmount=2 width=300><a href=http://www.地址.com>被连接的文字</a></marquee>

    ◆改鼠标样式: <body style="cursor:url(’http://鼠标地址’)"> 4楼有270种鼠标

    ◆以下用CSS控制鼠标:<style type=text/css> <!--body{cursor:url(http://鼠标地址1)} a{cursor:url(鼠标地址2); --></style>

    1是正常状态下。2是鼠标放在链接上时的效果


    ◆让页面以幻灯片切换效果显示: <head><meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)"> <meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)"></head> 这里enter和exit分别指在訪问或离开时背景图片出现和消失的方式 duration是时间,transition是方式共24种,0 盒状收缩 1 盒状放射 2 圆形收缩 3 圆形放射 4 由下往上 5 由上往下 6 从左至右 7 从右至左 8 垂直百叶窗 9 水平百叶窗 10 水平格状百叶窗 11垂直格状百叶窗 12 任意溶解 13从左右两端向中间展开 14从中间向左右两端展开 15从上下两端向中间展开 16从中间向上下两端展开 17 从右上角向左下角展开 18 从右下角向左上角展开 19 从左上角向右下角展开 20 从左下角向右上角展开 21 水平线状展开 22 垂直线状展开 23 随机产生一种过渡方式


    ◆滚动文字 :<marquee scrollAmount=2 width=300 height=160 direction=up>滚动的文字</marquee>

    a)scrollAmount。它表示速度,值越大速度越快。

    假设没有它,默觉得6

    b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值

    c)direction。

    表示滚动的方向。默觉得从右向左:←←←。

    可选的值有right、down、up。滚动方向分别为:right表示→→ up表示↑。down表示↓。

    d)scrollDelay,这也是用来控制速度的,默觉得90,值越大。速度越慢。通常scrollDelay是不须要设置的。



    e)behavior。

    用它来控制属性,默觉得循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次。然后停止滚动)

    f)怎样给滚动字幕加超链接?这跟平时的超链接是全然一样的。

    仅仅要在文字外面加上<a href=***>和</a>就能够了
    g)改变滚动字幕的属性

    颜色:<a style=color:CC6600>滚动的文字</a>
    字体:<font color=00dfff face="幼圆" size=4.5>显示文字</font>
    注意:滚动的内容还能够换成其它的东西,自己慢慢试吧


    ◆设置成滚动:<marquee direction=up marquee scrollamount=3 >当向上滚动height=0时,就隐藏了 

    ◆FLASH动画:<embed style="left: 0px; position: absolute; top: 50px; " align=right src=http://flash地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

    希望各位能彻底搞懂这个,美丽的页面都少不了flash比方我的页面里的小时钟,发光的星星都是用它实现的,非常多贴子里提供特效只是是改动了里面的引用地址 left top是用来定位的当然也能够用right bottom width height来限制flash的大小align=right 表示右对齐

    ◆FLASH动画(相对定位即放在涂鸦板里):<embed style="left: 150px; position: relativity; top: 800px; " align=right src=http://flash地址 width=400 height=200 type=application/octet-stream ; quality="high" wmode="transparent">

    ◆假设要加时钟的话就用<embed style="left: 150px; position: absolute; top: 50px; " align=right src=http://时钟地址 width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent">

    hetght: 确定时钟大小,left: top: 来确定钟表在页面的任何位置,上面的代码是我页面时钟的位置

    ◆视频: <embed SRC=你的wmv的地址 type=audio/x-pn-realaudio-plugin CONSOLE=Clip1 CONTROLS=ImageWindow HEIGHT=252 WIDTH=324 AUTOSTART=true loop=true>

    ◆播放FLASH:<embed src=http://播放地址 quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="480"></embed>

    ◆ 更改页面文字样式(具体图解见5楼)
    <style type=text/css> <!-- A:link{COLOR: #3366FF;FONT-SIZE:10pt;FONT-FAMILY: 宋体};A:visited{COLOR: #3366FF;FONT-SIZE:10pt;FONT-FAMILY:宋体};A:active{COLOR: #FF0000 ;FONT-SIZE:12pt;FONT-FAMILY: 宋体};A:hover{COLOR: #FFFFCC};body{COLOR:#3A5FCD;FONT-SIZE:10pt; FONT-WEIGHT:normal;FONT-FAMILY:宋体} --></style>

    A:link是链接的部分
    A:visited是已经链接过的链接部分
    A:active是被激活的链接部分
    A:hover是鼠标放上去时的显示
    body是正文部分的更改。


    FONT-SIZE 是字号大小的设置
    FONT-FAMILY: 字体名称
    FONT-WEIGHT: bolder 是加粗显示,能够替换的是normal,cite,等等默认的是normal使用这个能够让连接产生button形式动画效果


    -----------------------------------------------------------------------------------------


    加一些有用技巧

    ◆技巧1:非常多朋友都加了背景音乐。假设打开的页面多了就混在一块了。这是仅仅要按一下ESC键,音乐就停止了

    ◆技巧2:涂鸦板里加的代码多了。改动时就难了,加条凝视吧,格式例如以下: <!--凝视内容-->

    ◆在贴子里加链接:打开记事本输入<meta content="0; URL=’目标页面地址’"> 保存为.html形式,然后通过附件上传就能够了;content后面的參数表示几秒种自己主动跳转,这里当然设为0了假设在两头加上<html> </html>就能够把.html后缀删掉了

    ◆写给有一定网页基础的朋友:通过上面连接的样例不难想到,事实上我们全然打破校内网的种种限制自己设计网页,然后上传,仅仅要不大于1M就OK了,1M并不小,设计时全部用到的素材都单个传到校内上,然后作个首页组织起来即可了,就相当校内给我们提供了无限的空间,并且速度不慢,有兴趣的朋友能够试一下

    ◆查看别人涂鸦板里的代码,进入页面右击鼠标,选折查看原代码按CTRL+F输入"涂鸦板"查找就能够定位到涂鸦板的位置了,此法仅供学习之用,一定不要原盘COPY别人的成果

    ◆建立自己的专署留言板,到过我页面的朋友看到了吧,通过链接能够打开专门的页面留言,而原来的则隐藏了,制作例如以下:

    1:用上面的群栏和留言类设置为滚动。参数了。零高度

    2:建立链接,地址http://www.xiaonei.com/GetLeavewordList.do?

    id=等号后面用自己的页码(进入他们的页面是最后的几个数字)

  • 相关阅读:
    ubuntu 安装 redis desktop manager
    ubuntu 升级内核
    Ubuntu 内核升级,导致无法正常启动
    spring mvc 上传文件,但是接收到文件后发现文件变大,且文件打不开(multipartfile)
    angular5 open modal
    POJ 1426 Find the Multiple(二维DP)
    POJ 3093 Margritas
    POJ 3260 The Fewest Coins
    POJ 1837 Balance(二维DP)
    POJ 1337 A Lazy Worker
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4560469.html
Copyright © 2011-2022 走看看