2016年9月17日晚

今天上午，我的电脑出了点问题，电脑刚开机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>
<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>

2016年9月17日晚相关推荐

2016年8月17日星期三 --出埃及记 Exodus 16:18
2016年8月17日星期三 --出埃及记 Exodus 16:18 And when they measured it by the omer, he who gathered much did n ...
Friday BI Fly | 2016年12月02日晚8点半微信直播交流地理大数据如何驱动智慧选址第42场...
公告周五BI飞起来,每周一个主题,一场跟数据有关的行业.工具.技术的交流盛宴,锁定在每周五晚20:30,不见不散! 本期分享内容 1.选址的本质与实际工作中的思考角度. 2.目前主流选址使用的数据有 ...
深圳大学李猛教授报告：海洋古菌的微生物组学(11月17日晚7点)
直播平台:腾讯会议(会议ID:455647378,密码:202020) 直播链接:https://meeting.tencent.com/l/E82ZAkdnFrfA 李猛,深圳大学高等研究 ...
2016年7月17日学习 scratch 钢琴键
输入键盘上1~7 弹出对应的钢琴的音符1~7 ... 步骤: 1.找到"声音"里的"弹奏音符",找到对应的1~7 2.然后给对应的音符添加键盘上对应的键:找 ...
2016年7月17日学习 scratch 小兔子偷胡萝卜的故事
故事描述:兔子去偷胡萝卜,并被主人发现,主人命令鸭子去帮忙追步骤说明: 1.导入角色:人.鸭子.兔子,并在兔子的角色上进一步的编辑,画一个胡萝卜 2.角本设置 1).点击绿旗时,人物和兔子显示,鸭子 ...
1613-3-傅溥衍总结《2016年11月17日》【连续四十八天总结】
标题:类和对象关键词:常成员常对象内容: A今日完成情况 1.看常成员和常对象100% B具体内容在定义类或声明类的对象时要用关键词const修饰类的成员或对象,则该成员或对象被说明为常成 ...
【历史上的今天】7 月 17 日：软银收购 ARM；第一次电子邮件中断；维基媒体国际会议
整理 | 王启隆透过「历史上的今天」,从过去看未来,从现在亦可以改变未来. 今天是 2022 年 7 月 17 日,在 1924 年的今天,IBM System/360 系列计算机的主要设计者 Ge ...
【推荐】《Android应用安全设计及安全编码指导手册》更新到2016年9月1日版本
更新:<Android应用安全设计及安全编码指导手册>[2017年2月1日英文版] 0. 下载地址该手册有日文版和英文版,英文版下载地址在:https://www.jssec.org/d ...
12月17日重磅来袭！元宇宙，是技术颠覆？还是产业革命？
点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入! /// 元宇宙这个词源于 1992 年尼尔·斯蒂芬森的<雪崩>,这本书描述了一个平行于现实世界的虚拟世界,Metaverse ...

2016年9月17日晚

2016年9月17日晚相关推荐

最新文章

热门文章