个人主页设计代码（个人网页设计背景图片-html网页制作中如何设置背景图片（如何引用））

本文目录

• 个人网页设计背景图片-html网页制作中如何设置背景图片（如何引用）
• QQ个人主页代码是什么啊
• 谁能给个简单网页的代码（个人主页或者博客）和HTML基本常用代码
• 如何去设计一个自适应的网页设计或HTMl5
• 简单的html个人主页源代码

个人网页设计背景图片-html网页制作中如何设置背景图片（如何引用）

如何给个人网页设置背景图片啊?

背景图片代码

方法一:

文章的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了

也可以用代码:

《TABLEheight=600width=600background=你的背景图片地址border=0》

《TBODY》

《TR》

《TD》你的主体内容《/TD》《/TR》《/TBODY》《/TABLE》

方法二:

《bodybackground=你的背景图片地址》

方法三:

《STYLEtype=text/css》《!--body{background-image:url(你的背景图片地址);background-repeat:no-repeat;background-attachment:fixed;background-position:50%50%}--》《/STYLE》

方法四:

背景图是在HTML模式下把以下代码加到已有代码最前面:

《bodybackground="图片地址"》

注:图片地址必须是网络上已有的图片,不是本地机的,如果要链接本地机的,必先在相册或者其他文章上传之后才可以调用。

方法五:

《STYLETYPE="text/css"》

《!--

BODY{background-image:URL(图片名称.gif);

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;}

--》

《/STYLE》

网页背景全攻略

网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。

1.颜色背景

颜色背景的设计是最为简单的,但同时也是最为常用和最为重要的,因为相对于图片背景来说,它有无与伦比的显示速度上的优势。在网页文件中,一般通过标签来指定页面的颜色背景,其HTML语法为:

其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。

颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

2.沙纹背景

沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。

初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不仅仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。

读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下:

其中的"picture"表示背景图片的URL路径。

3.条状背景

条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。

以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过

将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

4.照片背景

把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的CSS。在网页文件的之间加入下面的CSS语句:

这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。

5.复合背景

如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!

6.局部背景

前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。

最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子:

在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。

除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子:

不仅仅是页面的背景

记得毛主席有这么一首诗:"坐地日行八万里,巡于遥看一千河。"伟人就是了不起,几万里就出去了。

在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。

有关背景图片

方法一:文章的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了

也可以用代码:

《TABLEheight=600width=600background=你的背景图片地址border=0》

《TBODY》

《TR》

《TD》你的主体内容《/TD》《/TR》《/TBODY》《/TABLE》

方法二:

《bodybackground=你的背景图片地址》

图片链接

《Ahref="你要链接的地址"target=_blank》《IMGheight=31alt=你的文字介绍src="你的图片(或logo地址)"width=88border=0》《/A》

高和宽在上边的height和width那里设置

1、首先打开Atom器导入项目文件夹,先创建一个的文件。定义一下html文件的主信息:

2、然后填写自己的网页内容,_柚靡幌卵,直接在body后面加上background="图片名字"即可插入图片:

3、最后来到浏览器,刷新一下网页,这样就会显示背景了:

要把图像放入背景,需要使用background-image属性。background-image属性的默认值是none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个URL值:

body{background-image:url(/i/eg_bg_);}

大多数背景都应用到body元素,不过并不仅限于此。

下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:

p.flower{background-image:url(/i/eg_bg_);}

您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:

a.radio{background-image:url(/i/eg_bg_);}

理论上讲,甚至可以向textareas和select等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。

另外还要补充一点,background-image也不能继承。事实上,所有背景属性都不能继承。

背景重复

如果需要在页面上对背景图像进行平铺,可以使用background-repeat属性。

属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺。

默认地,背景图像将从一个元素的左上角开始。请看下面的例子:

body

{

background-image:url(/i/eg_bg_);

background-repeat:repeat-y;

}

QQ个人主页代码是什么啊

