第五次CSS作业

来源：互联网发布：淘宝运动服童装编辑：程序博客网时间：2024/06/10 04:52

<!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>

0 0