HTML中利用浮动案例实现初音未来点歌（1）

mikon-cn

于 2022-03-23 19:38:57 发布

阅读量634

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mikonnnnnnnnnnn/article/details/123693865

本文介绍了如何利用CSS中的float属性创建一个初音未来点歌界面。首先设置了网页标题，然后通过CSS进行样式设定，包括背景图、标题样式、内容框的浮动布局等。文章提供了源码，并预告了点歌功能的具体实现将在下期内容中讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用css中float 属性，可以轻松地并排浮动内容框

接下来简单实现点歌界面

先设置网页的标题为 Hastue Miku

<title>Hatsune Miku</title>

接下来开始漫长的利用css来编写属性

body{
background:url("5.jpg") center no-repeat;
background-size:130%; 
}

首先是主体的背景图

h1 {
 text-align: center;
font-size:35px;
color: #00FA9A;
}

标题h1居中，大小为35px，以及颜色设置

.song {
float : left;
padding: 20px;
width :20%;
}
.song ul {
list-style-type: none;
  margin: 0;
  padding: 0;
}
.song li {
 padding: 10px;
  margin-bottom: 40px;
  background-color: #33b5e5;
  color: #ffffff;
}
.song li:hover {

最低0.47元/天解锁文章

200万优质内容无限畅学