Flex的通常使用方法1. 使用场景弹性布局的原理就讲了，说说我个人使用的场景。 1.1 将一个盒子中内容按比例分开这种场景基本很常见，例如如下代码： 1234567891011121314151617181920<script setup></script><template> <div class="A"> <div class="Bdiv">我是B</div> <div class="Cdiv">我是C</div> </div></template><style scoped>.A{ flex：1； display: flex; flex-direction: column;}.Bdiv{ flex:3;}.Cdiv{ flex:7;}</style> ...

网页设计规范 1.介绍俗话说的好，第一印象决定用户的留存率，因为网站设计并无具体平台限制的风格，也没有必须要设计的系统级导航栏和工具栏。 所以网站设计十分的灵活，然而过于灵活反而会让不同的设计师产生审美冲突，在功能的实现上也将变得更为复杂。 为此需要一个网站设计的大致规范，以供设计时参考。 1.1 版心显示屏并不是靠显示屏尺寸进行的，而是靠分辨率进行开发的，具体原理可自行了解。 在最新版Photoshop网站中Web预设尺寸有: 常见尺寸(1366x768px) 大网页(1920x1080px) 最小尺寸(1024x768px) MacbookPro13(2560x1600px) MacBookP「o15(2880x1800px) iMac27(2560x1440px)等。 这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。 所以我们通常设计网站时的网站宽度为1920px,每个屏幕的高度约为900px。 为什么是900px呢? 因为1080还要减 去浏览器头部和底部高度，大约就是900px了。 值得注意在进行前端高度选择中其实有一个属性，也 ...

开发网页的工作流程 1.工作流程 原型图 视觉稿 设计规范 切图与标注 前端代码 项目走查 [!TIP]因为我并不是专业的UI设计和美工，所以只讲原型图，因为它是由项目经理所构建的。 1.1 原型图原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。因为在视觉设计时，设计师也许会有更好的视觉展现方法，所以网页的开发是双方一起进行的。 网页原型图也称之为网页线框图。 1.1.1 线框图线框图(Wireframe)是整个交互式设计过程中的一个必要步骤，它通常在项目生命周期的早期阶段进行。 线框图可以简单的理解为是网站的一个图形框架，这就好比建筑的蓝图。 线框图可以帮助我们准确拆分页面、以及确定每个页面的功能模块及展示信息，并确定每个页面元素的界面布局。 线框图就是一个网站或者APP的一个图形化的骨架，能够引导一个页面的内容及概念，并且能够帮助设计师和客户讨论具体的网站层次和导向。 [!warning] 尽量完全线框图中的元素布局以及功能模块需要无限接近产品上线后的样子。 正如Vue组件式搭建网页，线框图也可分 ...

网页的组成部分 1. 基本分析目前来讲，对于一个网站分析，无非是将其划分为一个一个的组件部分，并且由于Vue的单页面应用，网站点击跳转为变成了路由组件展示不同的页面。 但是大体部分还是 首页 二级页面 1.1 首页当访问一个网站时他的根目录就是导向首页的。 在以前网站发展的前期阶段，网站并不是富媒体集合体，而是类似于一本书一样:首页如同书籍的目录，需要查看哪个子网页就点击链接即可进入。这是由于当时网速不好，避免加载过久才使用的设计。不过目前还保留类似结构的网站也还还存在，基本都是些老项目或BBS时代留下的网站，例如tomcat 而到了现在，网站首页仍然是引导用户进入不同区域的一个“目录”，不过用了大量的图片或视频以及动态效果来使得用户观感变得更好，信息也变得更加简洁。 而目录则是一个如同列表的导航模块，用户点击对应的链接即可跳转页面,虽然在观感上各种不同样式的导航方式，但底层还是最基本的目录跳转方式。 [!TIP] 个人理解我认为，首页的目的主要是为了展示网站能实现什么业务，设计风格的不同的目的是为了方便用户聚焦精力。例如： 网格布局-将展示内容以橱窗方式展示，用户一眼就足以看 ...

本文测试obsidian的模板创建，以后补全内容

本文测试obsidian的模板创建，以后补全内容

本文测试obsidian的模板创建，以后补全内容

本文测试obsidian的模板创建，以后补全内容

本文测试obsidian的模板创建，以后补全内容