Day05_HarmonyOS界面搭建布局

背景 : 核心属性几乎带着大家已经讲解完毕, 本节课我们就需要使用对应的核心属性完成对应的完整项目开发;

今日学习目标

1. 自适应

2. 小模块练习1

3. 小模块练习2

4. 完整界面搭建

5. 高级选择器使用

1. 自适应

1) 宽度自适应

含义 : 宽度自适应指的是, 元素不设置宽度就代表了宽度的自适应默认宽度width取值为:auto;

注意 : width:100%和width:auto实现效果是否一致?

回答 : 不一致; 当元素再设置了宽度百分百或者是自适应的时候, 继续给元素添加盒子模型, 百分百设置的元素会让盒子撑大; 则auto不会;

2) 高度自适应

含义 : 高度自适应指的是, 元素不这是高度就代表了高度的自适应默认高度height取值为auto;

应用场景 : 实际开发的时候我们经常使用高度自适应, 因为放置内容过多撑开对应的区域; 实际开发父元素的高度一般都

3) 窗口自适应

当浏览器窗口大小发生改变的时候, 容器的大小也根据窗口大小改编进行不同大小的显示;

这时候我们要给子元素使用百分比单位; 同时 : 必须添加一行代码 html,body{height:100%}

2. 小模块练习

小模块练习 :

3. 完整界面搭建

完整界面搭建, 搭建页面的时候使用高级选择器

4. 高级选择器应用(扩展)

背景 : 前面我们学习了各种各样的选择器, 那些属于基本的选择器 ,开发使用频率比较高, 本节课再案例中我们也会使用其他的选择器, 选择器的高级

1) 结构伪类

含义 : 通过元素与元素之间的关系查找元素; 并进行修饰

a) 匹配元素内第一个子元素

含义 : 子元素无论是否为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 第一个子元素;

基本语法 : 选择器1:first-child{样式规则}

案例 :

<style>
    /*在这里我们能清楚的看到div是一个父元素,所以我们要以div为起点查找子元素*/
    /*使用结构伪类的优点, 避免起类名, 防止数据渲染类名的时候丢失样式*/
    /*匹配到的是第一个子元素p标签*/
    div:first-child{
        background-color:red;
    }
</style>
<div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <h3>第三个子元素</h3>
    <h6>第四个子元素</h6>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <h1>第七个子元素</h1>
</div>

b) 匹配元素内最后一个子元素

含义 : 子元素无论是否为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 最后一个子元素;

基本语法 : 选择器1:last-child{样式规则}

案例 :

<style>
    /*在这里我们能清楚的看到div是一个父元素,所以我们要以div为起点查找子元素*/
    /*使用结构伪类的优点, 避免起类名, 防止数据渲染类名的时候丢失样式*/
    /*匹配到的是最后一个子元素h1标签*/
    div:last-child{
        background-color:red;
    }
</style>
<div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <h3>第三个子元素</h3>
    <h6>第四个子元素</h6>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <h1>第七个子元素</h1>
</div>

c) 匹配第几个子元素

含义 : 子元素无论是否为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 第几个子元素, 代表的是从第一个开始向后面数;

基本语法 : 选择器1:nth-child(参数){样式规则}

注意 : 参数取值可以为数值, 也可以为关键词和公式

a) 数值 则代表的是第几个子元素

b) 关键词 : odd代表的是奇数位的子元素; even代表的是偶数位的子元素

c) 公式 : n代表一个自然数; 2n则代表偶数; 2n+1 / 2n-1 则代表奇数

案例 :

<style>
    /*匹配第几个子元素*/
    /*从第一个子元素开始数, 匹配的是第三个子元素*/
    div:nth-child(3){
        background-color:red;
    }
    /*匹配奇数位的子元素*/
    div:nth-child(odd){
        background-color:yellow
    }
    div:nth-child(2n+1){
        background-color:blue
    }
    /*匹配偶数位的子元素*/
    div:nth-child(even){
        background-color:gold
    }
    div:nth-child(2n){
        backgroun-color:aqua
    }
</style>
<div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <h3>第三个子元素</h3>
    <h6>第四个子元素</h6>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <h1>第七个子元素</h1>
</div>

d) 匹配同类型的第几个子元素

