课程介绍专栏/html5+css/案例演示

noahsark747

已于 2022-04-14 17:16:22 修改

阅读量6.7k

点赞数 16

文章标签： css html5 css3

于 2022-02-10 16:00:20 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122862900

版权

实现效果

合给出的素材，运用列表标签、超链接标签以及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"> &nbsp;<br>1<br>&nbsp;</span>
				<span class="three"><br>&nbsp;平面设计<br>&nbsp;</span>
				</a></dd>
			<dd><a href="" >
			<span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
			<span class="two">&nbsp;<br>2<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>
		<dd><a href="" >
			<span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span>
			<span class="two">&nbsp;<br>3<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>		
	</dl>
</body>
</html>

效果展示

在这里插入图片描述

//欢迎加我VX进群交流
vx账号：-Sep07

noahsark747

关注

16
点赞
踩
78

收藏

觉得还不错? 一键收藏
7
评论
课程介绍专栏/html5+css/案例演示

实现效果合给出的素材，运用列表标签、超链接标签以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接，当鼠标移上时，其样式会发生变化。鼠标移动到对应位置上的效果代码以及注释<!doctype html><html><head><meta charset="UTF-8"><title>课程介绍专栏</title> <style> *{ margin: 0;
复制链接

扫一扫