实现效果
合给出的素材，运用列表标签、超链接标签以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接，当鼠标移上时，其样式会发生变化。
鼠标移动到对应位置上的效果
代码以及注释
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>课程介绍专栏</title>
<style>
*{
margin: 0;
padding: 0;
font-size:14px;
/*清除默认效果*/
}
dd{
width: 460px;
height: 145px;
margin: -4px;
padding: 0;
background: url("bg.png");
}
.one,.three{
padding-top:43px;
width:120px;
height:80px;
display: inline-block;
text-align: right;
}
.two{
color: white;
padding-top:39px;
width:90px;
height:80px;
display: inline-block;
text-align: right;
}
a:hover{
/*鼠标移到元素上时向此元素添加特殊的css样式*/
color: #ce4d52;
background:url("bg1.png");
}
a{
color: white;
display: block;
width: 460px;
height: 145px;
text-decoration: none;
}
</style>
</head>
<body>
<dl>
<dt><img src="head.png" width="456" height="100" alt="title"></dt>
<dd>
<a href="">
<!--刷新当前页面-->
<span class="one"> 印刷流程<br>广告设计<br>企业形象设计</span>
<span class="two"> <br>1<br> </span>
<span class="three"><br> 平面设计<br> </span>
</a></dd>
<dd><a href="" >
<span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
<span class="two"> <br>2<br> </span>
<span class="three"> <br>网页设计<br> </span></a>
</dd>
<dd><a href="" >
<span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span>
<span class="two"> <br>3<br> </span>
<span class="three"> <br>网页设计<br> </span></a>
</dd>
</dl>
</body>
</html>
效果展示
//欢迎加我VX进群交流
vx账号：-Sep07
版权声明：本文为No1banana原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。