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

黑马程序员编著的教材 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文件夹里边，否则会找不到。

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

HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
【传智播客】Javaweb程序设计任务教程黑马程序员第五章课后答案
所有章节答案合集-->传送门 [测一测] 学习完前面的内容,下面来动手测一测吧,请思考以下问题: 1.简述什么是会话技术? 2.简述Cookie与Session的区别?(至少写出3点) 3.请设 ...
输入圆的半径计算面积和周长-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)
[案例2-5]输入圆的半径计算面积和周长一.案例描述考核知识点 toFixed().isNaN.window.document对象练习目标掌握toFixed()方法. 掌握数据类型检测. 了解 ...
计算圆的面积和周长-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第4章-课后作业)
[案例4-5]计算圆的面积和周长一.案例描述考核知识点 Math.PI().Math.pow() 练习目标掌握Math.pow()用法. 掌握Math.PI()用法. 了解圆的周长公式. 了解圆 ...
【传智播客】Javaweb程序设计任务教程黑马程序员第六章课后答案
所有章节答案合集-->传送门 [测一测] 学习完前面的内容,下面来动手测一测吧,请思考以下问题: 1.请简述JSP的运行原理. 1.请简述JSP中的9个隐式对象. 2.请使用include标签编 ...
【传智播客】Javaweb程序设计任务教程黑马程序员第四章课后答案
所有章节答案合集-->传送门 [测一测] 学习完前面的内容,下面来动手测一测吧,请思考以下问题: 1.简述请求转发与重定向的异同?(至少写3点) 2.请写出禁止浏览器缓存页面的核心代码. 3.请 ...
【传智播客】Javaweb程序设计任务教程黑马程序员第三章课后答案
所有章节答案合集-->传送门 [测一测] 学习完前面的内容,下面来动手测一测吧,请思考以下问题: 1.请列举Servlet接口中的方法,并分别说明这些方法的特点及其作用. 2.简述Servlet ...
根据身高体重计算某个人的BMI值--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)
实例3:根据身高体重计算某个人的BMI值 BMI又称为身体质量指数,它是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准.我国制定的BMI的分类标准如表1所示. 表1 BMI的分类 BMI 分类 ...
图形的面积与周长计算程序-课后程序(JAVA基础案例教程-黑马程序员编著-第四章-课后作业)
[案例4-7]图形的面积与周长计算程序欢迎点赞关注收藏 [案例介绍] 案例描述长方形和圆形都属于几何图形,都有周长和面积,并且它们都有自己的周长和面积计算公式.使用抽象类的知识设计一个程序,可以计 ...

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

。。。。。。。。

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

最新文章

热门文章