接下来简单实现点歌界面

先设置网页的标题为 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 {
  background-color: #0099cc;
}

设定song类，以及float属性设置，背景颜色，字号，列表定义为无序列表

.miku {
float : right;
padding:30px;
width:66%;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

设定miku类以及万用的clearfix

接下来到了调用部分

<body>
<h1>欢迎来到vocaloid的世界</h1>
<div class="clearfix">
  <div class="song">
    <ul>
      <li>世界第一公主殿下</li>
      <li>爱言叶</li>
      <li>电子天使</li>
      <li>千本樱</li>
    </ul>
  </div>
  <div class="miku">
  <img src="2.jpg"/>
  </div>
</div>
</body>

最后来看效果图

下面是全部源码

<!DOCTYPE html>
<html>
<head>
<title>Hatsune Miku</title>
<style>
body{
background:url("5.jpg") center no-repeat;
background-size:130%; 
}

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

* {
  box-sizing: border-box;
}

.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 {
  background-color: #0099cc;
}
.miku {
float : right;
padding:30px;
width:66%;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.song
</style>
</head>
<body>
<h1>欢迎来到vocaloid的世界</h1>
<div class="clearfix">
  <div class="song">
    <ul>
      <li>世界第一公主殿下</li>
      <li>爱言叶</li>
      <li>电子天使</li>
      <li>千本樱</li>
    </ul>
  </div>
  <div class="miku">
  <img src="2.jpg"/>
  </div>
</div>
</body>
</html>

具体的点歌功能实现请看下期

0 条评论