<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<mata name="keywords" content="html">
<meta name="description" content="扫描">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#fff;
}
.all{
width:100%;
background: #000;
height:40px;
position:relative;
}
span{
font-size:35px;
position:absolute;
bottom: -18px;
color:#7B7B7B;
}
li{
list-style: none;
}
.left{
float:left;
padding:10px;
color:#fff;
font-family:"微软雅黑";
margin-left:20px;
}
.right{
float:right;
margin-right:20px;
color:#fff;
font-family:"微软雅黑";
padding:10px;
}
.a1{
width:7%;
background: url(作业3.png) 100px 0;
margin-right:0px;
height:20px;
}
.a2{
width:6%;
background: url(作业3.png) 210px 0;
margin-right:0px;
height:20px;
}
.a3{
width:3%;
background: url(作业3.png) 280px 0;
margin-right:0px;
height:25px;
}
.a4{
width:2%;
background: url(作业3.png) 330px 0;
margin-right:0px;
height:20px;
}
.a5{
width:2%;
background: url(作业3.png) 384px 0;
margin-right:0px;
height:20px;
}
.a6{
width:2%;
background: url(作业3.png) 434px 0;
margin-right:0px;
height:20px;
}
.a7{
width:2%;
background: url(作业3.png) 486px 0;
margin-right:0px;
height:20px;
}
.a8{
width:2%;
background: url(作业3.png) 536px 0;
margin-right:0px;
height:20px;
}
.a9{
width:5%;
background: url(作业3.png) 627px 0;
margin-right:0px;
height:20px;
}
.a0{
width:2%;
background: url(作业3.png) 677px 0;
margin-right:0px;
height:20px;
}
.a01{
width:2%;
background: url(作业3.png) 726px 0;
margin-right:0px;
height:20px;
}
.a100 .div{
margin-top:10px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a100 .div:hover{
background:#f0f;
}
.a100:hover .div{
display:block;
}
.a100 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a100 ul li:last-child{
border-bottom:none;
}
.a100 ul li:hover{
background:red;
}
.b0{
background:url(1.jpg) no-repeat 10px -155px;
}
.b1{
background:url(1.jpg) no-repeat 10px -365px;
}
.b2{
background:url(1.jpg) no-repeat 10px -275px;
}
.b3{
background:url(1.jpg) no-repeat 10px -245px;
}
.b4{
background:url(1.jpg) no-repeat 10px -215px;
}
.b5{
background:url(1.jpg) no-repeat 10px -185px;
}
.b6{
background:url(1.jpg) no-repeat 10px -305px;
}
.b7{
background:url(1.jpg) no-repeat 10px -335px;
}
.b8{
background:url(1.jpg) no-repeat 10px -415px;
}
.b9{
background:url(1.jpg) no-repeat 10px -445px;
}
.b10{
background:url(1.jpg) no-repeat 10px -590px;
}
.b11{
background:url(1.jpg) no-repeat 10px -630px;
}
.a101{
margin-top:10px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a101 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a101 ul li:last-child{
border-bottom:none;
}
.a101 ul li:hover{
background:red;
}
.a101 .div:hover{
background:#f0f;
}
.a103:hover .a101{
display:block;
}
.a102{
margin-top:30px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a102 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a102 ul li:last-child{
border-bottom:none;
}
.a102 ul li:hover{
background:red;
}
.a102 .div:hover{
background:#f0f;
}
.a0:hover .a102{
display:block;
}
.b100{
margin-top:30px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.b100 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.b100 ul li:last-child{
border-bottom:none;
}
.b100 ul li:hover{
background:red;
}
.b100 .div:hover{
background:#f0f;
}
.a7:hover .b100{
display:block;
}
.b50{
margin-top:35px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.b50 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.b50 ul li:last-child{
border-bottom:none;
}
.b50 ul li:hover{
background:red;
}
.b50 .div:hover{
background:#f0f;
}
.a3:hover .b50{
display:block;
}
</style>
</head>
<body>
<div class="all">
<ul>
<li class="left">网易首页</li>
<li class="left a100">应用<span>ˇ</span>
<div class="div">
<ul>
<li class="b0">网易新闻</li>
<li class="b1">网易云音乐</li>
<li class="b2">网易云阅读</li>
<li class="b3">有道云笔记</li>
<li class="b4">大学MOOC</li>
<li class="b5">网易公开课</li>
<li class="b6">网易彩票</li>
<li class="b7">有道词典</li>
<li class="b8">邮箱大师</li>
<li class="b9">LOFTER</li>
<li class="b10">网易云课堂</li>
<li class="b11">青果商城</li>
</ul>
</div>
</li>
<li class="right a1"></li>
<li class="right a2"> </li>
<li class="right a3">
<div class="b50">
<ul>
<li>注册VIP邮箱</li>
<li>免费下载网易官方</li>
</ul>
</div>
</li>
<li class="right a4"></li>
<li class="right a5"> </li>
<li class="right a6"></li>
<li class="right a7">
<div class="b100">
<ul>
<li>缘分</li>
<li>真心话</li>
<li>约会</li>
<li>同城</li>
</ul>
</div>
</li>
<li class="right a8"> </li>
<li class="right a9"> </li>
<li class="right a0">
<div class="a102">
<ul>
<li>网易最热娱乐社区</li>
<li>直播--海量女神</li>
<li>资讯--女神信息</li>
<li>交友--美女语聊</li>
<li>动漫--舔屏神器</li>
<li>下载BoBo直播kpp</li>
</ul>
</div>
</li>
<li class="right a01"> </li>
<li class="right a103">网易考拉<span>ˇ</span>
<div class="a101">
<ul>
<li>1000元现金礼包</li>
<li>天天特价</li>
<li>游戏充值</li>
<li>母婴专区</li>
<li>美容彩妆</li>
<li>家具用品</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<mata name="keywords" content="html">
<meta name="description" content="扫描">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#fff;
}
.all{
width:100%;
background: #000;
height:40px;
position:relative;
}
span{
font-size:35px;
position:absolute;
bottom: -18px;
color:#7B7B7B;
}
li{
list-style: none;
}
.left{
float:left;
padding:10px;
color:#fff;
font-family:"微软雅黑";
margin-left:20px;
}
.right{
float:right;
margin-right:20px;
color:#fff;
font-family:"微软雅黑";
padding:10px;
}
.a1{
width:7%;
background: url(作业3.png) 100px 0;
margin-right:0px;
height:20px;
}
.a2{
width:6%;
background: url(作业3.png) 210px 0;
margin-right:0px;
height:20px;
}
.a3{
width:3%;
background: url(作业3.png) 280px 0;
margin-right:0px;
height:25px;
}
.a4{
width:2%;
background: url(作业3.png) 330px 0;
margin-right:0px;
height:20px;
}
.a5{
width:2%;
background: url(作业3.png) 384px 0;
margin-right:0px;
height:20px;
}
.a6{
width:2%;
background: url(作业3.png) 434px 0;
margin-right:0px;
height:20px;
}
.a7{
width:2%;
background: url(作业3.png) 486px 0;
margin-right:0px;
height:20px;
}
.a8{
width:2%;
background: url(作业3.png) 536px 0;
margin-right:0px;
height:20px;
}
.a9{
width:5%;
background: url(作业3.png) 627px 0;
margin-right:0px;
height:20px;
}
.a0{
width:2%;
background: url(作业3.png) 677px 0;
margin-right:0px;
height:20px;
}
.a01{
width:2%;
background: url(作业3.png) 726px 0;
margin-right:0px;
height:20px;
}
.a100 .div{
margin-top:10px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a100 .div:hover{
background:#f0f;
}
.a100:hover .div{
display:block;
}
.a100 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a100 ul li:last-child{
border-bottom:none;
}
.a100 ul li:hover{
background:red;
}
.b0{
background:url(1.jpg) no-repeat 10px -155px;
}
.b1{
background:url(1.jpg) no-repeat 10px -365px;
}
.b2{
background:url(1.jpg) no-repeat 10px -275px;
}
.b3{
background:url(1.jpg) no-repeat 10px -245px;
}
.b4{
background:url(1.jpg) no-repeat 10px -215px;
}
.b5{
background:url(1.jpg) no-repeat 10px -185px;
}
.b6{
background:url(1.jpg) no-repeat 10px -305px;
}
.b7{
background:url(1.jpg) no-repeat 10px -335px;
}
.b8{
background:url(1.jpg) no-repeat 10px -415px;
}
.b9{
background:url(1.jpg) no-repeat 10px -445px;
}
.b10{
background:url(1.jpg) no-repeat 10px -590px;
}
.b11{
background:url(1.jpg) no-repeat 10px -630px;
}
.a101{
margin-top:10px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a101 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a101 ul li:last-child{
border-bottom:none;
}
.a101 ul li:hover{
background:red;
}
.a101 .div:hover{
background:#f0f;
}
.a103:hover .a101{
display:block;
}
.a102{
margin-top:30px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.a102 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.a102 ul li:last-child{
border-bottom:none;
}
.a102 ul li:hover{
background:red;
}
.a102 .div:hover{
background:#f0f;
}
.a0:hover .a102{
display:block;
}
.b100{
margin-top:30px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.b100 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.b100 ul li:last-child{
border-bottom:none;
}
.b100 ul li:hover{
background:red;
}
.b100 .div:hover{
background:#f0f;
}
.a7:hover .b100{
display:block;
}
.b50{
margin-top:35px;
border:1px solid #ccc;
width:150px;
height:auto;
color:#000;
box-shadow:1px 1px 2px 2px #CDCDCD;
text-align: center;
font-size:15px;
display:none;
}
.b50 ul li{
border-bottom:2px dotted #CDCDCD;
padding:5px;
}
.b50 ul li:last-child{
border-bottom:none;
}
.b50 ul li:hover{
background:red;
}
.b50 .div:hover{
background:#f0f;
}
.a3:hover .b50{
display:block;
}
</style>
</head>
<body>
<div class="all">
<ul>
<li class="left">网易首页</li>
<li class="left a100">应用<span>ˇ</span>
<div class="div">
<ul>
<li class="b0">网易新闻</li>
<li class="b1">网易云音乐</li>
<li class="b2">网易云阅读</li>
<li class="b3">有道云笔记</li>
<li class="b4">大学MOOC</li>
<li class="b5">网易公开课</li>
<li class="b6">网易彩票</li>
<li class="b7">有道词典</li>
<li class="b8">邮箱大师</li>
<li class="b9">LOFTER</li>
<li class="b10">网易云课堂</li>
<li class="b11">青果商城</li>
</ul>
</div>
</li>
<li class="right a1"></li>
<li class="right a2"> </li>
<li class="right a3">
<div class="b50">
<ul>
<li>注册VIP邮箱</li>
<li>免费下载网易官方</li>
</ul>
</div>
</li>
<li class="right a4"></li>
<li class="right a5"> </li>
<li class="right a6"></li>
<li class="right a7">
<div class="b100">
<ul>
<li>缘分</li>
<li>真心话</li>
<li>约会</li>
<li>同城</li>
</ul>
</div>
</li>
<li class="right a8"> </li>
<li class="right a9"> </li>
<li class="right a0">
<div class="a102">
<ul>
<li>网易最热娱乐社区</li>
<li>直播--海量女神</li>
<li>资讯--女神信息</li>
<li>交友--美女语聊</li>
<li>动漫--舔屏神器</li>
<li>下载BoBo直播kpp</li>
</ul>
</div>
</li>
<li class="right a01"> </li>
<li class="right a103">网易考拉<span>ˇ</span>
<div class="a101">
<ul>
<li>1000元现金礼包</li>
<li>天天特价</li>
<li>游戏充值</li>
<li>母婴专区</li>
<li>美容彩妆</li>
<li>家具用品</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>