京东商城店铺装修代码
- 格式:wps
- 大小:15.50 KB
- 文档页数:4
京东店铺装修(Jshop2013版)操作帮助文档V1.0.0目录1.首页 (5)1.1必备模块 (5)1.2热门模板 (6)1.3公告 (6)1.4热门模块 (7)2.店铺装修 (8)2.1页面列表 (8)2.2店铺编辑 (9)2.3添加自定义页面 (9)2.4模块库 (10)2.5模板 (10)2.6页面装修 (10)2.6.1添加布局 (10)2.6.2删除布局 (11)2.6.3移动布局 (11)2.6.4添加模块 (12)2.6.5设置模块模板 (13)2.6.6设置模块标题 (13)2.6.7拖动模块 (14)2.6.8页面设置 (14)2.6.9页面预览 (15)2.7备份与还原 (16)2.7.1 页面备份与还原 (16)2.7.2 店铺备份与还原 (17)2.8页面布局 (19)3.活动装修 (19)3.1活动列表 (19)3.2活动添加 (19)3.3活动编辑 (21)3.3活动装修 (22)3.3.1活动上下线 (22)3.3.2删除活动 (23)4.图片管理 (23)4.1图片列表 (23)4.1.1 复制图片链接 (24)4.1.2移动图片到其它分类 (25)4.1.3 修改文件名称 (25)4.1.4删除文件 (26)4.1.5 查看 (26)4.1.6 查看链接 (26)4.2图片上传 (27)4.2.1上传图片功能 (27)4.2.3 删除及取消功能 (28)4.2.4 取消上传该图片 (28)4.3图片分类列表 (28)4.3.1添加主分类 (29)4.3.2 添加子分类 (29)4.3.3删除分类 (30)4.5图片回收站 (30)5.意见反馈 (31)6.BUG反馈 (31)1.首页1.1必备模块店铺必备模块是由jshop专门为商家店铺装修挑选的,用户可在首页查看必备模板的推荐信息。
如图:点击区域中的某模块后,进入该模块的详情页。
如图:1.2热门模板1.3公告系统公告是jshop向商家发布公告信息的地方,商家用户登陆jshop系统后,可在首页看到系统公告区域。
我写的京东页⾯代码1、index.html---主要搭建页⾯的结构2、base.css---主要写⼀些样式重置的代码/*样式重置*/body,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,textarea{margin: 0;padding: 0;}a {text-decoration: none;color: #999;}li {list-style: none;}img,input {outline: none;vertical-align: middle;border: 0;}body {font-size: 12px;font-family: "微软雅⿊";color: #999;background-color: #f6f6f6;}table {border-collapse: collapse;}/*放置⼀些公共的样式*/.clear:after {display: block;content: "";clear: both;}/*IE兼容*/.clear {zoom: 1;}.fl {float: left;}.fr {float: right;}.w {width: 1190px;margin: 0 auto;}3、head.css---主要写页⾯顶部的样式/*顶部⼴告样式开始*/.head_banner {height: 80px;background-color: #d32338;}.head_banner .w {position: relative;}.head_banner .w .close {display: block;width: 20px;height: 20px;font-size: 13px;color: rgba(255,255,255,0.3);line-height: 20px;text-align: center;background-color: rgba(0,0,0,0.3);position: absolute;top: 5px;right: 5px;}.head_banner .w .close:hover {color: rgba(255,255,255,0.8);background-color: rgba(0,0,0,0.8);}/*顶部⼴告样式结束*//*头部导航部分开始*/.head_nav {height: 30px;background-color: #e3e4e5;border-bottom: 1px #ddd solid;}.head_nav .w ul.fl li {margin-left: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li:hover{background-color: #fff;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li .iconfont {/*margin-left: 10px;*/color: #f10215;}/*.head_nav .w .fl .iconfont:hover {background-color: #fff;border: 1px #eee solid;border-bottom: none;}*/.head_nav .w ul.fr li {/*height: 10px;*/padding: 0 6px;line-height: 30px;float: left;}.head_nav .w ul.fr li a.red {color: red;}.head_nav .w ul.fr li a:hover{color: #f10215;}.head_nav .w ul.fr li .iconfont {font-size: 9px;}.head_nav .w ul.fr li.line {width: 1px;height: 10px;padding: 0; /*li设置了padding撑开,line不⽤撑开,把padding设为0*/ background-color: #cccccc;margin: 11px 6px 0 6px;}/*.head_nav .w .fr li a {font-size: 12px;color: #999;}.head_nav .w .fr a:hover {font-size: 12px;color: #f10215;}*/.head_nav .w .fr li .public {/*font-size: 9px;*/border: 1px #e3e4e5 solid;border-bottom: none;height: 29px;}.head_nav .w .fr li .public:hover {background-color: #fff;border: 1px #ccc solid;border-bottom: none;}/*⼩三⾓样式*/.head_nav .w .fr li.mobile {position: relative;}.head_nav .w .fr li.mobile:after {display: block;content: "";width: 0;height: 0;border-top: 8px transparent solid;border-right: 8px transparent solid;border-bottom: 8px #fff solid;border-left: 8px transparent solid;position: absolute;top: 18px;left: 20px;}/*⼆维码样式*/.head_nav .w .fr li.mobile i {width: 58px;height: 58px;border: 1px #ccc solid;display: block;background: url(../img/mobile_qrcode.png) no-repeat center; position: absolute;left: 0px;top: 31px;}/*头部导航部分结束*//*头部搜索区域开始*/.head_search {height: 140px;}.head_search .w {position: relative;}.head_search .w .logo {float: left;position: absolute;top: -30px;/*margin-top: -30px;*/box-shadow: 0px 0px 10px #ccc;}.head_search .w .search {width: 548px;height: 33px;float: left;margin-top: 25px;margin-left: 320px;border: 1px #f10215 solid;position: relative;}.head_search .w .search .text {width: 498px;height: 33px;float: left;text-indent: 4px; /*input框⾥的字体缩进*/ }.head_search .w .search .btn {width: 50px;height: 33px;background-color: #f10215;float: left;}.head_search .w .search .iconfont {position: absolute;top: 7px;right: 13px;color: #fff;font-size: 20px;}.head_search .w .shopcart {float: left;width: 188px;height: 33px;line-height: 33px;text-align: center;font-size: 12px;color: #f10215;background-color: #fff;border: 1px #e3e4e5 solid;margin-top: 25px;margin-left: 35px;position: relative;}.head_search .w .shopcart em {display: block;font-style: normal;width: 14px;height: 14px;color: #fff;line-height: 14px;text-align: center;border-radius: 50%;background-color: #f10215;position: absolute;top: 5px;right: 34px;}/*热词搜索样式*/.head_search .w .hotwords {float: left;margin-left: 320px;margin-top: 10px;}.head_search .w .hotwords ul li {float: left;font: 12px/12px "微软雅⿊";margin-right: 10px;}.head_search .w .hotwords a.red {color: red;}.head_search .w .hotwords a:hover {color: red;}/*主导航栏样式*/.head_search .w .main_nav {float: left;margin-left: 230px;margin-top: 31px;}.head_search .w .main_nav ul li {float: left;font: 700 16px/16px "微软雅⿊";margin-right: 30px;}.head_search .w .main_nav ul li.line {width: 1px;height: 10px;background-color: #ccc;margin: 3px 20px 0 -10px;}.head_search .w .main_nav ul li a {color: #555;}.head_search .w .main_nav ul li a:hover {color: red;}/*⼩⼴告*/.head_search .w .small_banner {margin-top: 12px;display: block;float: right;}/*头部搜索区域结束*/4、index.css---主要写轮播图部分和秒杀部分的样式/*轮播区域样式*/.con_lunbo {height: 480px;background: url(../img/a-bg.png) no-repeat center;z-index: -1;} /*背景图被压在版⼼下⾯,但是重新敲⼀遍,保存⼀遍就可以了,为什么??*/ /*左侧导航列表样式*/.con_lunbo .w .side_nav {width: 190px;height: 480px;background-color: #6e6568;}.con_lunbo .w .side_nav ul {margin-top: 16px;}.con_lunbo .w .side_nav ul li {height: 30px;font: 12px/30px "微软雅⿊";color: #fff;padding-left: 12px;}.con_lunbo .w .side_nav ul li:hover {background-color: rgba(255,255,255,0.3);}.con_lunbo .w .side_nav ul li a {color: #fff;}.con_lunbo .w .side_nav ul li a:hover {color: red;}/*中间轮播区域样式*/.con_lunbo .w .lunbo {width: 790px;height: 480px;margin: 0 10px;}.con_lunbo .w .lunbo .lb {height: 340px;margin-bottom: 10px;overflow: hidden;position: relative;}.con_lunbo .w .lunbo .lb ul {width: 8000px;}.con_lunbo .w .lunbo .lb ul li {/*width: 790px;height: 340px;*/float: left;}.con_lunbo .w .lunbo .box_img {height: 130px;}.con_lunbo .w .lunbo .lb ol.lb_nav {width: 182px;height: 12px;padding: 4px 9px;border-radius: 9px;background-color: rgba(255,255,255,0.5);position: absolute;left: 50%;bottom: 20px;margin-left: -91px;}.con_lunbo .w .lunbo .lb ol.lb_nav li {float: left;width: 12px;height: 12px;background-color: #fff;border-radius: 50%;margin-right: 10px;}.con_lunbo .w .lunbo .lb ol.lb_nav li:nth-last-child(1) { margin: 0;}.con_lunbo .w .lunbo .lb ol.lb_nav li.active {background-color: red;}/*右侧⽣活列表样式*/.con_lunbo .w .life_list {width: 190px;height: 480px;background-color: #fff;}/*上边登录部分样式*/.con_lunbo .w .life_list .life_top {width: 190px;height: 115px;border-bottom: 1px #e6e6e6 solid;}.con_lunbo .w .life_list .life_top img {width: 45px;height: 45px;border-radius: 50%;margin: 15px 10px 10px;float: left;}.con_lunbo .w .life_list .life_top p {float: left;font: 11px/11px "微软雅⿊";color: #666;/*margin-top: 21px;margin-left: 15px;margin-bottom: 9px;*/margin: 21px 0 15px;}.con_lunbo .w .life_list .life_top a {float: left;font: 11px/11px "微软雅⿊";color: #000;font-weight: bold;margin-right: 9px;}.con_lunbo .w .life_list .life_top a:nth-child(1) { /*不起作⽤*/margin-top: 15px; /*a是⾏内元素,没有margin,设置浮动以后就有margin了*/ }.con_lunbo .w .life_list .life_top a:hover {color: red;}.con_lunbo .w .life_list .life_top .fuli {width: 168px;height: 24px;float: left;margin-top: 15px;}.con_lunbo .w .life_list .life_top .fuli a {float: left;display: block;width: 70px;height: 20px;border: 2px #e01222 solid;font: 11px/20px "微软雅⿊";text-align: center;color: #e01222;background-color: #fff;margin: 0 10px;}.con_lunbo .w .life_list .life_top .fuli a:nth-child(2) {margin: 0;}.con_lunbo .w .life_list .life_top .fuli a:hover {color: #fff;background-color: #e01222;}/*中间促销部分样式*/.con_lunbo .w .life_list .life_middle {width: 160px;height: 147px; /*154px-7px*/margin: 0 auto;}.con_lunbo .w .life_list .life_middle .life_title {width: 147px; /*160px-13px*/height: 15px; /*17px-2*/margin-top: 7px;border-bottom: 1px #e6e6e6 solid;padding-bottom: 2px;}.con_lunbo .w .life_list .life_middle .life_title a {float: left;font: 11px "微软雅⿊";color: #333;font-weight: bold;}.con_lunbo .w .life_list .life_middle .life_title a.sale {border-right: 1px #e6e6e6 solid;padding-right: 13px;}.con_lunbo .w .life_list .life_middle .life_title a.gonggao {margin-left: 15px;}.con_lunbo .w .life_list .life_middle .life_title a.more {float: right;}.con_lunbo .w .life_list .life_middle .life_con {height: 127px;}.con_lunbo .w .life_list .life_middle .life_con a {font: 11px/23px "微软雅⿊";color: #666;float: left;}.con_lunbo .w .life_list .life_middle .life_con a:nth-child(1) { /*不⽣效,问题同上*/margin-top: 19px;}.con_lunbo .w .life_list .life_middle .life_con a:hover {color: red;}/*下边⽣活服务部分样式*/.con_lunbo .w .life_list .life_bottom {width: 190px;height: 210px;}.con_lunbo .w .life_list .life_bottom {overflow: hidden;}.con_lunbo .w .life_list .life_bottom ul {width: 192px;overflow: hidden; /*为什么不起作⽤应该给ul的⽗元素设置overflow: hidden;*/}.con_lunbo .w .life_list .life_bottom ul li {float: left;width: 47px;height: 69px;border-top: 1px #e6e6e6 solid;border-right: 1px #e6e6e6 solid;position: relative;}.con_lunbo .w .life_list .life_bottom ul li a i {display: block;width: 15px;height: 18px;background: url() no-repeat -4px -88px;text-align: center;margin: 15px 16px 10px 15px;}.con_lunbo .w .life_list .life_bottom ul li:nth-child(2) a i { /*不⽣效 */width: 20px; /*li包含a,应该是第⼆个li⾥的a,⽽不是第⼆个a*/height: 20px;background-position: -2px -45px;margin-top: 17px;margin-left: 13px;}.con_lunbo .w .life_list .life_bottom ul li a p { /*不⽣效*/font-size: 11px "微软雅⿊"; /*刚开始设置的是span,span是⾏内元素,text-align: center;不起作⽤*/ color: #666;text-align: center;}.con_lunbo .w .life_list .life_bottom ul li a b {display: block;width: 13px;height: 16px;background: url(../img/jian.png) no-repeat;position: absolute;top: 0;right: 0;}/*秒杀部分样式*/.con_ms {height: 305px;margin-top: 10px;}/*标题左侧样式*/.con_ms .w .title {height: 55px;background: url(../img/seckill_hd.png) no-repeat; }.con_ms .w .title .left_title .corner {display: block;width: 25px;height: 25px;background: url() no-repeat -190px -48px;float: left;margin-top: -2px;margin-left: -1px;}.con_ms .w .title .left_title .clock {display: block;width: 34px;height: 40px;background: url() no-repeat 0px -39px;float: left;margin-top: 8px;margin-left: 31px;}.con_ms .w .title .left_title h4 {float: left;font: 24px/24px "微软雅⿊";color: #fff;margin-left: 10px;margin-top: 16px;}.con_ms .w .title .left_title a {float: left;font-size: 13px;color: #fff;margin-left: 15px;margin-top: 25px;}.con_ms .w .title .left_title a i.right_arrow {display: inline-block;background: url() no-repeat -153px -39px;width: 16px;height: 17px;vertical-align: top;}/*标题右侧时间样式*/.con_ms .w .title .right_time .left_text {width: 55px;height: 28px;margin-top: 27px;margin-right: 7px;font: 12px/12px "微软雅⿊";color: #fff;}.con_ms .w .title .right_time span {float: left;}.con_ms .w .title .right_time span.hours,span.min,span.sec { width: 35px;height: 37px;background-color: #440106;border-radius: 3px;font: 12px/37px "微软雅⿊";color: #f90013;text-align: center;margin-top: 10px;}.con_ms .w .title .right_time span.dot {width: 4px;height: 12px;/*margin-top: 22px;*/margin: 22px 4px 0;}.con_ms .w .title .right_time span.dot i {display: block;width: 4px;height: 4px;border-radius: 50%;background-color: #440106;}.con_ms .w .title .right_time span.dot i:nth-child(1) {margin-bottom: 4px;}.con_ms .w .title .right_time .right_text {width: 70px;height: 28px;/*margin-top: 27px;margin-left: 7px;margin-right: 22px;*/margin: 27px 22px 0 7px;font: 12px/12px "微软雅⿊";color: #fff;}/*下侧商品区域样式*/.con_ms .w .content .shopping {height: 250px;background-color: #fff;float: left;}.con_ms .w .content .shopping ul li {float: left;width: 199px;height: 225px;border-right: 1px #e7e7e7 solid;}.con_ms .w .content .shopping ul li a {display: block;width: 184px;height: 195px;margin-left: 15px;text-align: center;margin-bottom: 11px;position: relative;}.con_ms .w .content .shopping ul li a b.shop_icon {width: 30px;height: 40px;display: block;position: absolute;z-index: 2;color: #fff;text-align: center;line-height: 40px;font-weight: normal;background: url() no-repeat -53px -39px;}.con_ms .w .content .shopping ul li a img {position: relative;top: 13px;}.con_ms .w .content .shopping ul li a p {text-align: left;margin-top: 15px;height: 28px;line-height: 14px;overflow: hidden; /*溢出内容隐藏*/}.con_ms .w .content .shopping ul li p.price span.newPrice {color: red;margin-left: 15px;float: left;}.con_ms .w .content .shopping ul li p.price span.newPrice i {font-size: 9px;font-size: normal;}.con_ms .w .content .shopping ul li p.price span.newPrice span { font-size: 14px;font-weight: bold;}.con_ms .w .content .shopping ul li .oldPrice {font-size: 9px;float: left;margin-left: 10px;margin-top: 2px;}.con_ms .w .content .shopping ul li span.shadow {width: 170px;height: 22px;display: block;background: url() no-repeat;}/*下侧右边⼴告区域样式*/.con_ms .w .content .big_Img {width: 190px;float: left;}.con_ms .w .content .big_Img img {float: left;}5、foot.css---主要写页⾯底部的样式.foot {height: 567px;background-color: #eaeaea;}/*上⾯多快好省部分样式*/.foot .foot_top {height: 102px;border-bottom: 1px #dedede solid;}/*.foot .foot_top .w {height: 102px;border-bottom: 1px #dedede solid;}*/.foot .foot_top .w ul li {float: left;width: 297px;height: 102px;line-height: 102px;/*text-align: center;*/font-weight: bold;}.foot .foot_top .w ul li h5 {float: left;width: 36px;height: 42px;margin-top: 30px;margin-left: 36px;line-height: 42px;text-align: center;font-size: 20px;color: #e01121;text-indent: -999999px; /*1、优化 2、客户体验*/background: url(../img/ico_service.png) no-repeat;}.foot .foot_top .w ul li:nth-child(2) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -43px;*/ background-position: 0 -43px;}.foot .foot_top .w ul li:nth-child(3) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -85px;*/ background-position: 0 -85px;}.foot .foot_top .w ul li:nth-child(4) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -127px;*/ background-position: 0 -127px;}.foot .foot_top .w ul li p {float: left;margin-left: 10px;font-size: 18px;color: #444444;}/*中间服务部分*//*.foot .service {height: 200px;}*/.foot .service .w {/*height: 200px;*/border-bottom: 1px #ddd solid;}/*.foot .service .w .service_list {}*/.foot .service .service_list dl {float: left;width: 198px;}.foot .service .service_list dl dt {margin-top: 26px;margin-bottom: 15px;font: 13px/13px "微软雅⿊";color: #666666;font-weight: bold;}.foot .service .service_list dl dd {margin-bottom: 11px;font: 11px/11px "微软雅⿊";}.foot .service .map {width: 200px;background: url(../img/ico_footer.png) no-repeat;height: 172px; /*不知道172怎么来的*/background-position: 0 22px;}.foot .service .map h5 {margin-top: 25px;font: 13px/13px "微软雅⿊";font-weight: bold;color: #666666;text-align: center;}.foot .service .w .map p {margin: 23px 20px 0 10px;font: 11px "微软雅⿊";line-height: 18px;}.foot .service .map a {float: right;}.foot .service .map a:hover {color: red;}/*尾部版权部分*/.foot .copyright p {margin-bottom: 9px;text-align: center;}.foot .copyright p:nth-child(1) {margin-top: 19px;margin-bottom: 17px;font: 12px/12px "微软雅⿊";font-weight: bold;}.foot .copyright p a {margin: 0 9px;}.foot .copyright p a {font: 13px/13px "微软雅⿊";color: #666;text-align: center;}.foot .copyright p.pic_href {width: 678px; /*不知道678怎么来的??测的是640*/ margin: 0 auto;}.foot .copyright p.pic_href a {float: left;display: block;width: 103px;height: 32px;background: url(../img/ico_footer.png) no-repeat;background-position: 0 -150px;margin: 0;margin-right: 10px;}.foot .copyright p.pic_href a:nth-child(2) {background-position: -104px -150px;}.foot .copyright p.pic_href a:nth-child(3) {background-position: 0px -183px;}.foot .copyright p.pic_href a:nth-child(4) {background-position: -104px -183px;}.foot .copyright p.pic_href a:nth-child(5) {background-position: 0px -216px;}.foot .copyright p.pic_href a:nth-child(6) {background-position: -104px -216px;}/*固定底部年货样式*/.box_fix {width: 1334px;height: 95px;background: url(../img/footer-fix.png) no-repeat;position: fixed;left: 50%;bottom: 0;margin-left: -667px;}.box_fix>img:nth-child(1) {margin-left: 104px;}.box_fix img {margin-top: 15px;}.box_fix a:nth-child(2) {margin-left: 76px;}这是我写的京东⾸页的代码,主要⽤的是html和css,有很多不⾜之处,希望各位⼤神多多指教。
(京东商城)店铺装修代码大全首先旗舰店店铺设计代码一、大背景不平铺<div class="forBack">(正文body)可换的地方</div><style type="text/css">.w1{ text-align:center; width:100%; background:url(/popstreet/201105/18/banner_bg_170834.gif) center top no-repeat}/*模板背景图片循环*/ </style>二、.漂浮右侧(左侧可更改RIGHT: 1.5%为left: 1.5%)<div class="w w1"><div style="POSITION: fixed; BOTTOM: 0px; COLOR: #000000; TOP: 30%; RIGHT: 1.5%"> <div><a href="/ilike/food197021/index.html" target="_blank"><img border="0" alt=""src="/uploads/promotion/promotion-images/2011/08/01/20110801035244 KK.jpg" width="130" height="135" usemap="#Map02" /></a></div></div></div>三、.活动底部导航<div style="POSITION: fixed; WIDTH: 980px; BOTTOM: 0pt; HEIGHT: 60px; MARGIN-LEFT: -490px; LEFT: 50%" id="springfloat"><img border="0" alt="" src="/popstreet/201107/12/banner_salebottom_161815.gif"width="980" height="60" usemap="#Map2" /><map id="Map2" name="Map2"><area href="#hw" shape="RECT" coords="727,14,829,48" /><area href="#ps" shape="RECT" coords="853,15,968,47" /><area href="#yd" shape="RECT" coords="614,15,720,46" /><area href="#bao" shape="RECT" coords="508,12,596,49" /><area href="#nz" shape="RECT" coords="26,19,139,50" /><area href="#nvz" shape="RECT" coords="150,14,260,48" /><area href="#ny" shape="RECT" coords="268,18,372,47" /><area href="#xie" shape="RECT"coords="385,15,479,50" /></map></div>四、默认专题边框及背景颜色去除(见标注)<style type="text/css">.tem-top{ background:#ffffff; border:7px solid #fff; border-bottom:0}/*单品顶部背景白色边框7像素下边框为0*/.tem-middle,.left-line,.tem-bottom{ background:#fff;}/*单品中部单品间隔虚线单品顶部背景为白色*/.tem-middle{ border-left:7px solid #fff;border-right:7px solid #fff}/*单品中部左边框7像素右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*单品底部7像素边框顶部边框为0*/.w1{ text-align:center; width:100%; background:url(/popstreet/201107/11/banner_3_164158.gif)}/*模板背景图片循环*/.tem{margin: 0 auto; padding: 0 16px;width: 980px;}/*单品模板宽度*/#springfloat{ _display:none;}b{ font-weight:normal;}</style>右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*。
(京东商城)店铺装修代码大全首先旗舰店店铺设计代码一、大背景不平铺<div class="forBack">(正文body)可换的地方</div><style type="text/css">.w1{ text-align:center; width:100%; background:url(/popstreet/201105/18/banner_bg_170834.gif) center top no-repeat}/*模板背景图片循环*/ </style>二、.漂浮右侧(左侧可更改RIGHT: 1.5%为left: 1.5%)<div class="w w1"><div style="POSITION: fixed; BOTTOM: 0px; COLOR: #000000; TOP: 30%; RIGHT: 1.5%"> <div><a href="/ilike/food197021/index.html" target="_blank"><img border="0" alt=""src="/uploads/promotion/promotion-images/2011/08/01/20110801035244 KK.jpg" width="130" height="135" usemap="#Map02" /></a></div></div></div>三、.活动底部导航<div style="POSITION: fixed; WIDTH: 980px; BOTTOM: 0pt; HEIGHT: 60px; MARGIN-LEFT: -490px; LEFT: 50%" id="springfloat"><img border="0" alt="" src="/popstreet/201107/12/banner_salebottom_161815.gif"width="980" height="60" usemap="#Map2" /><map id="Map2" name="Map2"><area href="#hw" shape="RECT" coords="727,14,829,48" /><area href="#ps" shape="RECT" coords="853,15,968,47" /><area href="#yd" shape="RECT" coords="614,15,720,46" /><area href="#bao" shape="RECT" coords="508,12,596,49" /><area href="#nz" shape="RECT" coords="26,19,139,50" /><area href="#nvz" shape="RECT" coords="150,14,260,48" /><area href="#ny" shape="RECT" coords="268,18,372,47" /><area href="#xie" shape="RECT"coords="385,15,479,50" /></map></div>四、默认专题边框及背景颜色去除(见标注)<style type="text/css">.tem-top{ background:#ffffff; border:7px solid #fff; border-bottom:0}/*单品顶部背景白色边框7像素下边框为0*/.tem-middle,.left-line,.tem-bottom{ background:#fff;}/*单品中部单品间隔虚线单品顶部背景为白色*/.tem-middle{ border-left:7px solid #fff;border-right:7px solid #fff}/*单品中部左边框7像素右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*单品底部7像素边框顶部边框为0*/.w1{ text-align:center; width:100%; background:url(/popstreet/201107/11/banner_3_164158.gif)}/*模板背景图片循环*/.tem{margin: 0 auto; padding: 0 16px;width: 980px;}/*单品模板宽度*/#springfloat{ _display:none;}b{ font-weight:normal;}</style>右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*。
京东商城店铺装修代码
关于旗舰店店铺设计(包括专题)代码篇
1.大背景不平铺
<div class="forBack">
(正文body)可换的地方
</div>
<style type="text/css">
.w1{ text-align:center; width:100%; background:url(/popstreet/201105/18/bann er_bg_170834.gif) center top no-repeat}/*模板背景图片循环*/ </style>
2.漂浮右侧(左侧可更改RIGHT: 1.5%为left: 1.5%)
<div class="w w1">
<div style="POSITION: fixed; BOTTOM: 0px; COLOR: #000000; TOP: 30%; RIGHT: 1.5%">
<div>
<a href="/ilike/food197021/index.html"
target="_blank"><img border="0" alt="" src="/uploads/promotion/promotion-images/2011/ 08/01/20110801035244KK.jpg" width="130" height="135" usemap="#Map02" /></a>
</div>
</div>
</div>
3.活动底部导航
<div style="POSITION: fixed; WIDTH: 980px; BOTTOM: 0pt; HEIGHT: 60px; MARGIN-LEFT: -490px; LEFT: 50%" id="springfloat">
<img border="0" alt="" src="/popstreet/201107/12/banner_salebot tom_161815.gif" width="980" height="60" usemap="#Map2" />
<map id="Map2" name="Map2">
<area href="#hw" shape="RECT" coords="727,14,829,48" /><area href="#ps" shape="RECT" coords="853,15,968,47" /><area href="#yd" shape="RECT" coords="614,15,720,46" /><area href="#bao" shape="RECT" coords="508,12,596,49" /><area href="#nz"
shape="RECT" coords="26,19,139,50" /><area href="#nvz" shape="RECT" coords="150,14,260,48" /><area href="#ny" shape="RECT" coords="268,18,372,47" /><area href="#xie" shape="RECT" coords="385,15,479,50" />
</map>
</div>
4.去除默认专题的边框及背景颜色(见标注)
<style type="text/css">.tem-top{ background:#ffffff; border:7px solid #fff; border-bottom:0}/*单品顶部背景白色边框7像素下边框为0*/.tem-middle,.left-line,.tem-bottom{ background:#fff;}/*单品中部单品间隔虚线单品顶部背景为白色*/.tem-middle{ border-left:7px solid #fff;border-right:7px solid #fff}/*单品中部左边框7像素右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*单品底部7像素边框顶部边框为0*/.w1{ text-align:center; width:100%; background:url(/popstreet/201107/11/bann er_3_164158.gif)}/*模板背景图片循环*/.tem{margin: 0 auto; padding:
0 16px;width: 980px;}/*单品模板宽度*/#springfloat{ _display:none;}b{ font-weight:normal;}</style>。