<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>京東主頁</title>
????<style?type?=?"text/css">
????????body{
????????padding:?0;
????????font-size:?10pt;
????????}
????????.topmenu{
????????????display:?block;
????????????width:?220px;
????????????border:?2px?solid?#e4393c;
????????????margin:?0;
????????????padding:?0;
????????}
????????.toptitle{
????????????height:?40px;
????????????line-height:?40px;
????????????text-align:?left;?
????????????font-size:?11pt;
????????????font-weight:bold;
????????????color:?white;
????????????background-color:?#e4393c;
????????????padding-left:20px;
????????}
????????.topmenu?li?{
????????????height:?30px;
????????????line-height:?30px;
????????????font-size:11pt;
????????????list-style-type:?none;
????????????text-align:?left;
????????????padding-left:?8px;
????????????z-index:?3;
????????????background-image:?url(1.png);
????????????background-repeat:?no-repeat;
????????????background-position:?right;
????????}
????????.topmenu?li?a{
????????????text-decoration:?none;
????????????color:?#313131;
????????}
????????.topmenu??li?a:hover{
????????????text-decoration:?underline;
????????????font-weight:?bold;
????????????color:?#e4393c;
????????}
????????.topmenu?li:hover{
????????????border:?1px?solid?#DDD;
????????????border-right:?0;?????????
????????????box-shadow:?0?0?8px?#DDD;
????????????-moz-box-shadow:?0?0?8px?#DDD;
????????????-webkit-box-shadow:?0?0?8px?#DDD;
????????????background-image:none;
????????}
????????.submenu{
????????????display:?block;
????????????width:?715px;
????????????left:220px;
????????????position:?absolute;
????????????top:?40px;
????????????border:?1px?solid?#DDD;
????????????z-index:?4;
????????????background:white;
????????????-moz-box-shadow:?0?0?8px?#DDD;
????????????-webkit-box-shadow:?0?0?8px?#DDD;
????????}
????????.leftdiv{
????????????background:?gray;
????????????float：left;
????????????width:?490px;
????????????margin:?5px;
????????}?
????????.rightdiv{
????????????background:?lightblue;
????????????float:?left;
????????????height:200px;
????????????width:?200px;
????????????margin:?5px;
????????}
????</style>
</head>
<body>
????<ul?class?=?"topmenu">
????????<div?class?=?"toptitle">全部商品分類</div>
????????<li><a?href?=?"#">圖書，音像，數字商品</a>
????????????<div?class?=?'submenu'>
????????????????<div?class?=?"leftdiv">?
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????????左側二級分類<br/>
????????????????</div>
????????????????<div?class?=?"rightdiv">
????????????????????右側推薦品牌
????????????????</div>
????????????</div>
????????</li>
????????<li><a?href?=?"#">家用電器</a></li>
????????<li><a?href?=?"#">手機，運營商，數碼</a></li>
????????<li><a?href?=?"#">電腦，辦公</a></li>
????????<li><a?href?=?"#">家居，家具，家裝，廚具</a></li>
????????<li><a?href?=?"#">男裝，女裝，童裝，內衣</a></li>
????????<li><a?href?=?"#">個護化妝，清潔用品，寵物</a></li>
????????<li><a?href?=?"#">鞋靴，箱包，珠寶，奢侈品</a></li>
????????<li><a?href?=?"#">運動，戶外，鐘表</a></li>
????????<li><a?href?=?"#">汽車，汽車用品</a></li>
????????<li><a?href?=?"#">母嬰，玩具樂器</a></li>
????????<li><a?href?=?"#">食品，酒類，生鮮，特產</a></li>
????????<li><a?href?=?"#">醫(yī)藥保健</a></li>
????????<li><a?href?=?"#">圖書，音像，電子書</a></li>
????????<li><a?href?=?"#">彩票，旅行，充值，票務</a></li>
????????<li><a?href?=?"#">理財，眾籌，白條，保險</a></li>
????</ul>
</body>
</html>
商城分類導航效果 左側二級分類 和 右側推薦品牌為什么不是左右的？
皓韻兒
2016-10-20 13:18:38
