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.搜集相关素材

字体 图标 图片等

第一天结束

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/234221.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flask 实现Token认证机制

在Flask框架中,实现Token认证机制并不是一件复杂的事情。除了使用官方提供的flask_httpauth模块或者第三方模块flask-jwt,我们还可以考虑自己实现一个简易版的Token认证工具。自定义Token认证机制的本质是生成一个令牌(Token)&…

4.5-容器之间的link

我们在实际项目中可能会有种需求,假如我们有个后台项目,它要访问数据库,比如MySQL,它想要访问数据库,就需要数据库的ip和端口。如果有两个容器,一个容器启动的是数据库的MySQL服务,另一个容器启…

二叉树题目:祖父结点值为偶数的结点和

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题:祖父结点值为偶数的结点和 出处:1315. 祖父结点值为偶数的结点和 难度 5 级 题目描述 要求 给定二…

13:kotlin类和对象 -- 属性(Properties)

定义属性 类属性可使用var和val定义 class Address {var name: String "Holmes, Sherlock"var street: String "Baker"var city: String "London"var state: String? nullvar zip: String "123456" }属性使用 fun copyAddres…

【MySQL:从零开始练级】环境安装与基础认识

hello大家好,失踪人口回归,今天开始新专栏MySQL:从零开始练级,今天给大家分享MySQL的环境安装与基础认识,希望大家能有所学习收获。 目录 1️⃣ Centos 7环境下安装 2️⃣什么是数据库 3️⃣服务器、数据库、表关系 4️⃣MySQ…

轻盈未来:气膜建筑的绿色时尚

随着可持续发展理念的日益深入人心,建筑行业也在不断追求绿色、环保的设计与施工方案。气膜建筑,作为一种创新而轻盈的设计理念,正在走在绿色时尚的前沿。本文将探讨气膜建筑的独特之处以及其如何与环保理念相结合,领航着未来建筑…

Kubernetes(K8s)_15_CNI

Kubernetes(K8s)_15_CNI CNI网络模型UnderlayMAC VLANIP VLANDirect Route OverlayVXLAN CNI插件FlannelCalico CNI配置内置实现 CNI CNI(Container Network Interface): 实现容器网络连接的规范 Kubernetes将网络通信可分为: Pod内容器、Pod、Pod与Se…

动态:class和:style绑定

1. 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. 动态class绑定 :class等号后的变量值 可以是字符串 :class等号后 可以是对象 :class等号后 可以是数组 3. 动态style绑定 :style"{ color: myPinkColor, fontS…

mybatis快速入门(基于Mapper接口编程)

1、准备数据模型,建库建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSERT INTO t_emp(emp_name,emp_salary) VALUES("tom&qu…

C++ day43 最后一块石头的重量 目标和 一和零

题目1&#xff1a;1049 最后一块石头的重量 题目链接&#xff1a;最后一块石头的重量 对题目的理解 整数数组stone[i]表示第i块石头的重量&#xff0c;每次从中选出任意两块石头(x<y)粉碎 如果两块石头重量相等&#xff0c;就会被完全粉碎&#xff1b;如果不等&#xff…

智能井盖位移报警器效果一览,感知井盖异常

井盖位移是指井盖在受到外力作用下产生的位置移动。这种现象通常发生在道路颠簸、车流量较大或地下管道受压较大的区域&#xff0c;当然也不排除会出现在一些角落内。当井盖发生位移或倾斜时&#xff0c;不仅会影响城市内道路的通行&#xff0c;还会给行人和车辆带来安全隐患。…

设计模式详解(三):工厂方法

目录导航 抽象工厂及其作用工厂方法的好处工厂方法的实现关系图实现步骤 工厂方法的适用场景工厂方法举例 抽象工厂及其作用 工厂方法是一种创建型设计模式。所谓创建型设计模式是说针对创建对象方面的设计模式。在面向对象的编程语言里&#xff0c;我们通过对象间的相互协作&…