本文共 6529 字，大约阅读时间需要 21 分钟。
今天上午，我的电脑出了点问题，电脑刚开机CPU就占用了90%以上，不晓得为什么会这样，浪费了一上午的时间修理电脑，中午吃完后，睡了1个小时的午觉。晚上做了京东商城的页面，css虽然比较熟练，但是有些细节方面我做得还是有不足之处，希望加油！！！
<!DOCTYPE html>
<html> <head> <title>京东商城导航菜单</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin:0; font-family: "microsoft yahei"; font-size: 14px; } .nav{ border: 2px solid rgb(177,25,26); display: block; width: 210px; text-indent: 2em; margin-left: 20px; margin-top: 20px; position: relative; } .nav_top{ display: block; background: rgb(177,25,26); line-height: 44px; color: #fff; text-align: center //margin-left: 10px; } .nav_content{ display: block; line-height: 31px; list-style: none; width: 206px; } .nav_content li{ display: block; margin-left:0; padding:0; z-index: 3; background:url("http://img.mukewang.com/5411027300014f0200220030.jpg") no-repeat; background-position:right; } .nav_content li a{ display: block; color: rgb(45,45,45); text-decoration: none; } .nav_content li a:hover{ //color:rgb(200,22,35); text-decoration:underline; font-weight: bold; } .nav_content li:hover { background-image: none; border:2px 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; } .submenu{ display: none; position: absolute; z-index: 4; left:200px; top:46px; width:800px; border:1px solid #DDD; background: white; box-shadow: 0 0 8px #DDD; -moz-box-shadow:0 0 8px #DDD; -webkit-box-shadow:0 0 8px #DDD; text-indent:0; } .leftdiv{ float: left; margin:5px; width: 500px; //border:1px solid red; } .leftdiv dl dd a,.leftdiv dl dt{ display: block; float: left; } .leftdiv dl{ display: block; border-bottom:1px solid #ddd; padding-bottom: 6px; overflow: hidden; line-height:31px; margin:15px 0; } .leftdiv dl dt{ display: block; float: left; width:60px; height:22px; line-height: 22px; text-align: right; padding-right:6px; } .leftdiv dl dt a{ color: rgb(177,25,26); font-size: 10pt; font-weight: bold; text-decoration: underline; } ..leftdiv dl dd{ display: block; overflow: hidden; } .leftdiv dl dd a{ display: block; float: left; color: #737373; padding: 0 8px; height:14px; line-height: 14px; text-align: center; border-left: 2px solid #ccc; font-weight: bold; font-size: 13px; //margin:4px 0; margin-top: 4px; } .rightdiv{ width: 240px; float: left; margin-top:5px; //border:1px solid red; overflow: hidden; } .rightdiv dl,.rightdiv dl dt,.rightdiv dl dd,.rightdiv dl dt a{ display: block; } .rightdiv dl dt{ color:rgb(177,25,26); font-weight: bold; } .nav_content li:hover .submenu{ display: block; } .nav_content li:hover a span{ height:31px; width:100px; background: #FFF; display: inline-block; z-index: 20; float: right; position: relative; } </style> </head> <body> <div class="nav"> <div class="nav_top">全部商品分类</div> <ul class="nav_content"> <li><a href="">家用电器<span></span></a> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="#">电子书</a></dt> <dd class="aaa"> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> </dd> </dl> <dl> <dt><a href="#">图书</a></dt> <dd class="aaa"> <a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> </dd> </dl> <dl> <dt><a href="#">电子书</a></dt> <dd class="aaa"> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> </dd> </dl> <dl> <dt><a href="#">图书</a></dt> <dd class="aaa"> <a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> </dd> </dl> <dl> <dt><a href="#">电子书</a></dt> <dd class="aaa"> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> </dd> </dl> <dl> <dt><a href="#">图书</a></dt> <dd class="aaa"> <a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> </dd> </dl> <dl> <dt><a href="#">电子书</a></dt> <dd class="aaa"> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> </dd> </dl> <dl> <dt><a href="#">图书</a></dt> <dd class="aaa"> <a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> </dd> </dl> <dl> <dt><a href="#">电子书</a></dt> <dd class="aaa"> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">文学</a> <a href="#">经管</a> </dd> </dl> <dl> <dt><a href="#">图书</a></dt> <dd class="aaa"> <a href="#">免费吗</a> <a href="#">未小说</a> <a href="#">文学</a> <a href="#">经管</a> <a href="#">励志与成功</a> <a href="#">畅销</a> </dd> </dl> </div> <div class="rightdiv"> <dl> <dd> <img width="115" height="50" src="http://img10.360buyimg.com/vclist/jfs/t2176/358/849877519/2001/3cb2806f/562f4971Na5379aba.jpg"> <img width="115" height="50" src="http://img11.360buyimg.com/vclist/jfs/t3148/253/1909760234/2486/7bd8084/57d681e0N86d8a223.jpg"> </dd> </dl> <dl> <dt>推荐品牌</dt> <dd> <a href="#">[特惠]精选图书每满150减50</a> <a href="#">[公告] 因广州图书仓搬仓升级配送延迟</a> <a href="#">[特惠]爆款手机12期免息 抽奖赢电视</a> <a href="#">[公告]广东、福建受台风影响配送延迟</a> <a href="#">[特惠]大闸蟹领券满399减180</a> </dd> </dl> </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> </ul> </div> </body> </html>转载地址：http://ucqii.baihongyu.com/