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

简介: 有不少刚入门前端的同学经常问我前端布局的问题,总是跟我说在面对学校布置的作业或者想自己搭建博客的时候不知道怎么下手,不知道怎么去写静态的页面,每当我解决了一个又一个同学的问题的时候,又有新的同学来问,故思来想去,还是出一篇博客来讲一下怎么去开发前端静态页面,开发的基本思路是什么

一个页面包括几个区域


如果是用元素html写,那就包括head头,body身体和footer底部三个部分,如果是用框架比如vue去写,那就都包括在template里

页面主要分为什么?

可点击的和不可点击的,比如你中间是页面,有可以跳转的a标签,就是可以点击的,如果是主要内容两边的空白,那自然是不可点击的,通俗来讲,整个页面的关键动作只有点击


一般那些页面元素是需要点击的?

比如轮播图,比如下拉框,比如按钮,这些都是要点击的

如果是看见网页上方底部菜单栏,有什么实现的思路?

我们先分析要实现的布局:菜单栏位于中间,我们先用一个大框宽度百分百,再在中间写一个框去包我们要写的内容,然后在这个中间的框去写我们需要的按钮,我们看小米官网的布局,红色的就是大框,蓝色的就是中间我们要写内容的框,我们再去中间的框去细分

2ca3b2a8997244438fc137bd00ad02cb.png实现的思路:

①可以写个列表,也就是ul包住li,我相信很多人刚学的时候都是这样操作的,ul包住li后通过向左向右浮动去实现布局,如果过了初学期,博主不建议这样写,因为有更好的实现方案

②可以写个表格,在表格里通过插槽写按钮,再调整一些表格的宽度,表格的间距

③用栅格布局,在bootstrap叫栅格布局,在element中叫layout布局,博主推荐使用这种方式

这是最基本的三种实现方式,推荐使用第三种方式


如果你学过bootstrap,那或许引入bootstrap中的组件是最好的方式,用vue写的可以引用element的组件

图标哪里找?

常用的图标可以去阿里的iconfont里找,很方便

图标直通车

4aabffbd60334a948747d8f0bba5c255.png

如果是自己仿写京东页面,小米页面去练习的话,可以直接扣官网的图

方法如下

①按ctrl+shift+c,把鼠标移入要扣的图标,然后复制svg,放到自己新建的文本文档

②把后缀txt改成svg再放进自己的项目里就可以用

ee7f849b8acf433b90bbe6faf461939d.png

按钮的实现思路有哪些?

按钮是我们的页面最常见的元素,可以说整个页面除了图片就是按钮,甚至图片本身也是一个跳转到另外页面的按钮,a标签也是个按钮,点击可以跳转到想去的页面,那么按钮的实现思路是怎么样的呢?

我们常见的文字按钮即text类型可以使用a标签进行跳转,如果是点击图片,那我们可以在图片外面放一个div,在div中绑定一个click函数,然后我们在script中获取到这个div,然后用location、navigate、back等方式去实现跳转

我们也可以通过按钮去实现下拉框,滑动图片(轮播图)等操作

下面示例实现这个操作的伪代码


<div id='1' class='class' 绑定click>
<script>
clcik函数中{
//用id或者class获取div元素
let div = document.getelement...(1)或者(class)
//为了养成良好的习惯,我们通常会log一下看有没有获取
console.log(div)
//对拿到的元素进行操作
div....
}
</script>

少用行内样式

在开发的过程中,我们尽量少用行内样式,一是为了template中的代码规范,二是便于在css中维护样式,推荐学习scss预编译语言,嵌套属性是一个很好的工具


样式单位要规范

小白在修改宽度高度和边距的过程中,很容易犯的一个错误就是像素px和百分比%单位混用,这样的话会造成布局变形,所以在写的时候一定要注意样式的单位

什么时候用px单位,什么时候用百分比单位?

如果是要写适应性就用百分比单位,如果是要固定的页面就px单位

什么是适应性,如何实现适应性?

适应性就是会随着你的窗口大小,页面会自动调整,比如有些电脑是27寸,有些事25寸,有些分辨率1920X1080,有些是1680X1050等,所以我们在开发的时候一定要兼顾到各种情况,让使用者有好的感受

那如何去实现适应呢?

上面说的百分比单位是一个不错的实现方式,还有媒体布局,rem单位等


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



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