1.图片外链
这是一个非常重要的步骤，尼奥免费提供的背景图实在是各种无力吐槽……
因此想要做出充满个性的商店HTML就要选好图片的外链地址
在这方面咱用的是flickr（不提供链接，详细请百度）
把自己的图上传完成后
查看图片并从新标签页中打开即可获取图片的url

2.HTML模版
在这里为大家提供一个完整的商店HTML
请大家先把代码复制到商店描述中
<style>body, #ban {background: url
("地址1");background-attachment: fixed;}
#header {background: url("地址2") no-repeat;height: 580px;border: none;}
#main {width: 996px;background: url("地址3");background-position: top left;border: 0px;padding-top: 0px;}
#nst {padding-right: 40px;}
#template_nav, #nst {padding-top: 284px;}
.user {padding-top: 2px;padding-right: 20px;}
.sidebar {background: none;padding-left: 45px;}
.sidebarHeader a img {height: 13px;width: 13px;}
.sidebarModule, #ban {border: none;}
.sidebarHeader {background: #FFFFFF;}
.contentModuleTable {width: 100px;}
ul.dropdown {color: #FFFFFF;border: 1px solid #BDB76B;background: #FFFFFF;}
hr {width: 0px;}
body, div, table, tr, td {font: 11px verdana;color: #FFFFFF;}
#main a, a b, .medText {color: #FFFFFF;}
#main a:hover, a b:hover {color: #FFFFFF;}
#content a b, a {color: #FFFFFF;}
#content a:hover b, a:hover {color: #FFFFFF;}
#main b, b {color: #FFFFFF;}
#footer {background:none;overflow:hidden;}
.copyright {padding-top:200px;}
#footer table {padding-top:300px;}
.footerNifty, .sf img,.copyright img {width:0px;height:0px;background:none;}
#pushdown_banner {top:-999px;height:0px;}
</style>

3.模版代码图片讲解
现在大家的商店还没有成型
不要着急，对代码进行改写就可以变成自己的HTML了
注意，该代码从<style>开始，</style>结束，中间都是对商店HTML的编译
其中链接处请直接改成图片外链

其中前三段是商店的背景
背景①：body, #ban {background: url("链接");background-attachment: fixed;}
这个是商店背后的底色，本人建议用花纹一类的小图案进行平铺
就像铺瓷砖和地板一样
这样可以衬托接下来的物品背景
提供链接一个：sunnyneo.com/shoplayouts.php
大家可以从这些模版中抽取底色（代码中第一个图片链接），用于自己的HTML
不想看本教程也可以从这些成品中选取中意的复制代码到商店描述
背景②：#header {background: url("链接") no-repeat;height: 580px;border: none;}
这个链接是商店顶部的标题栏图片
插入图片的同时请调整height的宽度数值以适应排版
建议选择1280×720的大图片
背景③：#main {width: 996px;background: url("链接");background-position: top left;border: 0px;padding-top: 0px;}
这个链接是商店物品的背景
本人认为用纯色效果更好一点，如果太花顾客就看不到商品了:(

4.模版代码字符讲解
对颜色代码的调整，将会设置出不同的网页字符颜色
（例如：将#000000改成#FFFFFF，文字颜色就会由黑变白）
这里是各颜色代码：admin5.com/html/html_tutorials/050_html_color_ref.html

接下来是各段代码的字符修改处：

侧边宠物姓名栏背景
.sidebarHeader {background: 颜色代码;}
上层下拉菜单颜色
ul.dropdown {color: #FFFFFF;
border: 1px solid (边框)颜色代码;
background: （背景）颜色代码;}
下列字符：(由 所拥有) 、点击 、举报商店、存货：x 价格： xxxxx NP
body, div, table, tr, td {font: 11px verdana;color: 颜色代码;}
快捷菜单分割线与上层下拉菜单文字颜色
#main a, a b, .medText {color: 颜色代码;}
上层下拉菜单文字超链接颜色
#main a:hover, a b:hover {color: 颜色代码;}
下列字符：宠物名、个性化设置、尼奥好友、快捷菜单文字
#content a b, a {color: 颜色代码;}
这些字符的超链接颜色
#content a:hover b, a:hover {color: 颜色代码;}
宠物属性、店铺名、店主留言、物品名
#main b, b {color: 颜色代码;}

@银雪Laura 提问： 其实sunnyneo有很多现成的模版啊？
答：所以教程中顺带提供了sunnyneo的模版地址，不想按照此教程进行设置的玩家
请直接戳进sunnyneo复制自己中意的HTML代码即可
PS：HTML还是要自己设置才有意思啊XD

忘了发自己的完成品了Orz——————
以下是自家商店效果图：

谢谢教程，一直懒得去弄这个，都是直接复制来用的（） 哪天也自己弄个看

多谢楼主造福大众！我这种懒人比较喜欢复制预制好了的。但这对于了解不同的编码很有用处呢，加精了，期待用户说明和宠物说明的解说

一直想学，谢谢！！！！！！！！！！

多谢w.

很漂亮~
不过我网速慢，进商店的时候很喜欢越简洁越好。。。别拍我

喜欢越简洁越好要不然喂卡多题的时候会跪OTZ
等查找和主页

大爱^ω^

刚才试了一下，为什么我插入的图片总是显示不出来？