Ⅰ 像京東商城 商品頁面 的 滑鼠放上去就自動展開的菜單怎麼做啊 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、寶貝詳情頁主要裝修側邊欄，寶貝詳情頁發布需要進入寶貝編輯上傳圖片。
Ⅹ 淘寶京東商品詳情頁應該怎麼設計
詳情頁其實現在越來越多的商家設計得復雜。我就弄得很簡單，一眼讓客戶看清楚最重要的信息。比如材質，尺寸，品牌，產地這些。。。再弄幾張圖片。就可以了。寫多了廢話，買家也沒有看。
我就寫這么少的內容，到了實際客服中，仍然有很多買家咨詢材質，尺寸之類的一看描述就能看到的問題。說明看描述只是粗略看下而已，誰仔細看了？
再說，描述圖片寫多了，有些買家打開載入時間也會變長。