最近的小开发

最近做的一些事

上周boss交给我公司订单页面开发的任务，做了一周初具成效。产品经理建议我自己做网页的时候参考着别的网页的设计，因为我自己的设计能力肯定是没那么优秀的，特别是我的审美还比较直男23333模仿别人的设计能给我提高很多效率。

下面放图：（页面模仿某网页制作，仅私人娱乐，不会用作商用，给公司名字打了码，订单页面为虚拟信息）

首页

首页部分动画效果

产品订单页面

首页的图片轮播是自己没有做过的东西，这是第一次做，查了很多资料，没有采用js或者jq的方法，而是直接用css实现，下面放代码：

/*css代码部分*/
div#pic_container{
	position: absolute;
	width: 1300px;
	height: 548px;
	top: 20%;
	left: 0%;
	overflow: hidden;
	z-index: -1;
	max-width: 100%;
}
div#piccc{
	/*---设置总的图片宽度--通过位移来达到轮播效果----*/
	position: absolute;
	/*---修改图片数量的话需要修改下面的动画参数*/
	width: calc(1300px * 3);
}
#piccc img{
	float: left;
	width: 1300px;
	height: 548px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	max-width: 100%;
}
div.play{
	animation: switch 8s ease-out infinite alternate;
}
@keyframes switch{
	/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
	0%, 25%{
		margin-left: 0;
	}
	35%, 60%{
		margin-left: -1300px;
	}
	70%, 100%{
		margin-left: -2600px;
	}
}#piccc img:hover, #piccc:hover{
	/*animation-play-state: paused;*/
	cursor: pointer;
	opacity: 1.0;
	filter: alpha(opacity=100);
}

<!--html代码部分-->
<div id="pic_container">
		<div id="piccc" class="play">
			<img src="pic/headpic.jpg">
			<img src="pic/headpic2.jpg">
			<img src="pic/headpic3.jpg">
		</div>
	</div>

但这种方法其实有点麻烦，因为对于图片的参数要求比较高，如果添加或减少图片的数量，都会对代码有改动。

网页还有几个待解决的问题：

• 在不同的浏览器或显示屏上打开会有错位（很要命的）
• 浏览器页面只有在100%大小才能正常显示
• 图片轮播的第一张图和最后一张图会被连续执行两次，造成时间上的叠加
• 整体网页其他功能的增加
• 我无可拯救的直男审美

心得：明天开始是我在公司实习的一周倒计时，一个半月的时间在公司收获不小，希望能把这个网页再完善一些，虽然做不到上线，但也是给自己累计开发经验，还有boss说他会找人给我讲讲后端的一些事情，期待。