dedecms仿京东商城模板怎么使用安装到dedecms里才有用啊？？_随笔

要对应着安装的。一般都会有说明。你可以模仿以下步骤进行：

1.把defaul文件夹改成另外一个名字（随便你改，比如ccc），然后用ftp登录到你的空间，进入根目录下的 templets 文件夹，打开 templets文件夹，把你下载下来的文件夹上传到空间的templets文件夹里面，让它替换里面的文件夹和文件。

2.登陆网站管理后台-----系统----系统基本参数-----站点设置-----模板默认风格在右边空格中把原始dedecms默认文件名改成你上传ccc文件夹名字。

3、生成------更新主页html----选择主页模板然后选中自己上传的“ccc/index.htm”模版，然后更新主页html，再更新全站。

4、设置单独频道风格

登陆后台点击核心设置网站栏目管理选择一个频道点击更改高级选项。

封面模板：填写ccc/index_article.htm

列表模板：填写ccc/list_article.htm

文章模板：填写ccc/article_article.htm

5.一键更新网站。

DIV+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可d出对应的子菜单列表，界面简洁大方。

具体代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>京东商城导航条</title>

.my_left_category{

width:150px

font-size:12px

font-family:arial,sans-serif

letter-spacing:2px

}

.my_left_category h1{

background-image:url(images/spring_06.gif)

height:20px

background-repeat:no-repeat

font-size:14px

font-weight:bold

padding-left:15px

padding-top:8px

margin:0px

color:#FFF

}

.my_left_category .my_left_cat_list{

width:148px

border-color:#b60134

border-style:solid

border-width:0px 1px 1px 1px

line-height:13.5pt

}

.my_left_category .my_left_cat_list h2 {

margin:0px

padding:3px 5px 0px 9px

}

.my_left_category .my_left_cat_list h2 a {

color:#d6290b

font-weight:bold

font-size:14px

line-height:22px

}

.my_left_category .my_left_cat_list h2 a:hover {

color:#d6290b

font-weight:bold

font-size:14px

line-height:22px

}

.my_left_category .h2_cat{

width:148px

height:26px

background-image:url(images/my_menubg.gif)

background-repeat:no-repeat

line-height:26px

font-weight:normal

color:#333333

position:relative

}

.my_left_category .h2_cat_1{

width:148px

height:26px

background-image:url(images/my_menubg_1.gif)

background-repeat:no-repeat

line-height:26px

font-weight:normal

color:#333333

position:relative

}

.my_left_category a{

font:12px

text-decoration:none

color:#333333

}

.my_left_category a:hover{

text-decoration:underline

color:#ff3333

}

.my_left_category h3{

margin:0px

padding:0px

height:26px

font-size:12px

font-weight:normal

display:block

padding-left:8px

}

