网页设计歌单作业

最新推荐文章于 2024-05-27 21:23:40 发布

白云千鹤

最新推荐文章于 2024-05-27 21:23:40 发布

阅读量59

点赞数

文章标签： html5 前端 css

本文链接：https://blog.csdn.net/2302_80662476/article/details/134523790

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、网页设计歌单作业
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、网页设计歌单作业

示例：

二、使用步骤

1.引入库

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>歌单</title>
<link rel="stylesheet" href="zuoye.css" type="text/css"/>
</head>

<body>
	<div>
	<img src="11.jpg" alt="车载音乐">
	<a href="zuoye.css" class="left"></a>
	<a href="zuoye.css" class="right"></a>
	<ul>
		<li class="max"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	</div>
</body>
</html>

2.读入数据

代码如下（示例）：

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
a{
	color: white;
	font-size: 30px;
	text-decoration: none;
}

div{
	height: 200px;
	width: 580px;
	margin: 50px auto;
	position: relative;
}

a{
	float: left;
	width: 25px;
	height: 90px;
	line-height: 90px;   /*line-height和height 设置相同，可使文字上下居中*/
	background: #333;
	opacity: 0.7;
	border-radius: 4px;
	text-align: center;
	display: none;
	cursor: pointer;
}

.left{
	position: absolute;
	left:-12px;
	top:60px;
}

.right{
	position: absolute;
	right: -12px;
	top:60px;
}

div:hover a{
	display: block;
}

ul{
	width:110px;
	height:20px;
	background: #333;
	opacity: 0.5;
	border-radius: 8px;
	position: absolute;
	right:30px;
	bottom: 20px;
	text-align: center;
}

li{
	width:5px;
	height: 5px;
	background: #CCC;
    border-radius: 50%;
	display: inline-block;
}

.max{
	width:12px;
	background: #03BDE4;
	border-radius: 6px;
}

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

白云千鹤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页设计歌单作业

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
复制链接

扫一扫