你指的是什么代码啊？我手头有一些，给你看看，我主页还有很多，你可以参考一下，我QQ号是49214396
虽然腾讯封掉了onload，但是用javascript基本上可以代替onload的功能，所以发现了新代码，一样可以用皮肤，用挂件，。。（气死腾讯）但是可能也会马上被封掉的，因为腾讯老总只想着赚钱，它怎么可能我们免费玩空间呢？我用“它”大家应该知道意思了，鄙视腾讯。。下面介绍新代码了。。
背景皮肤
《img src="javascript:document.getElementById(’Mlogo’).style.background=’url(顶部一条图片的地址)’;document.getElementById(’all’).style.background=’url(背景图片的地址)’;"》
如果你不想改顶部图片条的话只要这样就够了：
《img src="javascript:document.getElementById(’all’).style.background=’url(背景图片的地址)’;"》
例如：
《img src="javascript:document.getElementById(’Mlogo’).style.background=’url(顶部图片的地址)’;document.getElementById(’all’).style.background=’url(背景图片地址)’;"》
（注：一定要将地址中的"pre"改为"orig")
鼠标点击后更改大背景的代码：
《span onclick="document.getElementById(’all’).style.background=’url(图片地址)’;"》显示文字《/span》
鼠标点击后更改顶部条内背景的代码：
《span onclick="document.getElementById(’MLOGO’).style.background=’url(图片地址)’;"》显示文字《/span》
顶部图片条透明度：
《img src="javascript:Mlogo.style.filter=’alpha(opacity=30)’;"》
把30用0-100中喜欢的不透明度代替。100为不透明，0为完全看不见的透明
鼠标图片
方法与改背景图片相似：
《img src="javascript:document.body.style.cursor=’url(\’鼠标图片的地址，可以是.ANI或.CUR文件\’)’"》
图片无边框代码
《div id="layer25" style="padding:0px; LEFT: 2px; OVERFLOW: hidden; WIDTH: 634px; POSITION: absolute; TOP: 0px; HEIGHT: 530px; zindex: 90" resiziable="true"》 《/textarea》《IMG src="图片地址" border="0" width="图片的宽" height="图片的高"》
FLASH无边框代码
***隐藏网址***
透明FLASH无边框代码
《div id="layer25" style="padding:0px; LEFT: 2px; OVERFLOW: hidden; WIDTH: 634px; POSITION: absolute; TOP: 0px; HEIGHT: 530px; zindex: 90" resiziable="true"》 《/textarea》《EMBED src="FLASH地址" quality=high wmode="transparent" WIDTH="宽" HEIGHT="高" TYPE="application/x-shockwave-flash"》《/div》
图片像幻灯片一样变换的代码
《script language="javascript"》 var adImg = new Array(); var adLink = new Array(); var cID = 0; adImg); }《/script》 《a onMouseOver="javascript:ShowLink();return document.returnValue;" href="javascript:Go2Url();"》
《img name="imgAD" style="FILTER: revealTrans(duration=2,transition=20);BORDER-RIGHT:#cccccc 1px solid; BORDER-TOP:#cccccc 1px solid; BORDER-LEFT:#cccccc 1px solid; BORDER-BOTTOM:#cccccc 1px solid" src="javascript:NextAd()" border="0" width="361" height="213" hspace="0"》
计数器无边框代码
《div id="layer25" style="padding:0px; LEFT: 2px; OVERFLOW: hidden; WIDTH: 634px; POSITION: absolute; TOP: 0px; HEIGHT: 530px; zindex: 90" resiziable="true"》《/textarea》 您是第 《img border="0" src="计数器地址" alt="Web Counters"》 位访客。欢迎您的到来！！《/div》
改导航的代码
《img src="javascript:bt_1.innerText=’零下主页’;bt_2.innerText=’零下日志’;bt_3.innerText=’零下音乐’;bt_4.innerText=’留言板’;bt_5.innerText=’相 册’;bt_6.innerText=’迷你屋’;bt_7.innerText=’个人档’;bt_8.innerText=’互 动’;"》
另一种框内改导行的代码
《table width="100%" id="table5"》《tr》《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(1); width=12.5%》主 页《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(2); width=12.5%》日 志《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(3); width=12.5%》音乐盒《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(4); width=12.5%》留言板《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(5); width=12.5%》相 册《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(6); width=12.5%》迷你屋《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(7); width=12.5%》个人档《/td》
《td align=center onmouseover=this.style.cursor=’hand’; onClick=guideButton(8); width=12.5%》互 动《/td》《/tr》《/table》
注：目前腾讯只封了 iframe onload html这三个字符，所以我空间内不含这三个字符的代码都可以正常使用。

