Ⅰ 像京东商城 商品页面 的 鼠标放上去就自动展开的菜单怎么做啊 css 和javascript 都可以
给你一个类似的，需要展开的菜单你加一个样式默认隐藏，然后在JS里加一个事件显示就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS+XHTML代码</title>
</head>
<style type="text/css">
/* ================================================================
This right 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
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
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:12px; line-height:16px; margin:5px 0 15px 0;}
#hoverpage ul#outer li div h2 {line-height:1em; color:#585; font-size:1.5em; font-weight:normal; margin-top:0; font-family:verdana, sans-serif;}
#hoverpage ul#outer li div h3 {line-height:1em; color:#66a; font-size:1.2em; font-weight:normal; margin-top:0;}
#hoverpage ul#outer li div h3.clear {clear:left;}
#hoverpage {width:650px; height:450px; border:1px solid #aaa; background:#fff; position:relative; z-index:500; overflow:hidden; text-align:left;}
#hoverpage table {border-collapse:collapse; margin:-1px;}
#hoverpage ul#outer {background:transparent; padding:0; margin:0;list-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:absolute; display:block; height:25px; right:500px; background:transparent; cursor:default; z-index:100; text-align:right; text-decoration:none; color:#080; font-style:normal; cursor: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:block; width:600px; height:400px; padding:25px; font-weight:normal; color:#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 #888; float:right; margin:0 10px 5px 0;}
#hoverpage ul#outer li div p.big {line-height:1em; color:#004; font-size:1.5em;}
#hoverpage ul#outer li div a {color:#00c; text-decoration:underline;}
#hoverpage ul#outer li div em {display:block; width:190px; height:230px; float:left; background:transparent url(current.gif) no-repeat; margin-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:absolute; left:0; top:0;}
#hoverpage ul#outer a:hover i {color:#66a; font-weight:bold;} /* for IE6 */
#hoverpage ul#outer :hover a i {color:#66a; font-weight:bold;}
#hoverpage ul#outer div ul li {line-height:20px; font-size:0.9em; color:#256; list-style-type:disc;}
#hoverpage ul#outer div ul li a {line-height:20px; font-size:1.1em; color:#c00;}
#hoverpage ul#outer div dl dd {line-height:20px; font-size:1.1em; color:#448;}
#hoverpage ul#outer div dl dt {line-height:30px; font-size:1.3em; color:#333;}
</style>
<body>
<div id="hoverpage">
<ul id="outer">
<li class="page p1"><a href="#nogo" class="menuitem"><i>Procts</i><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<img src="bags.jpg" alt="" />
<h2>Procts</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">Proct Information</h3>
<p>Suspendisse potenti. Donec viverra molestie enim. Fusce fermentum, erat id cursus aliquam, mauris augue volutpat dolor, in interm purus pede dictum diam. Morbi interm 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 i. 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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p2"><a href="#nogo" class="menuitem"><i>Services</i><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<img src="service.jpg" alt="" />
<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 tincint massa. Sed a nunc. Quisque varius sagittis libero.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p3"><a href="#nogo" class="menuitem"><i>Latest Information</i><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<img src="news.jpg" alt="" />
<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 tincint quam.</li>
<li>Nullam varius vestibulum mauris.</li>
<li>Curabitur faucibus varius i.<br /><a href="#nogo3">Cras suscipit viverra felis. Nullam diam.</a></li>
<li>Vivamus convallis volutpat nunc.</li>
<li>Sed porttitor i vel nunc.</li>
</ul>
<h3 class="clear">Latest Proct 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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p4"><a href="#nogo" class="menuitem"><i>Press Release</i><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<img src="press.jpg" alt="" />
<h2>Press Release</h2>
<h3>Quisque varius</h3>
<dl>
<dt>11th June 2007</dt>
<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, i nec vehicula vehicula</a>, neque leo faucibus est, porta vehicula nisi odio eu tellus.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p5"><a href="#nogo" class="menuitem"><i>Contact us</i><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<img src="contact.jpg" alt="" />
<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 interm massa. Nunc velit erat, pulvinar vitae, tempor non, porttitor non, ipsum. Nullam venenatis, quam a tincint 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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<br>
<br>
<br>
<div>
</div>
</body>
</html>
<script language=javascript ></script>
Ⅱ 京东淘宝这些页面用的html还是jsp做的
淘宝界面构架是PHP，文件系统是Java，服务器为定制版的Nginx，叫Tengine
Ⅲ 京东怎么创建页面
京东里面 网站的装修 就在高级装修里面搞，搞了以后就能立即看到
如果做一些活动啊 促销的页面的制作 需要在jshop里面做，做了以后，要通过京东的审核才行
Ⅳ 京东页面左边的全部商品分类前台怎么做怎么实现
可以用DW做出来，CSS+DIV 布局，这是简单的，还可以用其他的软件，代码做出来，网上有这样的代码，可以学学。
Ⅳ 京东、淘宝、亚马逊商品展示页面的功能设计上有什么不同
咨询记录 · 回答于2021-10-20
Ⅵ 我们在做天猫与京东详情页或者首页时，设计页面风格两者都有哪些区别呢说6点以上！谢谢。电商设计回答
首先，这两家作为国内大型电商平台，其详情页面设计风格也一直在不断变化中。如果非要整个区别，只能对当前版本回答了。
京东：7.3.2版本，其页面设计是采用横向浏览模式，原来是上拉分页的。
淘宝：8.3.0版本，其页面设计将原有的上拉分页改为统一一个页面了。淘宝的详情下拉能展示更多其他访问过的商品，也算是简介推销吧
虽然二者的风格设计不一样，其实就是换了一个内容展示方式而已。
Ⅶ 京东网页是用什么框架
京东使用的Java web框架
是前端框架+后台框架+都用什么+京东页面很大气用到什么技术搜索
java web框架是目前为止最完整、最强大、最时髦的框架，即使是华为、阿里巴巴、京东等也不例外，如果在国外这套框架的价格在”十万美金“左右，当然国内大型的研发公司也争相购买，因为它能够带来实时在在的改变。
作为公司重金购买的升级版java web开发框架，已经应用到ERP系统，交通运输系统，仓储系统，电信资费系统中，得到客户一致好评，处于互联网精神的传承。
Ⅷ 请问，京东（手机版）宝贝详情页，头图里的产品3D图是用什么软件制作的，怎么制作的谢谢！
你可以先去【绘学霸】网站找“3d建模”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表： www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=307&zdhhr-11y04r-2272978592867238428
想要系统的学习可以考虑报一个网络直播课，推荐CGWANG的网络课。老师讲得细，上完还可以回看，还有同类型录播课可以免费学（赠送终身VIP）。
自制能力相对较弱的话，建议还是去好点的培训机构，实力和规模在国内排名前几的大机构，推荐行业龙头：王氏教育。
王氏教育全国直营校区面授课程试听【复制后面链接在浏览器也可打开】： www.huixueba.com.cn/school/3dmodel?type=2&zdhhr-11y04r-2272978592867238428
在“3d建模”领域的培训机构里，【王氏教育】是国内的老大，且没有加盟分校，都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是：王氏教育每个校区都是实体面授，老师是手把手教，而且有专门的班主任从早盯到晚，爆肝式的学习模式，提升会很快，特别适合基础差的学生。
大家可以先把【绘学霸】APP下载到自己手机，方便碎片时间学习——绘学霸APP下载： www.huixueba.com.cn/Scripts/download.html
Ⅸ 京东商城 详情页面的图片尺寸 还有主页的详细尺寸
1、主图尺寸：800*800像素（6张）
2、详情页：PC端750px ，移动端640px。
3、PC端首页宽度默认是990px，侧边栏790px、150px选项。
4、全屏通栏是1920px。
5、店招尺寸为1920*120px（也可以1920*150px）。
6、详情页宽度默认为990px，也可以做成750px和790px（以前是这个尺寸）。
7、手机端首页宽度为640px，每一个小方格是85px。
8、店招尺寸为640*200像素。
(9)设计京东商品导购页面web扩展阅读
1、京东页面布局大小可进行自定义，需求图片和自定义页面大小需一致上传，否则展示将会错位。
2、店招与首页装修需要分开两个部分装修，店招图片需要进行两层图片上传，否则将会展示部分店招。
3、活动报名页面需要另外装修，尺寸优先选择900px。
4、无线端图片同时装修同步其他页面。
5、宝贝详情页主要装修侧边栏，宝贝详情页发布需要进入宝贝编辑上传图片。
Ⅹ 淘宝京东商品详情页应该怎么设计
详情页其实现在越来越多的商家设计得复杂。我就弄得很简单，一眼让客户看清楚最重要的信息。比如材质，尺寸，品牌，产地这些。。。再弄几张图片。就可以了。写多了废话，买家也没有看。
我就写这么少的内容，到了实际客服中，仍然有很多买家咨询材质，尺寸之类的一看描述就能看到的问题。说明看描述只是粗略看下而已，谁仔细看了？
再说，描述图片写多了，有些买家打开加载时间也会变长。