HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)

本文介绍: 编著的教材 HTML+CSS+Jav aSc rip t 网页制作案例教程第五章：“课程介绍”专栏-课后习题参考代码题目原型：请结合给出的素材，运用列表标记，超链接标记以及css 控制列表与超链接的样式实现如下图的效果。

黑马程序员编著的教材 HTML+CSS+Jav aSc rip t 网页制作案例教程

第五章：“课程介绍”专栏-课后习题参考代码

题目原型：

请结合给出的素材，运用列表标记，超链接标记以及css 控制列表与超链接的样式实现如下图的效果。

。。。。。。。。

记得关注，收藏，评论哦，作者将持续更新。。。。

我自己做的效果如下：

参考代码如下；

&lt;!doctype html&gt;
<html lang="en"&gt;
<head&gt;
<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>