.my_left_category h3 span{color:#999999width:145pxfloat:right}

.my_left_category h3 a{ line-height:26px}

.my_left_category .h3_cat{

display:none

width:204px

position:absolute

left:123px

margin-top:-26px

cursor:auto

}

.my_left_category .shadow{

position:inherit

background:url(images/shadow_04.gif) left top

width:204px

}

.my_left_category .shadow_border{

position:inherit

width:200px

border:1px solid #959595margin-top:1px

border-left-width:0px

background:url(images/shadow_border.gif) no-repeat 0px 21px

background-color:#ffffff

margin-bottom:3px

}

.my_left_category .shadow_border ul{margin:0padding:0margin-left:15px}

.my_left_category .shadow_border ul li {

list-style:none

padding-left:10px

background-image:url(images/my_cat_sub_menu_dot.gif)

background-repeat:no-repeat

background-position:0px 8px

float:left

width:75px

height:26px

overflow:hidden

letter-spacing:0px

}

.my_left_category .active_cat{ z-index:99background-position:0 -25pxcursor:pointer}

.my_left_category .active_cat h3 { font-weight:bold}

.my_left_category .active_cat h3 span{ display:none}

.my_left_category .active_cat div{display:block}

</style>

</head>

<body>

<h2><a href="#">按网站类别</a></h2>

<ul>

<li><a href="#">LOGO设计</a></li>

</ul>

</div>

<ul>

<li><a href="#">LOGO设计</a></li>

</ul>

</div>

<ul>

<li><a href="#">LOGO设计</a></li>

<li><a href="#">DELPHI</a></li>

</ul>

</div>

<h2><a href="#">按品牌选货</a></h2>

<ul>

<li><a href="#">LOGO设计</a></li>

</ul>

</div>

<ul>

<li><a href="#">LOGO设计</a></li>

<li><a href="#">LOGO设计</a></li>

<li><a href="#">LOGO设计</a></li>

</ul>

</div>

<ul>

</ul>

</div>

</div>

<h2><a href="#">按价格选货</a></h2>

<ul>

</ul>

</div>

<h3><a href="#">中高端价位</a></h3>

<ul>

</ul>

</div>

<h2><a href="#">超值特价区</a></h2>

</div>

</body>

</html>

资料来源：http://news.netshop168.com/cgal/0104249910.html

给你一个类似的，需要展开的菜单你加一个样式默认隐藏，然后在JS里加一个事件显示就好了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS+XHTML代码</title>

</head>

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/page_menu2.html

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

body {

background: #fff

font-family: "Lucida Grande", Helvetica, Arial, sans-serif

font-size: 12px

}

#hoverpage ul#outer li div p {font-size:12pxline-height:16pxmargin:5px 0 15px 0}

#hoverpage ul#outer li div h2 {line-height:1emcolor:#585font-size:1.5emfont-weight:normalmargin-top:0font-family:verdana, sans-serif}

#hoverpage ul#outer li div h3 {line-height:1emcolor:#66afont-size:1.2emfont-weight:normalmargin-top:0}

#hoverpage ul#outer li div h3.clear {clear:left}

#hoverpage {width:650pxheight:450pxborder:1px solid #aaabackground:#fffposition:relativez-index:500overflow:hiddentext-align:left}

#hoverpage table {border-collapse:collapsemargin:-1px}

#hoverpage ul#outer {background:transparentpadding:0margin:0list-style:none}

#hoverpage ul#outer li.page {display:inline} /* needed for IE to function correctly */

#hoverpage ul#outer li.page a.menuitem {text-decoration:none}

#hoverpage ul#outer li.page i {position:absolutedisplay:blockheight:25pxright:500pxbackground:transparentcursor:defaultz-index:100text-align:righttext-decoration:nonecolor:#080font-style:normalcursor:pointer}

#hoverpage ul#outer li.p1 i {top:30px}

#hoverpage ul#outer li.p2 i {top:55px}

#hoverpage ul#outer li.p3 i {top:80px}

#hoverpage ul#outer li.p4 i {top:105px}

#hoverpage ul#outer li.p5 i {top:130px}

#hoverpage ul#outer li.page div {display:blockwidth:600pxheight:400pxpadding:25pxfont-weight:normalcolor:#444}

#hoverpage ul#outer li.p1 div {background:#fff url(page1_back.jpg)}

#hoverpage ul#outer li.p2 div {background:#fff url(page2_back.jpg)}

#hoverpage ul#outer li.p3 div {background:#fff url(page3_back.jpg)}

#hoverpage ul#outer li.p4 div {background:#fff url(page4_back.jpg)}

#hoverpage ul#outer li.p5 div {background:#fff url(page5_back.jpg)}

#hoverpage ul#outer li div img {border:1px solid #888float:rightmargin:0 10px 5px 0}

#hoverpage ul#outer li div p.big {line-height:1emcolor:#004font-size:1.5em}

#hoverpage ul#outer li div a {color:#00ctext-decoration:underline}

#hoverpage ul#outer li div em {display:blockwidth:190pxheight:230pxfloat:leftbackground:transparent url(current.gif) no-repeatmargin-right:10px}

#hoverpage ul#outer li.p1 div em {background-position: 21px 0}

#hoverpage ul#outer li.p2 div em {background-position: 21px 25px}

#hoverpage ul#outer li.p3 div em {background-position: 21px 50px}

#hoverpage ul#outer li.p4 div em {background-position: 21px 75px}

#hoverpage ul#outer li.p5 div em {background-position: 21px 100px}

#hoverpage ul#outer li.page div a:hover {text-decoration:none}

#hoverpage ul#outer li.page a:hover {white-space:normal} /* for IE6 */

#hoverpage ul#outer :hover div {position:absoluteleft:0top:0}

#hoverpage ul#outer a:hover i {color:#66afont-weight:bold} /* for IE6 */

#hoverpage ul#outer :hover a i {color:#66afont-weight:bold}

#hoverpage ul#outer div ul li {line-height:20pxfont-size:0.9emcolor:#256list-style-type:disc}

#hoverpage ul#outer div ul li a {line-height:20pxfont-size:1.1emcolor:#c00}

#hoverpage ul#outer div dl dd {line-height:20pxfont-size:1.1emcolor:#448}

#hoverpage ul#outer div dl dt {line-height:30pxfont-size:1.3emcolor:#333}

</style>

<body>

<li class="page p1"><a href="#nogo" class="menuitem"><i>Products</i></a>

<div>

<h2>Products</h2>

<h3>Lorem Ipsum</h3>

<ul>

<li><a href="#nogo1">Integer nonummy neque.</a></li>

<li><a href="#nogo1">Aliquam accumsan.</a></li>

<li><a href="#nogo1">Nulla in sapien eget eros.</a></li>

<li><a href="#nogo1">Nam varius ante et risus.</a></li>

<li><a href="#nogo1">Phasellus at erat id metus.</a></li>

<li><a href="#nogo1">Donec malesuada ultricies.</a></li>

<li><a href="#nogo1">Duis quis purus sit amet.</a></li>

<li><a href="#nogo1">Morbi porta dapibus enim.</a></li>

</ul>

<h3 class="clear">Product Information</h3>

<p>Suspendisse potenti. Donec viverra molestie enim. Fusce fermentum, erat id cursus aliquam, mauris augue volutpat dolor, in interdum purus pede dictum diam. Morbi interdum diam at ligula. Morbi laoreet. Morbi mollis tristique justo. Etiam accumsan fermentum ipsum. Phasellus vestibulum, leo in dapibus ultricies, nisi nulla fermentum tortor, eu lobortis nibh urna ac dui. Aliquam erat volutpat. Curabitur vitae sapien sed libero dictum pellentesque. Praesent quis enim nec tellus congue hendrerit. Ut tellus. Morbi rhoncus elit lobortis libero.</p>

</div>

</li>

<li class="page p2"><a href="#nogo" class="menuitem"><i>Services</i></a>

<div>

<h2>Services</h2>

<h3>Curabitur eget</h3>

<ul>

<li><a href="#nogo2">Suspendisse potenti.</a><br />Quisque at ante nec lacus cursus malesuada.</li>

<li><a href="#nogo2">Donec viverra molestie enim.</a><br />Sed ac tortor nec augue hendrerit pulvinar.</li>

<li><a href="#nogo2">Pellentesque habitant.</a><br />Nullam rhoncus hendrerit orci.</li>

<li><a href="#nogo2">Vivamus non turpis.</a><br />Sed lacinia egestas mi.</li>

</ul>

<h3 class="clear">Available Services</h3>

<p>Proin scelerisque justo quis ante. Maecenas vehicula orci quis arcu. Nam dictum lectus quis ipsum. In felis. Cras eu lectus. Nam sed est ut orci venenatis faucibus. Ut molestie massa non massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur eget magna a odio vestibulum laoreet. Vivamus faucibus tincidunt massa. Sed a nunc. Quisque varius sagittis libero.</p>

</div>

</li>

<li class="page p3"><a href="#nogo" class="menuitem"><i>Latest Information</i></a>

<div>

<h2>Latest Information</h2>

<h3>Fusce fermentum</h3>

<ul>

<li><a href="#nogo3">Donec posuere enim a sapien.<br />Malesuada fames ac turpis egestas.</a></li>

<li>Vivamus dignissim tincidunt quam.</li>

<li>Nullam varius vestibulum mauris.</li>

<li>Curabitur faucibus varius dui.<br /><a href="#nogo3">Cras suscipit viverra felis. Nullam diam.</a></li>

<li>Vivamus convallis volutpat nunc.</li>

<li>Sed porttitor dui vel nunc.</li>

</ul>

<h3 class="clear">Latest Product Information</h3>

<p>Nam porttitor congue diam. Donec in mi. Fusce ac neque. Donec quis justo. Nunc non justo quis augue sagittis volutpat. Etiam quis ligula commodo augue tempus pulvinar. Morbi ante arcu, aliquam ut, consequat et, consequat sed, sem. Cras suscipit viverra felis. Nullam diam. Duis eros purus, ornare sit amet, viverra sed, laoreet ac, pede.</p>

</div>

</li>

<li class="page p4"><a href="#nogo" class="menuitem"><i>Press Release</i></a>

<div>

<h2>Press Release</h2>

<h3>Quisque varius</h3>

<dl>

<dd>In feugiat scelerisque pede.</dd>

<dd>Morbi iaculis eleifend ante.</dd>

<dd>Maecenas fringilla scelerisque erat.</dd>

<dd>Nam <a href="nogo5">accumsan</a>egestas eros.</dd>

</dl>

<h3 class="clear">News and Information</h3>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae sem. <a href="nogo5">Class aptent taciti</a>sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ut nunc. <a href="nogo5">In dictum, dui nec vehicula vehicula</a>, neque leo faucibus est, porta vehicula nisi odio eu tellus.</p>

</div>

</li>

<li class="page p5"><a href="#nogo" class="menuitem"><i>Contact us</i></a>

<div>

<h2>Contact us</h2>

<h3>Donec condimentum</h3>

<ul>

<li>Phasellus vitae arcu et mauris facilisis ornare.</li>

<li>Nullam ultrices <a href="#nogo5">urna nec erat</a>facilisis faucibus.</li>

<li>Ut cursus posuere eros.</li>

<li>Vestibulum <a href="#nogo5">dapibus</a>tortor eu nisl.</li>

<li>Proin ac mauris non lacus pharetra aliquet.</li>

</ul>

<h3 class="clear">Contact Details</h3>

<p>Praesent vehicula interdum massa. Nunc velit erat, pulvinar vitae, tempor non, porttitor non, ipsum. Nullam venenatis, quam a tincidunt semper, neque velit dictum quam, at mattis mauris mauris a dolor. Aliquam urna. <a href="nogo5">Ut pellentesque dapibus quam.</a>Mauris dapibus dictum felis. Praesent tellus quam, aliquet in, malesuada aliquet, pretium non, eros. Cras aliquam ligula vitae nunc.</p>

</div>

</li>

</ul>

</div>

<br>

<div>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6130850.html

dedecms仿京东商城模板怎么使用安装到dedecms里才有用啊？？

发表评论

评论列表（0条）