前端静态页面基本开发思路（二）

由于第一篇的反响不错，所以今天抽空写写前端静态页面基本开发思路（二）
第一篇开发思路直通车→前端静态页面基本开发思路（一）

现在的静态页面的设计基本上都涉及到了轮播图，而且一般都是顶部菜单栏过了就是轮播图的区域，比如小米官网，京东官网等，所以今天我们就从轮播图的实现开始讲

轮播图的实现

对于初学者来说，轮播图可能是在学习js基础的时候了解的，这里再讲一下轮播图的实现原理：
①弄几张图，每张图的宽高都一样
②画一个框，轮播图的框，图标在框里面
③把每张图的宽度计算出来，加上每张图之间的间距
京东轮播图案例：

④拿到每张图的元素，就是通过getelementby…拿到
⑤定时器，用于图片的移动
⑥在轮播图滑到最后一张图时切换第一张图实现循环轮播

轮播图的大致思路就是如此，但现在我们开发一般都是用插件，那我们可以联想到使用bootstrap插件对吧
所以我们可以引用bootstrap插件就可以使用了
这是第一种思路，即使用bootstrap插件
第二种思路是使用swiper插件，swiper插件是一款专注于轮播图的插件，直接导入把图片换上就可以用了

这是两种轮播图最常用的开发思路

商品展现区域实现

什么是商品展现区域，看下图：

截图来自京东，在其他购物类的网站也都有这个布局，用于展示商品
要实现这种布局，最好的思路只有一个，就是用栅格布局，也就是element的layout布局，在学习bootstrap的时候应该会学到这个布局，这里就不过阐述了
简单的栅格布局，加上每一行和每一列的边距，就可以实现这个页面

如果不了解栅格布局的可能会想着使用表格，我个人建议是不要使用表格，有更简单和更易于维护的栅格布局是最好的

侧边栏的广告实现

也就是下面的这种布局：

你会发现这种广告无论你怎么移动屏幕，他都固定在那里，其实这种一个定位
需要了解四种定位：相对定位，绝对定位，粘滞定位和固定定位
这种广告的定位其实就是一种固定地位，position:fixed，是相对于窗口来定位的，只需要在css里设置样式，定位在合适的地方就可以了

底部菜单栏如何实现

什么是底部菜单栏呢，就是在底部放了很多友情链接，兄弟网站还有备案信息的区域
例如bootstrap的底部菜单

如果是最上面的一栏，也就是github开头的那一栏，实现的方式有很多种，简单讲几个思路
①栅格布局
②表格
③列表+向左浮动
④纯div+行内样式
…
主要是这四种思路

最下面的几句话就是行内样式span或者div然后br换行了，一般底部菜单栏就链接和几句介绍，所以实现起来是比较简单的

未来几日会继续更新前端静态页面的基本开发思路，未完待续…