lianshou

分支 (4)

管理

管理

lianshou

项目11-21

master

fenzhi1

practise_hand
/
Untitled3.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
   <style>
    ul{
	    margin:0;
		padding:0;
		list-style:none;
}
    li{
		width:225px;
		height:63px;
		border:1px solid black;
		background-color:pink;
		text-align:center;
		line-height:63px;
		position:relative;
}
	div{
	    width:600px;
		height:455px;
		position:absolute;
		display:none;
		right:-600px;
}
	li:hover>div{
		display:block;
}
    li:hover{
	    background-color:gray;
	}
    .all{
	    top:-1px;
		background-color:#eee;
	}
	.bll{
	    top:-66px;
	    background-color:gray;
	}
	.cll{
	    top:-131px;
		background-color:gray;
	}
	.dll{
	    top:-196px;
		background-color:gray;
	}
	.ell{
	    top:-261px;
		background-color:gray;
	}
	.fll{
	    top:-326px;
		background-color:gray;
	}
	.gll{
	    top:-391px;
		background-color:gray;
	}
    .all .pone{
	    text-align:left;
		margin-left:40px;
	}
	.all .pone>a{
	    text-decoration:none;
		color:#000000;
		background-color:#eee;
		border:1px solid #eee;
		margin-right:20px;
		border-radius:30%;
    }
	hr{
	    size:5px;
		width:550px;
	}
	</style>
 </head>
 <body>
      <ul>
	      <li>
		      前端/后端开发
		         <div class="all">
		               <p class="pone">
					       <a href="#">数字艺术</a>
						   <a href="#">UED设计</a>
						   <a href="#">UID设计</a>
					    </p>
						<hr>
		          </div>
		  </li>
	     <li>
		     大数据/云计算
		         <div class="bll">
		               6545641654646
		          </div>
		  </li>
	     <li>移动开发/游戏
		         <div class="cll">
		               6545641654646
		          </div>
		  </li>
	     <li>物联网/测试
		         <div class="dll">
		               6545641654646
	 	          </div>
		  </li>
	     <li>营销/产品/运营
		         <div class="ell">
		               6545641654646
		          </div>
		  </li>
	     <li>数字艺术
	   	         <div class="fll">
		               6545641654646
		          </div>
	      </li>
	     <li>其他职业课程
		         <div class="gll">
		               6545641654646
		          </div>
		  </li>
	  </ul>
 </body>
</html>