黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程
第五章：“课程介绍”专栏-课后习题参考代码
题目原型：
请结合给出的素材，运用列表标记，超链接标记以及css控制列表与超链接的样式实现如下图的效果。
。。。。。。。。
记得 关注，收藏，评论哦，作者将持续更新。。。。
我自己做的效果如下：
参考代码如下；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程介绍专栏</title>
<style type="text/css">
*{margin:0; padding:0; list-style:none; outline:none;}
body{font-family:"微软雅黑"; font-size:14px;}
a:link,a:visited{color:#f4f4e1;text-decoration:none;}
a:hover{color:#ce4d52;}
.bg{width:461px; height:532px; background:#ce4d52; margin:10px auto;}
h2{width:461px; height:95px; background:url(images/head.png) no-repeat; border-bottom:1px solid #8d2327;}
ul{width:461px; border-top:1px solid #e68589;}
a{display:inline-block; width:451px; height:103px; background:url(images/bg.png) no-repeat; padding:42px 0 0 10px;}
a span{display:inline-block; width:110px; height:60px; text-align:right;}
a .num,a .descript{ vertical-align:middle; width:90px;}
a .descript{text-align:left; padding-left:35px;}
a:hover{background:url(images/bg1.png) no-repeat;}
a:hover .num{color:#f4f4e1;}
</style>
</head>
<body>
<div class="bg">
<h2></h2>
<ul>
<li>
<a href="#">
<span>印刷流程<br />广告设计<br />企业形象设计</span>
<span class="num">1</span>
<span class="descript">平面设计</span>
</a>
</li>
<li>
<a href="#">
<span>页面设计<br />HTML+CSS<br />JS和JQ交互特效</span>
<span class="num">2</span>
<span class="descript">网页设计</span>
</a>
</li>
<li>
<a href="#">
<span>视觉创意设计<br />人机交互原则<br />UI设计规范</span>
<span class="num">3</span>
<span class="descript">UI设计</span>
</a>
</li>
</ul>
</div>
</body>
</html>
需要的图片如下：
记得把图片放到images文件夹里边，否则会找不到。
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
