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.mzph.cn/news/183569.shtml

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

相关文章

设计规则:模块化的力量

这是一本比较冷门的书**《设计规则:模块化的力量》**,虽然豆瓣上只有58个评价,但是确实能学到很多东西。 这本书对我非常深远。不是是投资,创业,还是其他领域,模块化思想都能帮上你。这本书告诉我们生万物…

数据结构中的二分查找(折半查找)

二分法:顾名思义,把问题一分为2的处理,是一种常见的搜索算法,用于在有序数组或这有序列表中查找指定元素的位置,它的思想是将待搜索的区间不断二分,然后比较目标值与中间元素的大小关系,然后确定…

第八天:信息打点-系统端口CDN负载均衡防火墙

信息打点-系统篇&端口扫描&CDN服务&负载均衡&WAF防火墙 一、知识点 1、获取网络信息-服务器厂商: 阿里云,腾讯云,机房内部等。 网络架构: 内外网环境。 2、获取服务信息-应用协议-内网资产: FTP…

OD机考真题搜集:矩阵中非1的元素个数

题目 存在一个m*n的二维数组,其成员取值范围为0,1,2。其中值为1的元素具备同化特性,每经过1S,将上下左右值为0的元素同化为1。而值为2的元素,免疫同化。将数组所有成员随机初始化为0或2,再将矩阵的[0,0]元素修改成1,在经过足够长的时间后求矩阵中有多少个元素是0或2(即…

芯片及设计制造 - 小记

文章目录 关于芯片制造材料 芯片分类ASICASSPSoCFPGA可编程SoC或SoC FPGA微处理器(μP 或 MPU)微控制器(μC 或 MCU) 芯片设计和制造过程:需求 & 方案架构设计架构验证形式验证/属性检查 前端设计RTL 设计逻辑综合…

Making Reconstruction-based Method Great Again for Video Anomaly Detection

Making Reconstruction-based Method Great Again for Video Anomaly Detection 文章信息: 发表于ICDM 2022(CCF B会议) 原文地址:https://arxiv.org/abs/2301.12048 代码地址:https://github.com/wyzjack/MRMGA4VAD…

Android : Handler -简单应用

主线程才能操作UI界面 实现子线程处理主线程UI MainActivity.java package com.example.myhandler;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint; import android.os.Bundle; import andr…

layui提示框没有渲染bug解决

bug&#xff1a;使用layui时或许是依赖导入又或是ideal和浏览器缓存问题导致前面明明正常的页面显示&#xff0c;后面出现提示框没有css样式&#xff0c;弹出框没有背景css 效果如下 解决后 解决方法 在你的代码中引入layer.js 我这是jsp页面 <script type"text/jav…

Unity求向量A在平面L上的投影向量

如题&#xff1a;求向量A在平面L上的投影向量(图左) 即求 其实等价于求向量&#xff0c;那在中&#xff0c;,所以只需要求即可 而就是在平面L的法向量的投影坐标&#xff0c;所以代码就是 /// <summary>/// 求向量A在平面B上的投影向量/// </summary>/// <para…

Android关于杀掉进程的方案

《风波莫听穿林打叶声》—— 苏轼 〔宋代〕 三月七日&#xff0c;沙湖道中遇雨&#xff0c;雨具先去&#xff0c;同行皆狼狈&#xff0c;余独不觉。已而遂晴&#xff0c;故作此词。 莫听穿林打叶声&#xff0c;何妨吟啸且徐行。 竹杖芒鞋轻胜马&#xff0c;谁怕&#xff1f;一蓑…

记一篇Centos7安装innodb_ruby

安装innodb_ruby过程非常坎坷&#xff0c;这里记录下安装过程&#xff0c;有些坑当时没有记录下来&#xff0c;主要把完成安装过程就记录下来 yum安装ruby默认的会安装ruby2.0.0版本&#xff0c;但是在安装innodb_ruby时&#xff0c;会报错&#xff0c;提示至少需要2.4版本以上…

汽车标定技术(十)--从CPU角度观察Overlay实现原理

目录 1.问题引入 2.功能概述 2.1 P1X 标定功能 2.2 MPC57xx标定功能 2.3 TC3xx标定功能 3.问题分析 3.1 英飞凌CPU子系统猜想 3.2 ARM内核CPU子系统分析 4.小结 1.问题引入 在分析瑞萨RH850-P1x系列、NXP S32K3系列和英飞凌TC3xx系列对标定测量功能的实现时&#xf…

智能化质量控制,三坐标尺寸SPC管理系统引领制造新潮流!

在制造业的浪潮中&#xff0c;提升产品质量一直是企业不懈追求的目标。为了更好地适应市场需求、提高生产效益&#xff0c;我们自豪地介绍全新的三坐标尺寸SPC&#xff08;统计过程控制&#xff09;管理系统&#xff0c;为您的企业带来智能、高效的质量管理体验&#xff0c;助力…

顶级大厂Quora如何优化数据库性能?

Quora 的流量涉及大量阅读而非写入&#xff0c;一直致力于优化读和数据量而非写。 0 数据库负载的主要部分 读取数据量写入 1 优化读取 1.1 不同类型的读需要不同优化 ① 复杂查询&#xff0c;如连接、聚合等 在查询计数已成为问题的情况下&#xff0c;它们在另一个表中构…

TikTok革新挑战者:全球小众创作者的崛起

随着数字娱乐的快速发展&#xff0c;TikTok以其独特的短视频形式和开放的创作平台&#xff0c;成为全球范围内小众创作者崛起的推动者。本文将深入剖析TikTok在这一领域的革新&#xff0c;以及全球范围内小众创作者如何通过这一平台崭露头角。 TikTok&#xff1a;小众创作者的乐…

LeetCode刷题---斐波那契数列模型

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、第N个泰波那契数 题目链接&#xff1a;1137. 第 N 个泰波那契数 题目描述 泰波那契序列Tn定义如下: T00,T11,T2 1,且在n&g…

MySQL主从复制架构

MySQL主从复制架构 一、MySQL集群概述 ##1、集群的主要类型 高可用集群&#xff08;High Available Cluster&#xff0c;HA Cluster&#xff09; 高可用集群是指通过特殊的软件把独立的服务器连接起来&#xff0c;组成一个能够提供故障切换&#xff08;Fail Over&#xff09…

高项备考葵花宝典-项目范围管理输入、输出、工具和技术

项目范围管理包括确保项目“做”且“只做”所需的全部工作&#xff08;即不能少做&#xff0c;也不能多做&#xff0c;如果多做&#xff0c;就要消耗团队额外的时间和资源&#xff0c;并且无法被认可&#xff09;&#xff0c;以成功完成项目。项目范围管理主要在于定义和控制哪…

Angular项目中如何管理常量?

在Angular项目中&#xff0c;你可以使用不同的方式来管理常量。以下是一些常见的方法&#xff1a; 1、常量文件&#xff1a; 创建一个单独的 TypeScript 文件&#xff0c;其中包含你的常量。例如&#xff0c;创建一个名为 constants.ts 的文件&#xff0c;并在其中定义你的常量…

HTTP常见响应码

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是用于在客户端和服务器之间传输资源的协议。HTTP响应码&#xff08;HTTP status code&#xff09;用来表示服务器对请求的处理结果。以下是常见的HTTP响应码及其概要&#xff1a; 1. 响应码大类&#xff1a; 主要分…