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

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

轮播图的实现

对于初学者来说,轮播图可能是在学习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换行了,一般底部菜单栏就链接和几句介绍,所以实现起来是比较简单的


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


相关文章
|
8天前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
12天前
|
开发框架 前端开发 JavaScript
【博客开发】前端应用开发环境搭建(可复用)
【博客开发】前端应用开发环境搭建(可复用)
|
16天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
2月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
30 0
|
2月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
28 0
|
2月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
34 0
|
2月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
45 0
|
2月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
32 0
|
2月前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
76 0
|
2月前
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
52 0
下一篇
无影云桌面