谁能给个简单网页的代码（个人主页或者博客）和HTML基本常用代码

自己总结的基本语法。你所要的网页代码太多，写不下，网页的简单与否跟代码多少没关系 文件格式《html》《/html》(文件的开头与结尾) 主题《title》《/title》(放在文件的开头) 文头区段《head》《/head》(描述文件的信息) 内文区段《body》《/body》(放此文件的内容) 标题《h?》《/h》(?=1~6,改变标题字的大小) 标题对齐《h align=right,left,center》《/h》 字加大《big》《/big》 字变小《small》《/small》 粗体字《b》《/b》 斜体字《i》《/i》 底线字《u》《/u》 上标字《sup》《/sup》 下标字《sub》《/sub》 文字对中《center》《/center》 基本字体大小《basefont size》(取值范围从1到7，默认值为3) 改变字体大小《font size=?》《/font》(?=1~7) 字体颜色《font color=#rrggbb》《/font》(RGB色码) 指定字型《font face=?》《/font》(?=宋体，楷体等) 、超链结 网址链结《a href="URL"》《/a》 设定锚点《a name="?"》《/a》(?以容易记为原则) 链结到锚点《a href="#?"》《/a》(同一份文件) 《a href="URL#?"》《/A》(锚点不同文件) 显示图形《img src="URL"》《/a》 图形位置《img src="URL" align=top,bottom,middle,left,right》(分别为上、下、中、左、右的位置) 图形取代文字《img src="URL"alt=?》(无法显示图形时用) 图形尺寸《img src="URL" width=? height=?》(?以像素为单位) 连结图形边线《img src="URL"border=?》(?以像素为单位) 图形四周留白《img src="URL"hspace=? vspace=?》(?以像素为单位) 区段划分 段落《p》《/p》 断行《br》《/br》 横线《hr》 横线厚度《hr size=?》(?以像素为单位) 横线长度《hr width=?》(?以像素为单位) 横线长度《hr width=?%》(?与页宽相比较) 实横线《hr noshade》(无立体效果) 、背景颜色 背景图案《body background=图形文件名》(图形文件格式为gif和jpg) 背景颜色《body bgcolor=#rrggbb》(RGB色码) 背景文字颜色《body text=#rrggbb》(RGB色码) 未链结点颜色《body link=#rrggbb》(RGB色码) 已链结点颜色《body vlink=#rrggbb》(RGB色码) 正在链结点颜色《body alink=#rrggbb(RGB色码)

如何去设计一个自适应的网页设计或HTMl5

如今移动互联网随着3G的普及，越来越火爆，更多需求跟随而来！APP应用市场和APP应用数量成倍成倍的增长！从而给移动互联网带来新的挑战！
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、了解什么是”自适应网页设计”
自从2010年，Ethan Marcotte提出了 “自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个 范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个 测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、需要允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行 viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。
三、在进行设计的时候不能使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）或瀑布流
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择性加载CSS
“自适应网页设计”的核心，就是CSS3引入的 Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”) screen and (max-device-width: 400px);
七、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的 自动缩放。
这只要一行CSS代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的 专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的 imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementByIdx_x(“content”).getElementsByTagName_r(“img”);
imgSizer.collate(imgs);
});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有 很多方法可以做到这一条，服务器端和客户端都可以实现。
只要遵循这8条设计准则，我相信你们可以很快的设计出自适应的网页出来

简单的html个人主页源代码

个人html主页站点所提供的多半是纯文字或图片等静态信息，而就站点的性质来说，则以教学或特定主题(如历史、古典文学、电玩、旅游记录等)的站台为多数。

你可以通过千站素材下载html网页源码，制作你的"个人主页"，用于展示你自己的个性，将自己喜欢的东西放在"个人主页"上，让大家都可以来欣赏。