【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

模仿JD导航界面

原创 2016年06月01日 22:44:02

这里是html文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<link rel="stylesheet" href="css/index.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
	</head>
	<body>
		<ul class="menulist">
			<div class="menutitle">全部商品分类</div>
			<li class="home"><a href="#">家用电器</a><i>></i><span></span>
				<!--浮动层 开始-->
				<div class="hoverdiv">
					<div class="hoverleft">
						<div class="lefttop">
							<a href="#" target="_blank">品牌日<b>></b></a>
							<a href="#" target="_blank">家电城<b>></b></a>
							<a href="#" target="_blank">智能生活馆<b>></b></a>
							<a href="#" target="_blank">京东净化馆<b>></b></a>
							<a href="#" target="_blank">京东帮服务店<b>></b></a>
							<a href="#" target="_blank">值得买精选<b>></b></a>
						</div>
						<div class="leftbottom">
							<dl>
								<dt><a href="#">大家电 ></a></dt>
								<dd>
									<a href="#">平板电视</a>
									<a href="#">家用空调</a>
									<a href="#">家用中央空调</a>
									<a href="#">冰箱</a>
									<a href="#">洗衣机</a>
									<a href="#">家庭影院</a>
									<a href="#">DVD</a>
									<a href="#">迷你音响</a>
									<a href="#">冷柜/冰吧</a>
									<a href="#">酒柜</a>
									<a href="#">家电配件</a>
								</dd>
							</dl>
							<dl>
							    <dt><a href="#">厨卫大电 ></a></dt>
								<dd>
									<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>
									<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>
									<a href="#">电烧烤炉</a>
									<a href="#">电热饭盒</a>
									<a href="#">其他厨房电器</a>
								</dd>
							</dl>
							<dl>
							    <dt><a href="#">生活电器 ></a></dt>
								<dd>
									<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>
									<a href="#">其他生活电器</a>
									<a href="#">生活电器配件</a>
								</dd>
							</dl>
							<dl>
							    <dt><a href="#">个护健康 ></a></dt>
								<dd>
									<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>
									<a href="#">电动工具</a>
									<a href="#">手动工具</a>
									<a href="#">仪器仪表</a>
									<a href="#">浴霸/排风扇</a>
									<a href="#">灯具</a>
									<a href="#">LED灯</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>
						</div>
					</div>
					<div class="hoverright">
						<a href="#"><img src="img/1.jpg" /></a>
						<a href="#"><img src="img/2.jpg" /></a>
						<a href="#"><img src="img/3.jpg" /></a>
						<a href="#"><img src="img/4.jpg" /></a>
						<a href="#"><img src="img/5.jpg" /></a>
						<a href="#"><img src="img/6.jpg" /></a>
						<a href="#"><img src="img/a.jpg" /></a>
						<a href="#"><img src="img/b.jpg" /></a>
					</div>
				</div>
				<!--浮动层 结束-->
				
			</li>
			<li><a href="#">手机、数码、京东通信</a><i>></i></li>
			<li><a href="#">电脑、办公</a><i>></i></li>
			<li><a href="#">家居、家具、家装、厨具</a><i>></i></li>
			<li><a href="#">男装、女装、童装、内衣</a><i>></i></li>
			<li><a href="#">个护化妆、清洁用品、宠物</a><i>></i></li>
			<li><a href="#">鞋靴、箱包、珠宝、奢侈品</a><i>></i></li>
			<li><a href="#">运动户外、钟表</a><i>></i></li>
			<li><a href="#">汽车、汽车用品</a><i>></i></li>
			<li><a href="#">母婴、玩具乐器</a><i>></i></li>
			<li><a href="#">食品、酒类、生鲜、特产</a><i>></i></li>
			<li><a href="#">医药保健</a><i>></i></li>
			<li><a href="#">图书、音像、电子书</a><i>></i></li>
			<li><a href="#">彩票、旅行、充值、票务</a><i>></i></li>
			<li><a href="#">理财、众筹、白条、保险</a><i>></i></li>
		</ul>
		<script>
			$(function(){
				$(".home").hover(function(){
					$(".hoverdiv").show();
				},function(){
					$(".hoverdiv").hide();
				});
			});
		</script>
	</body>
</html>
这里是css文件:

*{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
a{
	text-decoration: none;
	color: #fff;
}
body{
	font-family: "Microsoft YaHei",tahoma,arial,"Hiragino SansGB","b8bf53",sans-serif;
}
.menulist{
	width: 210px;
	background: #c81623;
	margin: 20px 20px;
	border-bottom: 1px solid #C81623;
}
.menutitle{
	background: #B1191A;
	color: #fff;
	height: 41px;
	line-height: 41px;
	font-weight: bold;
	font-size: 11pt;
	text-indent: 1em;
}

.menulist li{
	font-size: 9pt;
	height: 31px;
	line-height: 31px;
	text-indent: 1em;
	position: relative;
	z-index: 9;
}

.menulist li i{
	color: #fff;
	display: block;
	float: right;
	margin-right: 10px;
}

.menulist li:hover{
	color: #B1191A;
	background: #fff;
	width: 209px;
	border-left: 1px solid #C81623;
}
.menulist li:hover a{ color: #c81623;}
.menulist li:hover span{ width: 20px; height: 31px; display: inline-block; background: #fff; position: absolute; top: 0; right: -5px; z-index: 99;}
/*浮动层样式*/
.hoverdiv{
	position: absolute;
	width: 999px;
	padding: 20px;
	top: -1px;
	left: 209px;
	border: 1px solid #C81623;
}
.hoverleft{
	width: 790px;
	float: left;
}
.lefttop a{
	line-height: 24px;
	display: inline-block;
	color: #FFFFFF!important;
	padding: 0 0 0 4px;
	margin-right: 10px;
	background: #7C7171;
}
.lefttop a b{
	display: inline-block;
	height: 24px;
	width: 23px;
	background: #5c5251;
	margin-left: 4px;
}
.lefttop a:hover{
	background: #C81623;
}
.lefttop a:hover b{
	background: #B1191A;
}
.leftbottom dl{
	display: block;
	overflow: hidden; 
	}
.leftbottom a{
	color: #666!important;
}
.leftbottom dl dt{
	display: inline-block;
	float: left;
	width: 80px;
	text-align: right;
	font-weight: 700;
	font-size: 11pt;
	text-indent:0 !important;
	margin-right: 10px;
}
.leftbottom dl dd{
	width: 670px;
	display: block;
	text-indent:0 !important;
	border-bottom: 1px solid #E0E0E0;
	-webkit-margin-start: 90px;
	
}
.leftbottom dl dd a{
	line-height: 16px;
	height: 16px;
	display: inline-block;
	border-left: 1px solid #e0e0e0;
	padding: 0px 8px;
}
.hoverright{
	float: right;
	width: 190px;
	text-indent: 0;
	display: inline;
}
.hoverright img{border: none;}
.hoverdiv{display: none;}
/*.menulist li:hover .hoverdiv{display: block;}*/
.hoverdiv dl a:hover{
	color: #C81623!important;}
.hoverdiv dd a:hover{
	color:#C81623!important;}*/







版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

[startrelatedarticles]

{relatedtitle}

{relateddes}
[endrelatedarticles] [startrelatedarticlesad1]

{relatedtitle}

{relateddes}
[endrelatedarticlesad1] [startrelatedarticlesad2]
{relateddes}
[endrelatedarticlesad2]
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)