摘要：
　　你还在因“淘宝基础版详情页导航背景无法全屏”而苦恼吗？那还不快来看此教程！小手一动，导航成功全屏！若不会操作可使用软件一键生成，若软件不会操作可观看教程视频.....

(注：文章最后修正日期：2016-04-09号 13:12)

今天继续给看官带来福利！困扰我们良久的“淘宝基础版详情页导航背景无法全屏”问题终于得已解决，更重要的是：当头部存在“店铺招牌”时也表现的很完美，如图：(注：淘宝专业版用户以及天猫用户可以不用往下看了，如果你想扩充知识，可以继续往下看。)

在讲解决方法前我们先来谈谈为什么只有基础版存在这个问题。

一、基础版无法全屏的原因

在装修后台，我们可以看到这样两句提醒的文字，如图：图中圈中的那句正是重点！由于基础版是不支持背景设置，我们通用使用的方法是：body替代法。即：把背景图片添加给body上，然后通过css sprite技术进行定位即可。但是在详情页，body背景被强制转换成了background:#fff!important;，如图： 正因此，传统的写法在详情页已经被扼杀了......

可能会有看官发问了：页头的id不是#hd么，你给#hd写背景不就完了。如图： 艺灵只想说：too young too simple 。难道你忘记了在淘宝服务里面会有一个叫做“旺铺CSS”2400/年的东东？！

有看官又要说了，你丫直接升级成专业版不就得了。(咳咳，一钻以上的专业版是50/月，对于我们这些没有流量的小店来说，伤不起啊！)

下面进入正题。虽然我们没有开通旺铺css，写不了css(会破解者可无视)，但系统导航我们是可以用css进行控制的，于是，解决的方法就出来了。

二、应对方法及源码

我们可以把全屏背景作用到主导航的父级.skin-box-bd上面，代码如下：

导航背景作用到父级上

/*导航背景作用到父级上*/
div.skin-box-bd{height:150px;line-height:150px;background:#A93333 url(导航背景图) repeat-x 50% 1px;}/*注：#A93333为背景色，可根据自己店铺的风格进行修改*/

但是这样不行啊，因为这个父级的宽度默认是950，所以我们要继续修改，新增代码如下：

新增全屏代码

/*新增全屏代码*/
div.skin-box-bd{position:relative;left:-475px;width:1920px;}

这个时候又有问题了，如果店铺中的“店铺招牌”存在时，此时背景需要向上移才会显示。(注：导航最大高度为150，超过自动隐藏。)假设“店铺招牌”的高度为h，此时我们再修改上面的全屏代码：

新增top值

/*新增top值*/
div.skin-box-bd{top:-hpx;}

下面我们来看下店铺中的实际效果，如图：

怎么样，是不是已经实现了全屏背景了，但是会有两个问题。
问题一：“店铺招牌”去哪儿了？
问题二：导航有点偏移啊。

下面来解决问题一，由于我们下面的系统导航添加了全屏样式，而我们的“店铺招牌”没有设置z-index，所以我们只需要添加对应代码即可。最终的店铺招牌源码如下：

修改店铺招牌html源码

<!--修改店铺招牌html源码-->
<div style="position:relative;z-index:10" data-title="已实现淘宝基础版详情页全屏导航" data-source="教程来自：www.yilingsj.com/code">
　<!--开始位置-->
　原来的【店铺招牌】内容放这里
　<!--结束位置-->
</div>

此时我们的店铺招牌已经成功显示了，如图：

下面再对原系统导航进行处理，隐藏或者是偏移位置都是可以的。

调整系统导航位置

/*调整系统导航位置*/
/*方案一：隐藏法*/
div.skin-box-bd .all-cats,div.skin-box-bd .menu-list{  display: none;}
/*方案二：左填充偏移法*/
div.skin-box-bd{padding-left: 485px;}
/*方案三：上填充偏移法*/
div.skin-box-bd{padding-top: 150px;}

好了，到此就结束了，最后附上“艺灵设计”淘宝店铺的完整源码：

实现淘宝基础版详情页全屏导航的完整源码

<!--实现淘宝基础版详情页全屏导航的完整源码-->
<!--修改店铺招牌html源码-->
<div style="position:relative;z-index:10" data-title="已实现淘宝基础版详情页全屏导航" data-source="教程来自：www.yilingsj.com/code">
　<!--开始位置-->
　原来的【店铺招牌】内容放这里
　<!--结束位置-->
</div>
<!--end 修改店铺招牌源码  将上面这段代码保存到自己店铺的“店铺招牌中”-->
/*修改系统导航css样式*/
div.skin-box-bd{position:relative;top:-150px;left:-475px;width:1920px;height:150px;line-height:150px;background:#A93333 url(http://gdp.alicdn.com/imgextra/i3/759415648/TB2AvkrbXXXXXcSXXXXXXXXXXXX_!!759415648.png) repeat-x 50% 1px;padding-left: 485px;}
/*end   修改系统导航css样式  将css样式保存到系统导航中*/

对于理解能力有限的部分看官来讲，不管是看代码还是看文字，那都是一种折磨！！！
店铺招牌操作教程图： 
css安装教程图：

至于软件的话，近期会做好放到网站上。

三、软件 2015-05-24号 11:40更新

软件已更新，新增了此功能，不会写代码的看官来使用下吧！
软件地址：点此进入

四、视频教程

title:基础版详情页导航全屏(背景)

如果您想全屏观看，复制地址：http://cloud.video.taobao.com/play/u/759415648/p/1/e/1/t/1/28100422.swf到地址栏即可。

五、最新软件 2016-04-09号 13:12更新

上个月，艺灵制作了几款新的工具，已经可以让基础版店铺完全实现专业版拥有的部分功能了。页头页面背景上传工具也做好了，详情移步： 淘宝基础版店铺自由编辑页头页面工具

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-05-23/270.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。