网页Cytus Ⅱ的制作

整体布局

单栏布局，整体按顺序分为以下几个板块：

页首下载、新闻表单、角色轮播图、视频、页尾以及侧边栏

要尽可能把自己的所有知识用上，所以可能会有和原网页写法不同，但基本样式差不多

页首下载

背景图片

.head {
	width: 100%;
	height: 960px;
	background: url(../image/headimg.jpg) no-repeat;
	background-position: center top;
}

左上角的logo

在html中直接使用img标签

.head .logo {
	margin-left: 1%;
	margin-top: 1%;
}

下载盒子

这里直接使用了flex布局中的justify-content属性，用于两个链接的居中

.head .download {
	display: flex;
	margin-top: 640px;
	justify-content: center;
	width: 100%;
	height: 88px;
}

双设备下载链接

苹果和安卓缩略图使用icomoon的字体图标，设定圆角实线白边框，然后稍微调整一下链接位置

.head .download .iphone {
	width: 254px;
	height: 63px;
	margin-right: 152px;
	font-size: 26px;
	color: #FFFFFF;
	border: 1px #FFFFFF solid;
	border-radius: 5px;
	text-align: center;
	line-height: 63px;
}

.head .download .android {
	width: 254px;
	height: 63px;
	left: 50%;
	font-size: 26px;
	color: #FFFFFF;
	border: 1px #FFFFFF solid;
	border-radius: 5px;
	text-align: center;
	line-height: 63px;
}

页首下载板块完成

新闻表

新闻框

新闻框的制作似乎要用到JS Dom节点操作属性，之后学习了js后进行优化，现在是静态实现

精灵图的使用

精灵图的使用可以减少网页所加载的图片数量，优化了访问速度，精灵图的使用也就是background-position的使用，一般会将精灵图在css中单独写个类选择器，在html标签要使用的时候加上选择器名称并设置其background-position属性即可。

轮播图展示

参考实现，依旧是js的代码，虽然暂时写了出来，但是不能够完全理解。

以下是参考的例子

	
		
		
		
	
	
		

			

			

			

			

			

			

			
<
			
>
			

				

					

					

					

					

					

					

				
			
		
		
		
	

与原官网相比增加了左右按钮

角色展示

角色展示同样是使用和上面相同的js轮播图，添加了在点击角色名字时文字颜色会改变

点击出现人物头像同时字体下移未实现

视频中心

视频中心的弹出框仅仅是写出了样式，并未完全实现

参考及使用的链接

音乐世界Cytus II-官方网站

饥人谷 JS Bin

五分钟掌握flex布局

精灵图的使用

Web网站轮播图教程（系统讲解）