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…

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…

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…

顶级大厂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;以成功完成项目。项目范围管理主要在于定义和控制哪…

高效办公:如何使用视频剪辑工具批量转码,mp4视频到TS视频

在视频处理过程中&#xff0c;转码是一项常见的任务。将MP4视频转换为TS视频可以提供许多优势&#xff0c;包括更好的兼容性、更广泛的设备和平台支持以及更高的视频质量。然而&#xff0c;手动转码大量视频文件可能会非常耗时且效率低下。为了实现高效办公&#xff0c;可以使用…

BTCPay Server:免费、安全、开源的比特币支付处理器 | 开源日报 No.90

MunGell/awesome-for-beginners Stars: 58.0k License: NOASSERTION 这个项目是一个收集开源项目的列表&#xff0c;旨在帮助初学者找到可以贡献代码的机会。该列表按编程语言分类&#xff0c;并列出了每个项目以及其标签 (如 “good-first-issue”、“beginner” 等)。主要功…

TikTok区块链实践:数字社交媒体的去中心化未来

随着区块链技术的日渐成熟&#xff0c;数字社交媒体行业也在探索如何整合区块链&#xff0c;以推动去中心化发展。在这一潮流中&#xff0c;TikTok作为全球领先的短视频平台&#xff0c;积极实践区块链技术&#xff0c;探索数字社交媒体的未来。本文将深入探讨TikTok的区块链实…

P8A012-A016组策略安全

账户策略 【预备知识】 组策略&#xff08;Group Policy&#xff09;是Microsoft Windows系统管理员为用户和计算机定义并控制程序、网络资源及操作系统行为的主要工具。通过使用组策略可以设置各种软件、计算机和用户策略。 【实验步骤】 网络拓扑&#xff1a;server2008A…

用Java制作简易版的王者荣耀

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j…

vivado综合分析与收敛技巧2

1、分解深层存储器配置 &#xff0c; 实现功耗与性能平衡 在深层存储器配置中 &#xff0c; 可使用综合属性 RAM_DECOMP 实现更好的存储器分解并降低功耗。此属性可在 RTL 中设置。将RAM_DECOMP 属性应用于存储器时 &#xff0c; 存储器是在较宽的原语配置中设置的 &#x…