实现效果
合给出的素材，运用列表标签、超链接标签以及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
如果觉得《课程介绍专栏/html5+css/案例演示》对你有帮助，请点赞、收藏，并留下你的观点哦！
