本文通过具体的代码示例展示了如何使用HTML与CSS实现个性化的博客页面布局与样式设计，包括图片定位、背景设置及鼠标光标定制等效果。
<DIV style="RIGHT: 900px; POSITION: absolute; TOP: 0px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 300px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 600px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 0px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 300px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 600px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 900px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 1200px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 1500px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 900px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 1200px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 1500px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 1800px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 2100px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 2400px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 900px; POSITION: absolute; TOP: 2700px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 1800px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 2100px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 2400px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> <DIV style="RIGHT: 40px; POSITION: absolute; TOP: 2700px" align=right><IMG src="http://img.xiaonei.com/photos/20060923/1620/orig63571.gif" align=LEFT></DIV><!--蝴蝶--> 
<style="LEFT:00px; POSITION: absolute; TOP: 1600px" align=left>...<img src="http://eed.xmu.edu.cn/myfile/zidou2/dongtai/3.gif"/> 
<style type="text/css"><!--#homepage{...}{background-color : #000000;background-image : url(http://fm061.img.xiaonei.com/tribe/20070430/2100/A8030547MG.jpg);background-repeat : repeat;background-attachment : scroll;color : #00ffff;cursor : url);}#header{...}{display : block;}#logo{...}{display : none;}#(http://eed.xmu.edu.cn/myfile/zidou/ani/2.curtagline{...}{display : none;}#utility{...}{display : none;}#navigation{...}{display : block;}#sidebar{...}{display : block;float : right;}#mymenu{...}{display : block;}#userRelations{...}{display : block;float : right;}#userUpdates{...}{float : left;}#userInfo{...}{display : block;}#userPicture{...}{display : block;}#userActions{...}{display : block;}#userVisitor{...}{display : block;}#userFriend{...}{display : block;}#userFriendUniv{...}{display : block;}#userProfile{...}{display : block;}#AccountInfo{...}{display : block;}#BasicInfo{...}{display : block;}#ContactInfo{...}{display : block;}#PersonalInfo{...}{display : block;}#userEvent{...}{display : block;}#userBlog{...}{display : block;}#userPandora{...}{display : block;}#userTalk{...}{display : block;}#homepage a:link{...}{color : #336699}#sidebar .block{...}{display : none;}--></style><link rel=stylesheet href="http://img.xiaonei.com/photos/20060816/0940/orig14509.css" type="text/css" type="text/css"><!--页面透明--> </div></div> <style type=text/css>... <!--#permalink,#snav,#footer{...}{display:none;}--></style><!－除底部链接－> </marquee> <embed style="FILTER: alpha(opacity=100,style=3) gray(); width: 400px; height: 29px" name=MediaPlayer1 pluginspage=http://www.microsoft.com/Windows/MediaPlayer src=http://fm051.img.xiaonei.com/tribe/20070420/1515/A3573467ME.mp3 width=50 height=13 type=application/x-mplayer2 autostart="0" showcontrols="1" loop="1" volume="50"></embed> <link rel=stylesheet href="http://img.xiaonei.com/photos/20060816/0940/orig14509.css" type="text/css" type="text/css"><!--页面透明--> <style type=text/css>...<!-- #userProfile .stat{...}{BACKGROUND:url(http://source.xiaonei.com/blog/20070301/2020/418614/orig5647833.gif) no-repeat left top;padding-left:110px;}#star1,#userProfile .rank{...}{float:right;display:none;} 
--></style><!--用户等级（星星加9颗）--> <body style="cursor: url('http://eed.xmu.edu.cn/myfile/zidou/ani/10.cur')"> <img src="http://eed.xmu.edu.cn/myfile/zidou1/guajian/33.gif"/> <divstyle="float:left;clear:both;position:relative;Top:0px;left:20px;width:450x;height:29px;"><STYLE>...body {...}{background:url("http://fm061.img.xiaonei.com/tribe/20070430/2100/A8030547MG.jpg") repeat fixed!important;}</STYLE> <style>...a img {...}{filter:alpha(opacity=100,style=2);}a:hover img {...}{filter:none;/**//*隐约头像*/}</style> 
<style type=text/css>...a:hover img {...}{filter:FlipH();}</style><!-翻转头像-> <marquee scrollAmount=10 table <table style="FILTER: glow(color:#d86cfc,direction=2)"><p style="FONT-SIZE:30pt;top:450pt;COLOR: #d86cfc; FONT-FAMILY: 宋体_GB2312"><width=150><a style=color:#00BFFF>★★前世五百次的回眸，才换来今世你我的一次擦肩而过★★</a></marquee> <embed src=http://play8.tom.com/uploadfile/song/200701/31/1170247613_235017.mp3type=application/x-mplayer2 autostart="1" showcontrols="0" loop="true" ></embed> <!—留言版背景图—><style type="text/css">...<!--#userTalk{...}{background-color : #A52A2A;background-image : url(http://fm022.img.xiaonei.com/tribe/20070328/1140/A3437549FA.jpg);color : #CD6090;}#homepage a:link{...}{color : #ffffff;}#sidebar .block{...}{display : none;}--></style> 
扫一扫
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
