写个人项目的第四天

今天放弃了响应式布局，图片无法满足各个阶段的自适应大小

所以只做了正常尺寸和手机尺寸的布局：

@media (min-width: 0px) and (max-width: 700px){
	.mainCarousel,.mainFood,.mainRight{
		
		width: 100%;
	}
	.mainCarousel img{
		height: 100%;
	}
	.mainCarouselImg{
		position: relative;
		top: 20px;
	}
}
@media (min-width: 700px) {
	.mainCarousel,.mainFood{
		width: 820px;
	}
	.mainRight{
		position: relative;
		left: 820px;
		top: -100%;
		width: 380px;
	}
	.mainBotton{
		position: relative;
		left: 20px;
	}
}

另外查找了如何不让轮播图遮挡小菜单，设置置顶：

.bar{
	z-index: 999;
}

加了一些热门笔记的图片，还没做完，另外记住咋写长度超过时怎么设置滚轮哦：

.mainRight{
	overflow: scroll;
}

今天成果如下：