<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
text-decoration: none;
list-style: none;
}
#warp{
width: 300px;
height: 280px;
margin: 0 auto;
border-radius: 5%;
border: 1px solid #D8D8D8;
}
h4{
color: #EFFDFE;
height: 40px;
line-height: 40px;
background-image: linear-gradient(to top, #D2EEFE, #62C4F9);
text-indent: 1em;
border-bottom: 2px solid #E8F6FE;
}
h4 img{
vertical-align: middle;
}
ul li{
width: 280px;
border-bottom: 1px dashed #A4A4A4;
color: #626262;
/* text-indent: 1em; */
margin: 0 auto;
height: 30px;
line-height: 30px;
}
ul li:hover{
color: red;
}
ul li div{
width: 0px;
height: 0px;
border: 5px solid;
border-color: transparent transparent transparent red;
display: inline-block;
}
ul li:first-child{
background-image: linear-gradient(to top,#DBF1FE, #62C4F9);
width: 300px;
border-bottom: transparent;
text-indent: 0.5em;
}
ul li:nth-child(2){
border-top: 1px dashed #A4A4A4;
}
</style>
</head>
<body>
<div id="warp">
<h4><img src="./05练习：中心动态列表页面/图片素材/bg.gif" alt=""> 中心开班信息</h4>
<ul>
<li><div></div> 8月12日：学历+技能班</li>
<li> <div></div> 8月16日：高考特招班</li>
<li> <div></div>8月23日：Java精英班</li>
<li><div></div> 8月31日：学士后强化班</li>
<li> <div></div>9月5日：大学生就业班</li>
<li><div></div> 9月9日：企业定向委培班</li>
<li> <div></div>9月16日：网络营销强化班</li>
</ul>
</div>
</body>
</html>
1495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
