一、项目描述
我们设计的是一个酷狗音乐界面，主要参考酷狗的页面，在这个页面可以看出最上面是酷狗的图标，右边是一个输入框，最右边有一个注册两个字，当你点击注册按钮的时候，可以跳转到注册界面，在酷狗注册界面里面，需要输入自己的注册信息，当你点击注册的时候，就已经代表你注册成功，并且跳转到登录界面，在这个界面里面，你可以选择两种方式，一种是扫码登录，一种是手机号登录；在主页面中，你可以看见最近流行的歌以及歌的封面，在这个实验中，主要是界面上的轮播图。
截图
二、项目设计
1.项目需求分析
在当今的科技横飞的世界中，各种音乐软件的出现，让人们从磁带到磁盘，走到了使用软件就可以听歌，可以随时随地的听歌，只要你想，就可以利用流量去下载自己喜欢的歌，之前流行网易云，因为它的谐音是抑郁，但是，对于我自己来说，我更偏向于酷狗，因为酷狗可以听很多歌，有些网易云需要版权的歌，而酷狗是不需要的，所以我和我的队友就决定做一个酷狗的页面，在这个页面中，主要是利用学过的轮播知识来达到一个页面的轮播。
2.功能分析
1.在这个酷狗页面中，我们在第一个页面中（酷狗.html），使用animation来进页面的轮播，以达到一种图片运动起来的效果；
2.在图片页面轮播的上面，使用文字来实现酷狗的主页面，当鼠标移动到字的上面的时候，字体的颜色就会变，背景就会出现蓝色；当你移动到首页上面的时候，就会有一个下拉列表；最右边的设置了一个div，用来存放后面的六组词，这边设置的浮动为向右浮动；
3.下面插入了几张图片，在插入图片的过程中，使用了table,在这里设置table的时候，选用6行4列来实现对图片有序的排列；
4.最下面的友情链接那里使用表格来对字体进行合理安排，给人一种比较整洁的页面；
5.最下面那一行使用一个div,然后里面使用P标签来实现对链接、字体的输入，给p标签一个名字，然后就可以对其分别进行设置字体，以及文字的排列方式，可以将其文字对齐，给人一种好看的感觉；
6.在这里，使用了一个注册按钮，当你点击注册的时候，就可以进入到一个注册界面，在这里可以输入自己的手机号以及所需信息，然后就可以注册，当你注册成功后，就可以登录；
7.当你点击注册的时候，意味着注册并且登录，这时候会有一个扫码登录的界面，在这里，你可以选择扫码登录，也可以选择手机号登录，
8.当你选择登录按钮的时候，会重新跳转界面到（酷狗.html），这时，你可以继续听歌。
三、项目实现
1.HTML代码
酷狗.html:用来做出酷狗的主界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>酷狗音乐</title>
<link type="text/css" rel="stylesheet" href="css/酷狗.css" />
</head>
<body>
<div class="header">
<div class="header-left">
<img src="img/酷狗1.png" />
<input type="text" name="" id="" />
</div>
<div class="header-right">
<ul>
<li><a href="#">客服中心</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">会员中心</a></li>
<a href="注册.html" class="loginBtn">注册</a>
</ul>
</div>
</div>
<div class="menu">
<div class="menu-content">
<ul class="menu-left fl">
<li><a href="#">首页</a></li>
<li><a href="#">榜单</a></li>
<li><a href="#">下载客户端</a></li>
<li><a href="#">更多^</a>
<ul class="sub-menu">
<li><a href="#">电台</a></li>
<li><a href="#">MV</a></li>
<li><a href="#">歌单</a></li>
<li><a href="#">歌手</a></li>
</ul>
</li>
</ul>
<ul class="menu-right fr">
<li><a href="#">直播</a></li>
<li><a href="#">商城</a></li>
<li><a href="#">音乐人</a></li>
<li><a href="#">代理商</a></li>
<li><a href="#">主播电台</a></li>
<li><a href="#">开放平台</a></li>
</ul>
</div>
</div>
<div class="box1" >
<div class="photo">
<img src="img/酷狗2.png" height="435px" width="1000px"/>
<img src="img/酷狗3.png" height="435px" width="1000px" />
<img src="img/酷狗4.png" height="435px" width="1000px" />
<img src="img/酷狗5.png" height="435px" width="1000px" />
</div>
</div>
<div class="load">
<img src="img/酷狗6.png" />
</div>
<div class="character">
<h4 class="fl character-left">精选歌单</h4>
<h6 class="fl">更多</h6>
<h4 class="character-right">热门榜单</h4>
</div>
<div class="sing">
<table>
<tr>
<td rowspan="6">
<img src="img/酷狗7.png" />
</td>
<td rowspan="3">
<img src="img/酷狗8.png" />
</td>
<td rowspan="3">
<img src="img/酷狗9.png" />
</td>
<td rowspan="2">
<img src="img/酷狗11.png" />
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2">
<img src="img/酷狗12.png" />
</td>
</tr>
<tr>
<td rowspan="3">
<img src="img/酷狗10.png" />
</td>
<td rowspan="3">
<img src="img/酷狗15.png" />
</td>
</tr>
<tr>
<td rowspan="2">
<img src="img/酷狗13.png" />
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗14.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗16.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗14.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗17.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗14.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗18.png" />
</td>
</tr>
<tr>
<td colspan="6">
<img src="img/酷狗14.png" />
</td>
</tr>
</table>
</div>
<div>
<h1>友情链接</h1>
</div>
<div>
<table class="later">
<tr>
<td>汽车论坛</td>
<td>IT之家</td>
<td>365音乐网</td>
<td>软件下载</td>
<td>漫漫看漫画</td>
<td>手机游戏</td>
</tr>
<tr>
<td>豌豆荚</td>
<td>5sing众筹</td>
<td>智能电视网</td>
<td>QQ音乐</td>
<td>酷我音乐</td>
<td>易车</td>
</tr>
</table>
</div>
<div class="ultmate">
<table class="ziti">
<tr>
<td>关于酷狗</td>
<td>监督举报</td>
<td>商务合作</td>
<td>广告服务</td>
<td>投诉指引</td>
<td>隐私政策</td>
<td>儿童隐私政策</td>
<td>用户服务协议</td>
<td>酷狗音乐人</td>
<td>隐私政策</td>
<td>酷狗星耀推歌</td>
<td>招聘信息</td>
<td>客服中心</td>
<td>用户体验提升计划</td>
</tr>
</table>
<p class="ziti1">
我们致力于推动网络正版音乐发展，相关版权合作请联系copyrights@kugou.com
</p>
<p class="ziti2">
信息网络传播视听节目许可证1910564增值电信业务经营许可证粤B2-20060339粤ICP备09017694号
</p>
<p class="ziti3">
广播电视节目制作经营许可证(粤)字第01270号 营业性演出许可证穗天演440106026营业执照
</p>
<p class="ziti4">
穰公网监备案证第44010650010167互联网药品信息服务资格证编号(粤) -非经营性-2012-0018 粤公网安备44010602000141号
</p>
<p class="ziti5">
互联网不良信息举报中心：www.12377.cn 酷狗不良信息举报邮箱：jubao_music@kugou.net 举报电话：020-22043248（值班时间：9:30-18:30） 客服邮箱：
</p>
<p class="ziti6">
kefu@kugou.net
</p>
<p class="ziti7">
Copyright c 2004-2021 KuGou-Inc.All Rights Reserved
</p>
</div>
</body>
</html>
注册.html:用来酷狗的注册：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>酷狗注册信息登录</title>
<link type="text/css" rel="stylesheet" href="css/酷狗.css" />
</head>
<body>
<div class="zhuce1">
<h3 align="center">酷狗注册界面</h3>
<hr />
<form>
姓 名：<input type="text" id="xixi" /><br />
性 别：<input type="radio" id="xixi" name="sex" checked="checked" value="male" />男
<input type="radio" id="xixi" name="sex" value="female" />女<br />
出 生 日期：<input type="text" id="xixi"/>年<input type="text" id="xixi" />月<br />
学 历：<select name="card"/>
<option value="请选择" id="xixi">小学</option>
<option>初中</option>
<option>高中</option>
<option>本科</option>
<option>研究生</option>
<option>博士</option>
</select>
<br />
身 高：<input type="text" id="xixi" />cm<br />
手 机 号：<input type="text" id="xixi"/><br />
密 码：<input type="password" id="xixi"/><br />
</form>
<button onclick="location='登录.html'" id="zhuce">注册</button>
<hr />
<h2>注意！注册即提交信息！</h2>
</div>
<div>
<img src="" />
</div>
</body>
</html>
登录.html:用来注册之后酷狗的登录（有扫码以及账号登录）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>酷狗登录界面</title>
<link type="text/css" rel="stylesheet" href="css/酷狗.css" />
</head>
<body>
<div class="phone">
<button onclick="location='登录1.html'">手机登录在这里</button>
</div>
<div>
<img src="img/酷狗19.png" />
</div>
</body>
</html>
登录1.html：用来登录并且跳转到酷狗.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>酷狗登录</title>
<link type="text/css" rel="stylesheet" href="css/酷狗.css" />
</head>
<body>
<div class="zhuce1">
<h3 align="center">酷狗手机号登录界面</h3>
<hr />
<form>
手 机 号：<input type="text" id="xixi"/><br />
密 码：<input type="password" id="xixi"/><br />
</form>
<button onclick="location='酷狗.html'" id="denglu">登录</button>
<hr />
<h2>注意！注册即提交信息！</h2>
</div>
<div>
<img src="" />
</div>
</body>
</html>2.CSS代码
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
li,ol,ul{
list-style: none;
}
div{
display: block;
}
a{
text-decoration: none;
}
.header{
width: 1000px;
margin: 0 auto;
height: 78px;
}
.header-left{
height: 78px;
}
.header-left img{
margin-top: 8px;
}
.header-left input{
width: 249px;
height: 34px;
position: absolute;
top: 20px;
padding: 5px 0;
margin-left: 20px;
border: 1px solid black;
}
.header-right{
float: right;
height: 78px;
margin-top: -47px;
}
.header-right ul{
height: 21px;
}
.header-right li{
float: left;
padding: 0 15px;
}
.header-right a{
color:#777;
font-size: 13px;
}
.header-right .loginBtn{
float: right;
display: block;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
background: #169A;
color: white;
border-left:1px solid black;
}
.menu{
height: 55px;
background: #2c323b;
}
.menu-content{
width: 1000px;
margin: 0 auto;
}
.menu .menu-content .menu-left > li{
float: left;
}
.menu .menu-left li a{
color: white;
display: block;
padding: 0 30px;
height: 55px;
text-align: center;
line-height: 55px;
}
.menu .menu-left > li a.active{
background: #0c8ed9;
}
.menu .menu-left > li a:hover{
background: #0c8ed9;
}
.menu .menu-left > li:last-child:hover{
background: #0c8ed9;
}
.menu .menu-left > li:last-child:hover .sub-menu{
display: block;
}
.menu .menu-left .sub-menu{
display: none;
background: #252b34;
}
.menu .menu-left .sub-menu li{
background: #252b34;
}
.menu .menu-left .sub-menu li:hover{
background: #2d343d;
}
.menu .menu-left .sub-menu li a{
height: 37px;
line-height: 37px;
}
.fl{
float: left;
}
.menu-right li{
float: left;
line-height: 55px;
margin-left: 15px;
}
.menu-right li a{
color: #bbb;
font-size: 13px;
padding-left:20px;
}
.fr{
float: right;
margin-top: -30px;
}
*{
margin: 0;
padding: 0;
}
.box1{
width: 1000px;
height: 435px;
margin: 0 auto;
overflow: hidden;
}
.photo{
width: 4000px;
height: 435px;
animation: run 3s steps(4) infinite;
}
.photo >img{
float: left;
}
@keyframes run{
from{
margin-left: 0;
}
to{
margin-left: -4000px;
}
}
.load{
background: black;
height: 40px;
}
.load img{
height: 35px;
margin-left: 430px;
}
.character-left{
margin-left: 400px;
}
h6{
margin-left: 400px;
margin-top: 5px;
}
tr{
width: 20px;
height: 30px;
}
.sing{
margin-left: 200px;
text-align: center;
}
.ultmate{
background: black;
height: 400px;
color: white;
}
.ziti{
border-spacing: 15px;
}
.ziti1{
margin-left: 300px;
}
.ziti2{
margin-left: 250px;
}
.ziti3{
margin-left: 280px;
}
.ziti4{
margin-left: 200px;
}
.ziti5{
margin-left: 150px;
}
.ziti6{
margin-left: 600px;
}
.ziti7{
margin-left: 450px;
}
h1{
margin-left: 200px;
color: cornflowerblue;
}
.later{
padding-left: 110px;
border-spacing: 100px 10px;
}
#xixi{
border-radius: 5px;
height: 20px;
width: 100px;
}
.zhuce1{
background-color: #7FFFD4;
width: 400px;
}
.phone{
margin-left: 280px;
margin-top: 20px;
}
四、项目总结
问题
- 在文字设置的时候，出现了无法将文字的浮动进行列表的形式，最后是设置文字的div为block；
- 文字那块右边的无法与前面的文字在同一行上面，最后设置了margin-bottom为负数，将文字处于一行的位置；
- 在设置图片为table的时候，图片的行与列没有设置对，导致图片的排版顺序都混乱了，这块确实是一个难的问题，因为表格的多少以及合并的数量导致表格最后会自动增加行数以及增加列数，这块只能靠自己细心的设置；
- 最下面的文字部分，如果不设置margin-left的话，最后会导致页面看其起来不是很整洁，不是很整齐，这块一次一次设置margin-left的px来将字体看起来整齐；
- 当注册的时候，选择男女那块需要设置一个select那块的名字，如果不设置的话，就算设置了单选按钮，但是依然不是实现单选按钮；
应用知识
Html:
- 标题：h1-h6
- 段落：p
- 表格：table、tr、td
- 形式：form、input、select、radio、checkbox、button
- 列表：ul、li、ol
- Img、br
- Div
- Transmination（轮播）
CSS:
- 选择器（id、class、hover）
- 格式：width、height、margin、padding、border、float、position
- Font、text、background、left、top、bottom
个人收获
- 让我更加加深了对div的认识，可以更好的做出一个界面，我觉得table还是比较好用哒，但是不好交互；
- 空想是没有用哒，只要肯动手做，不管做出什么界面，都是自己努力的结果，要坚持，如果没有耐心，就做好一个东西。
1301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
