当前位置: 首页 > news >正文

37.从0到上线三天搭建个人网站(第一天)

点赞收藏加关注,你也能住大别墅!

挑战三天搭建个人网站 从0到上线

一、项目的主要功能

1.作为自己在网上的一个工作室。
2.发帖
3.展示个人项目连接
4.介绍自己(没准儿还能接点活儿)

二、UI风格参考

在这里插入图片描述

三、技术选型

1.前端:

使用uniapp开发H5页面、vue3
设计基准屏幕ipnone8 width:375px

2.后端:

使用unicloud的云开发环境

四、项目创建

1.用HbuilderX创建H5项目
2.创建云空间
3连接云空间,启动项目

五、项目初始化

1.删除项目默认代码
2.色彩规范

bgc:#F4F2E5
font-color:#2B2A24
form-bgc:#DED0B9
border-color:#CDB9A3

3.创建公共CSS文件public.css并创建基础CSS文件base.css

base.css

.content{font-size: 32rpx;
}

public.css

@bgc:#F4F2E5;
@font-color:#2B2A24;
@form-bgc:#DED0B9;
@border-color:#CDB9A3;

根据开发需要后续再添加别的样式

4.修改HbuilderX的配置,px自动转化rpx

在这里插入图片描述
因为我是按宽375设计的界面所以1px就等于375/750=0.5

5.初始化pages.json

“navigationStyle”:“custom” ---- 去掉默认顶部导航栏
“rpxCalcMaxDeviceWidth”:1080, ---- rpx支持的最大宽度
“rpxCalcBaseDeviceWidth”:375, ---- 设计的基准宽度
“maxWidth”:1080 ---- 页面显示的最大宽度,超出部分留白

{"pages": [{"path": "pages/index/index","style": {"navigationStyle":"custom"}}],"globalStyle": {"rpxCalcMaxDeviceWidth":1080,"rpxCalcBaseDeviceWidth":375,"maxWidth":1080},"uniIdRouter": {}
}
5.测试初始化的效果是否正常,如果正常,那么git init 并上传到远程仓库,我的分支fromPC

https://gitee.com/endingcode/mypage.git

6.搜集相关素材

字体 图标 图片等

第一天结束

相关文章:

  • qt使用wimlib-imagex,做windows系统备份还原
  • 人工智能时代AIGC绘画实战
  • 西南科技大学模拟电子技术实验六(BJT电压串联负反馈放大电路)预习报告
  • Shein、Temu拓荒背后,中国快递业“卷”向海外
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页
  • FPGA串口接收解帧、并逐帧发送有效数据——1
  • 字符串和内存函数(1)
  • 基于SSM框架的《超市订单管理系统》Web项目开发(第五天)供应商管理,增删改查
  • 【漏洞复现】速达软件存在任意文件上传
  • 《内蒙古自治区“十四五”能源发展规划》明确提出,重点打造()、 阿拉善盟和内蒙古东部的通辽市等地区千万千瓦级风电基地。
  • 虹科案例 | OPC UA SDK快速扩展VIMANA智能制造软件连接性
  • 代码随想录刷题题Day5
  • ultralytics yolo图像分类训练案例;pytorch自有数据集图像分类案例
  • SpringBoot整合MongoDB
  • 使用com组件编辑word
  • [case10]使用RSQL实现端到端的动态查询
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • angular2开源库收集
  • CAP 一致性协议及应用解析
  • Java,console输出实时的转向GUI textbox
  • nginx 配置多 域名 + 多 https
  • React as a UI Runtime(五、列表)
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • SQLServer之创建数据库快照
  • vue:响应原理
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • vue--为什么data属性必须是一个函数
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 记录一下第一次使用npm
  • 记一次删除Git记录中的大文件的过程
  • 离散点最小(凸)包围边界查找
  • 数据科学 第 3 章 11 字符串处理
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • kubernetes资源对象--ingress
  • ​渐进式Web应用PWA的未来
  • # 20155222 2016-2017-2 《Java程序设计》第5周学习总结
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • #NOIP 2014# day.1 T2 联合权值
  • #控制台大学课堂点名问题_课堂随机点名
  • (007)XHTML文档之标题——h1~h6
  • (1)Android开发优化---------UI优化
  • (3)nginx 配置(nginx.conf)
  • (NSDate) 时间 (time )比较
  • (Redis使用系列) Springboot 使用Redis+Session实现Session共享 ,简单的单点登录 五
  • (力扣题库)跳跃游戏II(c++)
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • .CSS-hover 的解释
  • .form文件_一篇文章学会文件上传
  • .NET Core 中插件式开发实现
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .NET 材料检测系统崩溃分析
  • .NET 分布式技术比较
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景