由于第一篇的反响不错,所以今天抽空写写前端静态页面基本开发思路(二)
第一篇开发思路直通车→前端静态页面基本开发思路(一)
现在的静态页面的设计基本上都涉及到了轮播图,而且一般都是顶部菜单栏过了就是轮播图的区域,比如小米官网,京东官网等,所以今天我们就从轮播图的实现开始讲
轮播图的实现
对于初学者来说,轮播图可能是在学习js基础的时候了解的,这里再讲一下轮播图的实现原理:
①弄几张图,每张图的宽高都一样
②画一个框,轮播图的框,图标在框里面
③把每张图的宽度计算出来,加上每张图之间的间距
京东轮播图案例:
④拿到每张图的元素,就是通过getelementby…拿到
⑤定时器,用于图片的移动
⑥在轮播图滑到最后一张图时切换第一张图实现循环轮播
轮播图的大致思路就是如此,但现在我们开发一般都是用插件,那我们可以联想到使用bootstrap插件对吧
所以我们可以引用bootstrap插件就可以使用了
这是第一种思路,即使用bootstrap插件
第二种思路是使用swiper插件,swiper插件是一款专注于轮播图的插件,直接导入把图片换上就可以用了
这是两种轮播图最常用的开发思路
商品展现区域实现
什么是商品展现区域,看下图:
截图来自京东,在其他购物类的网站也都有这个布局,用于展示商品
要实现这种布局,最好的思路只有一个,就是用栅格布局,也就是element的layout布局,在学习bootstrap的时候应该会学到这个布局,这里就不过阐述了
简单的栅格布局,加上每一行和每一列的边距,就可以实现这个页面
如果不了解栅格布局的可能会想着使用表格,我个人建议是不要使用表格,有更简单和更易于维护的栅格布局是最好的
侧边栏的广告实现
也就是下面的这种布局:
你会发现这种广告无论你怎么移动屏幕,他都固定在那里,其实这种一个定位
需要了解四种定位:相对定位,绝对定位,粘滞定位和固定定位
这种广告的定位其实就是一种固定地位,position:fixed,是相对于窗口来定位的,只需要在css里设置样式,定位在合适的地方就可以了
底部菜单栏如何实现
什么是底部菜单栏呢,就是在底部放了很多友情链接,兄弟网站还有备案信息的区域
例如bootstrap的底部菜单
如果是最上面的一栏,也就是github开头的那一栏,实现的方式有很多种,简单讲几个思路
①栅格布局
②表格
③列表+向左浮动
④纯div+行内样式
…
主要是这四种思路
最下面的几句话就是行内样式span或者div然后br换行了,一般底部菜单栏就链接和几句介绍,所以实现起来是比较简单的
未来几日会继续更新前端静态页面的基本开发思路,未完待续…