前端静态页面基本开发思路(二)

简介: 由于第一篇的反响不错,所以今天抽空写写前端静态页面基本开发思路(二)第一篇开发思路直通车→前端静态页面基本开发思路(一)现在的静态页面的设计基本上都涉及到了轮播图,而且一般都是顶部菜单栏过了就是轮播图的区域,比如小米官网,京东官网等,所以今天我们就从轮播图的实现开始讲

轮播图的实现

对于初学者来说,轮播图可能是在学习js基础的时候了解的,这里再讲一下轮播图的实现原理:

①弄几张图,每张图的宽高都一样

②画一个框,轮播图的框,图标在框里面

③把每张图的宽度计算出来,加上每张图之间的间距

京东轮播图案例:

caf3b987daaa4d10888f0f18f13fc216.png

④拿到每张图的元素,就是通过getelementby…拿到

⑤定时器,用于图片的移动

⑥在轮播图滑到最后一张图时切换第一张图实现循环轮播


轮播图的大致思路就是如此,但现在我们开发一般都是用插件,那我们可以联想到使用bootstrap插件对吧

所以我们可以引用bootstrap插件就可以使用了

这是第一种思路,即使用bootstrap插件

第二种思路是使用swiper插件,swiper插件是一款专注于轮播图的插件,直接导入把图片换上就可以用了


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


商品展现区域实现

什么是商品展现区域,看下图:

47b48d2e19fe4f4891ce4a07803b2b95.png截图来自京东,在其他购物类的网站也都有这个布局,用于展示商品

要实现这种布局,最好的思路只有一个,就是用栅格布局,也就是element的layout布局,在学习bootstrap的时候应该会学到这个布局,这里就不过阐述了

简单的栅格布局,加上每一行和每一列的边距,就可以实现这个页面

dd0cb7193c514e968ce2a8b810148036.png

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

侧边栏的广告实现

也就是下面的这种布局:

7dd6c84a3608403caf62a7703714ebe1.png

你会发现这种广告无论你怎么移动屏幕,他都固定在那里,其实这种一个定位

需要了解四种定位:相对定位,绝对定位,粘滞定位和固定定位

这种广告的定位其实就是一种固定地位,position:fixed,是相对于窗口来定位的,只需要在css里设置样式,定位在合适的地方就可以了

底部菜单栏如何实现

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

例如bootstrap的底部菜单

99bd41992ccf4ff19d3f6494e6e08bcb.png

如果是最上面的一栏,也就是github开头的那一栏,实现的方式有很多种,简单讲几个思路

①栅格布局

②表格

③列表+向左浮动

④纯div+行内样式

主要是这四种思路


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


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


相关文章
|
13天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
38 4
|
1月前
|
负载均衡 前端开发 JavaScript
前端研发链路之开发
本文首发于微信公众号“前端徐徐”,作者徐徐。文章介绍了前端研发链路中的开发部分,重点探讨了开发服务器(dev-server)、热更新(hot-reload)、数据模拟(mock)和代理(proxy)等关键技术,帮助开发者理解其基本原理和应用场景,提升开发效率和代码质量。
36 2
前端研发链路之开发
|
1月前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
31 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
|
1月前
|
前端开发 JavaScript 开发者
前端angularJs的开发过程
前端angularJs的开发过程
19 1
|
2月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
1月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
26 0
|
2月前
|
开发框架 前端开发 JavaScript
【博客开发】前端应用开发环境搭建(可复用)
【博客开发】前端应用开发环境搭建(可复用)
51 5
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
2月前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
3月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
40 0