含义 : 匹配的是子元素中, 相同类型(相同标签)标签中的第几个

基本语法 : 选择器1>选择器2:nth-of-type(参数){样式规则}

注意 : 参数一般取值为数值居多

案例 :

<style>
    /*匹配同类型的第几个*/
    /*匹配的是div里面的第二个p标签*/
    div>p:nth-of-type(2){
        background-color:red
    }
    
</style>
<div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <h3>第三个子元素</h3>
    <h6>第四个子元素</h6>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <h1>第七个子元素</h1>
</div>

2) 属性选择器

含义 : 通过元素的标签属性, 进行查找页面的元素; 使用符号为[]

基本语法 : [属性] / E[属性] / [属性="属性值"] / E[属性="属性值"]

注意事项 :

a) [] 是属性选择器的必备方法

b) E在这里代表的是element 元素的意思

c) 是否带E, 决定了匹配的元素中是否为相同的标签

案例 :

<style>
    /* 案例演示的时候, 需要一行一行的粘贴代码实现效果观察 ; 不然代码存在覆盖层叠性, 效果显示不全*/
    
    /*1) [属性] 与 E[属性] */
    /*[class] 匹配到的是页面中带有class属性的标签*/
    [class]{
        background-color:red;
    }
    /* p[class] 匹配的是页面中p标签带有class属性的元素*/
    p[class]{
        background-color:blue
    }
    
    
    /* 2) [属性="属性值"] 与 E[属性="属性值"] */
    /* 匹配的是页面中带有class属性并且取值为box1的元素 */
    [class="box1"]{
        background-color:orange;
    }
    /*匹配的是div标签中带有class属性并且属性值为box的元素*/
    div[class="box1"]{
        background-color:gold
    }
</style>
<div class="box1">我是第1个div</div>
<div class="box1">我是第2个div</div>
<div class="box2">我是第3个div</div>
<div>我是第4个div</div>
<p class="box1">我是第1个p标签</p>
<p class="box2">我是第1个p标签</p>
<p class="p1">我是第1个p标签</p>
<p id="bobo"></p>
<h1 class="box1">我是一级标题</h1>
<h1 id="head1">我是一级标题</h1>

3) 伪元素选择器

含义 : 伪元素 也称之为假元素 , 通过设置假的标签来实现对应的修饰;

基本语法 :

a) 选择器1:first-letter{ 样式规则 }

含义 : 用来匹配元素内的第一个字符

b) 选择器1:first-line{ 样式规则 }

含义 : 用来匹配元素内的第一行字符

c) 选择器1:before{ content:""; 样式规则 }

含义 : 用来向元素内部正前方插入内容 , 内容需要写在content里面

d) 选择器2:after{ content:""; 样式规则 }

含义 : 用力向元素内部正后方插入内容 , 内容需要写在content里面

案例1 :

<style>
    div{
        width:300px;
        height:500px;
        border:5px solid gray;
    }
    /*匹配div内部第一个字符*/
    div:first-letter{
        color:red;
    }
    /*匹配div内部第一行文本*/
    div:first-line{
        background-color:yellow;
    }
</style>
<div>
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧; 
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧;
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧;
</div>

案例1 :

<style>
    div{
        width:300px;
        height:500px;
        border:5px solid gray;
    }
    /*向元素内部正前方追加*/
    div:before{
        content:"千锋教育";
        color:blue;
    }
    /*向元素内部正后方追加*/
    div:after{
        content:"千锋教育";
        color:orange;
    }
</style>
<div>
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧; 
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧;
    欢迎来到千锋教育进行学习HarmonyOS鸿蒙课程, 让我们一起做风口上面的小金猪吧;
</div>

4) 否定伪类

含义 : 排除掉否定掉某一类元素;

基本语法 : :not(被排除掉的元素){}

案例 :

<style>
    /*词句代码的意思是:排除掉第五个子元素剩下的*/
    div>:not(:nth-child(5)){
        color:red
    }
</style>
<div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <h3>第三个子元素</h3>
    <h6>第四个子元素</h6>
    <p>第五个子元素</p>
    <p>第六个子元素</p>
    <h1>第七个子元素</h1>
</div>

5. 案例

案例1

案例2

案例3