如何通过div+CSS进行网店装修 悬浮旺旺的设计技巧

    div+CSS进行网店装修是网店diy的常用手法之一，使用div+CSS进行图文混排的好处是：使代码量比使用表格实现的图文混排更少，便于一淘搜索引擎和其它搜索引擎顺利收录宝贝描述的内容，对后期修改宝贝描述、进行SEO优化都有很在大的好处。

 

    在进行混排之前需要用大部分卖家都会选用的图像加工软件Adobe Photoshop对图片进行处理，将需要进行混排的图片导出为JPG格式，便于混排时候的编辑。如果卖家有别的工具能够将需要处理的图像生成JPG格式，也可以选用其他工具。
第一步：使用PS的切片工具对需要导出的图形进行切片。
第二步：正式导出之前，点击图层前的小眼图标，取消选中，将文字层隐藏，只留下需要处理的图片层。4
第三步：使用Ctrl+shift+alt+S的快捷键，或者点击“文件?存储为web格式”打开“存储为web格式”，选中切片后导出，将图片格式设置为JPG，然后存储切片。
    在进行图文混排前，先将进行图文混排的JPG图片上传到淘宝后台的图片空间，然后再进入宝贝描述的编辑页面。
第一步：在宝贝描述中插入div 标签，并加入样式。在宝贝描述编辑框中点选第一个“源码”按钮，输入div标签。div这个标签是成对出现，且放在符号“<>”中，结尾的标签要在“<>”中加入“/”，来表示标签结束。如一对div标签，写法就是
…
(…是指div中具体的内容)。
第二步：用CSS设置div的高度和宽度为图片的宽度和高度，高度和宽度的样式放在div中格式为“style=”你的样式””，并以空格隔开。如图片像素为750px*406px，则格式为“width:750px, height:406px”，代码会变为“”。
第三步：用CSS设置div的背景为刚刚上传到空间的图片，格式为“background: (图片的地址)”。
设置完了之后，回到正常视图可以看到设置后的效果。
加入文本并定位
图片设置好后，便需要将文字排入网页。
    不过用div+CSS它也有它的不足之处，那就是在网页中的字体受消费者所用PC系统中的安装字体限制。因此建议卖家在进行宝贝描述编辑时选用大部分消费者电脑中都安装的字体，比如Windows XP的系统自带常用字体是宋体、黑体、仿宋、楷体和隶书，而Windows Vista、Windows 7和Windows 8中，系统自带常用字体多了一个微软雅黑。
    网店装修除了diy外，我们平时在装修市场看到各种各样的模板大部分都是由淘宝设计师通过SDK开发出来的，由此也有产生了很多专门开发淘宝模板的网络公司。
   一般装修碰到最多的问题就是页面两边悬挂的旺旺客服和一些图片展示效果。
    悬浮的旺旺，很多卖家看到店铺中有悬挂在两边的旺旺，都会想要，感觉这种形式很好，买家可以随时随地找到我。一般悬浮旺旺的实现有两种形式：1、升级店铺的版本到旗舰版也就是2400一年的版本，使其具有上面提到的完全自定义 的功能，升级后你可以在后台通过“模板”-“背景”-“完全自定义”添加悬浮模块的css自定义。
    这种办法的优点在于 能根据我们的自己的需求设置悬浮旺旺的样式，后期能够自己维护，缺点是技术含量比较高，操作难度系数大。
    第二种方法就是去淘宝的装修市场购买那种SDK全套的含有悬浮模块的代码，够买安装后就自动有悬浮的旺旺，优点就是操作简单，但是不能自定义化，不能根据自己的需求进行变化。
    其实店铺装修说白了就是如何能够运用好我们手头的资源通过文字+图片+效果形式布局到我们的页面上。所以在装修之前我们一定要了解清楚我们的店铺版本，要知道我们能干什么，有什么资源可以用。网店装修千万不可忽视，好的网店装修在无形中就能帮你推广网店。所以每个淘宝卖家还是多想想如何装修网店吧。
    一般这种装修话不适合大部分的卖家，需要的开发成本比较大，所以大部分的卖家会选择去装修时选购模板，但是毕竟价格摆在那里，虽然模板会有不一样的效果，但是他的弊端也会比较多，一般廉价的模板的各种浏览器的兼容性都很少考虑，开发者如果是程序对美观度没有保证的话，出来的效果也不会很好。有些模板也是不允许用户修改布局的，想想也应该可以了解，不然我们可以根据自己的需要变化出很多的样式了。