鸿蒙培训二

学习链接：

视频链接：鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili

博主链接：技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结

官方文档链接：文档中心

1、作业一的代码讲解：

hml文件:container和text都在.css文件中

css文件：

 js文件：

2、本次作业：

（1）布局：

px: 手机和智慧屏的基准宽度为720px（px为逻辑像素，非物理像素）；

      组件的width设为100px时，在宽度为720物理像素的屏幕上，实际显示为100物理像素；

在构建页面布局时，需要对每个基本元素思考以下几个问题：

• 该元素的尺寸和排列位置
• 是否有重叠的元素
• 是否需要设置对齐、内间距或者边界
• 是否包含子元素及其排列位置
• 是否需要容器组件及其类型

布局分解：

（2）组件：

div:整个布局文件使用div组件将页面进行划分;

        flex-direction:flex容器主轴方向。

               column：垂直方向从上到下。

               row：水平方向从左到右。

       justify-content: flex容器当前行的主轴对齐格式。

                center：项目位于容器的中心。

button:按钮

        text-color：按钮的文本颜色。

        font-style：按钮的字体样式。

        font-weight：按钮的字体粗细。

input:输入框

        type：

                默认值：text:定义一个单行的文本字段

                button：定义可点击的按钮；

        placeholder:

                设置提示文本的内容，仅在type为text|email|date|time|number|password时生效。

        color:

                单行输入框或者按钮的文本颜色。

        placeholder-color:

                单行输入框的提示文本的颜色，type为text|email|date|time|number|password时生效。

text:文本

        font-weight：

                设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

                说明number取值必须为100的整数倍。

        text-align：设置文本的文本对齐方式。