很高兴给大家写个实用涂鸦制作教程
先了解下校内主页基本布局
<body id="profilePage">
<div id="container">
<div id="header"></div>
<div id="sidebar"></div>
<div id="widebar">
<div id="content">
<div id="userRelations"></div>
<div id="userStatus"></div>
</div>
<div id="footer"></div>
</div>
</body>
其中 #head代表的是头部 其它如下
#widebar 两边部分
#content 内容部分
#footer 底部
#userRelations 左栏(头像那一列)
#userUpdates 右栏(账号信息那一列)
给个模块加背景图片的代码是 #名称{background:(图片URL地址)属性;}
如:#header{width:980px;height:317px;background:url
(http://fm501.img.xiaonei.com/tribe/20080524/11/55/A134175887183MEL.jpg) no-repeat top
center;} （大家把此段代码保存到涂鸦框里 看看实际的效果）
代表给头部加一张宽是980象素 高是317象素的图片 其中no-repeat代表图片不要平铺 还有repeat是背
景图像在纵向和横向上都平铺，repeat-x是水平平铺,repeat-y是垂直平铺. （大家可以把no-repeat替
换成其它repeat属性 看看实际效果 加深理解！）
其它各模块
1.大背景：
body{background:url(背景填充图地址)属性;}
body{color:#000000;/* 字体颜色*/font-size:9pt;/* 字体大小
*/margin:0px;padding:0px;background-color:#000000;/* 背景颜色*/}
body{cursor:url(http://www.xiaoyudeyu.cn/shubiao/1.cur);}/* 鼠标样式*/
（单独把上面这段预览试试效果）发现大背景变黑色了吧 而且还多个鼠标！
2.头部：
#header{background:url(背景填充图地址)属性;}
如
#header{width:980px;height:284px;background:url
(http://fm491.img.xiaonei.com/tribe/20080523/19/35/A251217016837PEP.jpg) no-repeat top
center;} （大家把此段代码保存下 看看实际的效果吧） 是不是多了个漂亮的头部啊 呵呵
3.边部：
#widebar{background:url(背景填充图地址)属性;}
如 #widebar{background:url
(http://fm491.img.xiaonei.com/tribe/20080523/19/38/A272219636300GAR.jpg) repeat-y
center;width:980px;margin:0px auto;}（保存试试吧）大跌眼镜 首页很乱吧 那时因为其它元素还没
协调下 你看边部已经出来了哦 一口气看这么多 先休息下吧 
把本站添加到你的QQ书签把 ,不费您什么事，就收藏一下吧!
下面继续
1.留言板背景：
* textarea{background:url(背景填充图地址)属性;}
#userActions li a:hover{color:#000000;}
.more a,.author a,.boxcont a,.edit a{color:#000000;}
* html .inputbutton,* html .subbutton,* html .inputsubmit{padding:0 5px;border:1px solid
#000000;background-color:#EAE5C8;color:#000000;}
* textarea{padding:0 5px; border:1px dashed #503524; width:450px;height:90px;
background:#eeeeee; color:#000000; background-image: url
(http://fm531.img.xiaonei.com/tribe/20080523/19/42/A293096683042HEI.jpg);}
http://fm531.img.xiaonei.com/tribe/20080523/19/42/A293096683042HEI.jpg这张图片就是留言板的
背景图片
3.底部背景：
#footer{background:url(背景填充图地址)属性;}
#footer{width:980px;background:url
(http://fm501.img.xiaonei.com/tribe/20080523/19/40/A283628058941OXC.jpg) no-repeat top
center;height:129px;border:0px;} 试试吧 多了张底部图片
上面的代码完整的地址是很高兴给大家写个简单涂鸦美化教程
先了解下校内网CSS粗略布局结构
<body id="profilePage">
<div id="container">
<div id="header"></div>
<div id="sidebar"></div>
<div id="widebar">
<div id="content">
<div id="userRelations"></div>
<div id="userStatus"></div>
</div>
<div id="footer"></div>
</div>
</body>
其中 #head代表的是头部 其它如下
#widebar 两边部分
#content 内容部分
#footer 底部
#userRelations 左栏(头像那一列)
#userUpdates 右栏(账号信息那一列)
给个模块加背景图片的代码是 #名称{background:(图片URL地址)属性;}
如:#header{width:980px;height:317px;background:url
(http://fm501.img.xiaonei.com/tribe/20080524/11/55/A134175887183MEL.jpg) no-repeat top
center;} （大家把此段代码保存到涂鸦板里 看看实际的效果）
代表给头部加一张宽是980象素 高是317象素的图片 其中no-repeat代表图片不要平铺 还有repeat是背
景图像在纵向和横向上都平铺，repeat-x是水平平铺,repeat-y是垂直平铺. （大家可以把no-repeat替
换成其它repeat属性 看看实际效果 加深理解！）
其它各模块
1.大背景：
body{background:url(背景填充图地址)属性;}
body{color:#000000;/* 字体颜色*/font-size:9pt;/* 字体大小
*/margin:0px;padding:0px;background-color:#000000;/* 背景颜色*/}
body{cursor:url(http://www.xiaoyudeyu.cn/shubiao/1.cur);}/* 鼠标样式*/
（单独把上面这段保存至涂鸦板试试效果）发现大背景变黑色了吧 而且还多个鼠标！
2.头部：
#header{background:url(背景填充图地址)属性;}
如
#header{width:980px;height:284px;background:url
(http://fm491.img.xiaonei.com/tribe/20080523/19/35/A251217016837PEP.jpg) no-repeat top
center;} （大家把此段代码保存到涂鸦板里 看看实际的效果吧） 是不是多了个漂亮的头部啊 呵呵
3.边部：
#widebar{background:url(背景填充图地址)属性;}
如 #widebar{background:url
(http://fm491.img.xiaonei.com/tribe/20080523/19/38/A272219636300GAR.jpg) repeat-y
center;width:980px;margin:0px auto;}（保存试试吧）大跌眼镜 首页很乱吧 那时因为其它元素还没
协调下 你看边部已经出来了哦 一口气看这么多 先休息下吧
把本站添加到你的QQ书签把 ,不费您什么事，就收藏一下吧!
下面继续
1.留言板背景：
* textarea{background:url(背景填充图地址)属性;}
#userActions li a:hover{color:#000000;}
.more a,.author a,.boxcont a,.edit a{color:#000000;}
* html .inputbutton,* html .subbutton,* html .inputsubmit{padding:0 5px;border:1px solid
#000000;background-color:#EAE5C8;color:#000000;}
* textarea{padding:0 5px; border:1px dashed #503524; width:450px;height:90px;
background:#eeeeee; color:#000000; background-image: url
(http://fm531.img.xiaonei.com/tribe/20080523/19/42/A293096683042HEI.jpg);}
http://fm531.img.xiaonei.com/tribe/20080523/19/42/A293096683042HEI.jpg这张图片就是留言板的
背景图片
3.底部背景：
#footer{background:url(背景填充图地址)属性;}
#footer{width:980px;background:url
(http://fm501.img.xiaonei.com/tribe/20080523/19/40/A283628058941OXC.jpg) no-repeat top
center;height:129px;border:0px;} 试试吧 多了张底部图片
上面的代码完整的地址是http://xiaoyudeyu.cn/article.asp?id=1057 大家预览下吧！
上面这些元素还不能完整打造一张个人页面 但是相信大家拿到成品代码会知道怎么修改了 制作完整
的页面还需学会其它元素的属性 我们也会给更多的原创涂鸦板文章发布在 www.xiaoyudeyu.cn 站点
希望大家多多努力哦 88啦！
大家预览下吧！
上面这些元素还不能完整打造一张个人页面 但是相信大家拿到成品代码会知道怎么修改了 制作完整
的页面还需学会其它元素的属性 我们也会给更多的原创文章发布在 www.xiaoyudeyu.cn 站点
希望大家多多努力哦 88啦！
©2008 涂鸦乐 | xhtml | CSS | sitemaps | 代码帮助 | 网站地图 |
备案序号:湘ICP备08002074号