【青训营】- HTMl&CSS 基础 & UI 设计

Pember
368 阅读5分钟

课堂笔记

本堂课重点内容：

  • 简单介绍了html以及html中常用的一些标签
  • html5新增的一些语义化标签等。
  • css中常用的标签，例如文字属性、背景颜色、flex弹性布局、定位、阴影等。
  • 前端人员的UI设计思维的一些概念性的知识。

具体案例：

HTML:

常用的HTML标签:p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。

注意 p标签、h1~h6标签内容建议只放文字。

  • p标签:
<p>Hello World</p>
<!--输出==> Hello World -->
  • h1~h6标签:
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>

注意 h1~h6发生了变化的是字体大小。在一个HTML文档里面只能有一个h1标签。

image.png

  • div标签: div标签相当于一个容器，里面可以放各式各样的标签和内容。
<div style="background-color: wheat;">
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>

image.png

  • ol/ul>li标签: 列表分为有序列表(ol/li)和无序(ul/li)列表。

有序列表(ol/li):

<ol style="background-color: coral;">
        <li>
            <h3>Hello World</h3>
        </li>
        <li>
            <h4>Hello World</h4>
        </li>
        <li>
            <h5>Hello World</h5>
        </li>
    </ol>

image.png

无序列表(ul/li):

 <ul style="background-color: #F4F1DE;">
        <li>
            <h3>Hello World</h3>
        </li>
        <li>
            <h4>Hello World</h4>
        </li>
        <li>
            <h5>Hello World</h5>
        </li>
    </ul>

image.png

注意 ol和ul标签的子元素只能是li标签！但li标签里面可以包含任何标签，且使用li标签时其父元素只能是ul或者ol。🤯

  • input标签:

input标签的作用很广,它可以是一个按钮，可以是一个单选框或者复选框，也可以是一个文本框等。话不多说，咱们上代码。

<div style="background-color: coral; padding: 15px; display: flex; justify-content: space-between;">
        <input type="text" value="我是一个文本框">
        <input type="button" value="我是一个按钮">
        <input type="password" value="我是一个密码框">
        <input type="email" value="123456@qq.com">
        <input type="number" value="123456789">
        <div>
            <input type="radio">
            <span>我是一个单选框</span>
        </div>
        <div>
            <input type="checkbox">
            <span>我是一个复选框</span>
        </div>
</div>

image.png 注意 不同类型的input标签对输入的内容有不同的要求。像number类型的只能输入数字,不能输入字母或特殊符号等。email类型的内容必须按照电子邮箱格式。

  • img标签:

img标签是对图片引入的一种方式。

<img src="https://img0.baidu.com/it/u=2054543582,3249423566&fm=26&fmt=auto&gp=0.jpg" alt="图片加载失败">

image.png src: 获取图片的地址。

alt: 可以看成是图片地址未能获取成功后的一种备用方案

注意img标签的初始大小由图片的大小决定,但可以通过调整标签大小来调整图片的大小。

当然了,在实际开发中，咱们用到的标签不只有这些,但如果是作为一个初学者的话,先了解这些常用标签对后面的学习来说有着事半功倍的效果。

CSS:

常用到的CSS属性:弹性布局、定位、伪类、定位、阴影等

  • 弹性布局flex：

弹性布局是父元素设置，子元素受影响。常用于一些导航栏或不容易布局的模块等

flex 容器默认存在两根方向轴：水平方向轴和垂直方向轴。通过 flex-direction 属性确立容器的主轴，就可以确定 flex 项目在容器中的排列方向（flex项目默认沿主轴排列）。

flex-direction：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上端。
  • column-reverse：主轴为垂直方向，起点在下端。 image.png
<div style="background-color: wheat; display: flex; justify-content: space-evenly; align-items: center;">
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>

image.png

注意

  • justify-content:用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
  • align-items:属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

  • 定位：

定位和弹性布局一样，是在开发中常用到的一种布局方式，与弹性布局不同的是，定位常与浮动配套使用。

定位的属性值

  • static (静态定位)
  • relative (相对定位)
  • absolute (绝对定位)
  • fixed (固定定位)
  • sticky（粘性定位）

static (静态定位)

定位的默认值，元素出现在正常的流中(忽略 top、bottom、left、right 或者 z-index 声明)

relative (相对定位)

image.png

<div style="height: 200vh; background-color: wheat;">
        <p>Hello World</p>
        <div style="background-color:#3D405B;width: 200px;height: 200px;position: sticky; top: 0px;"></div>
        <p style="padding-left: 100px;">Hello World</p>
        <div style="background-color:transparent;border: 5px solid black; width: 200px;height: 200px;position: relative;" ></div>
    </div>

image.png

<div style="height: 200vh; background-color: wheat;">
        <p>Hello World</p>
        <div style="background-color:#3D405B;width: 200px;height: 200px;position: sticky; top: 0px;"></div>
        <p style="padding-left: 100px;">Hello World</p>
        <div style="background-color:transparent;border: 5px solid black; width: 200px;height: 200px;position: relative; top: -100px;" ></div>
    </div>

absolute (绝对定位)

使用了绝对定位的元素会被移出正常文档流，并不为元素预留空间，该元素会相对于最近的非 static 定位祖先元素左上角为坐标原点进行偏移，来确定元素位置。

image.png

<div style="height: 500px;width: 500px; background-color: wheat; position: relative; margin: 0 auto; display: flex;">
        <div style="background-color:#3D405B;width: 100px;height: 100px;"></div>
        <div style="background-color:orange;width: 100px;height: 100px;position: absolute;"></div>
        <div style="background-color:teal;width: 100px;height: 100px;"></div>
    </div>

image.png

<div style="height: 500px;width: 500px; background-color: wheat; position: relative; margin: 0 auto; display: flex;">
        <div style="background-color:#3D405B;width: 100px;height: 100px;"></div>
        <div style="background-color:orange;width: 100px;height: 100px;position: absolute; left: 50px;"></div>
        <div style="background-color:teal;width: 100px;height: 100px;"></div>
    </div>

注意:

  • absolute 定位使元素的位置与文档流无关，因此不占据空间。
  • absolute 定位的元素和其他元素重叠。

fixed (固定定位)

元素会被移出正常文档流【脱离标准文档里，不占据文档里的位置】，并不为元素预留空间， 而是通过指定元素相对于屏幕视口（viewport）左上角为坐标原点进行偏移。元素的位置在屏幕滚动 时不会改变。fixed 属性会创建新的层叠上下文。

<div style="height: 200vh;width: 500px; background-color: wheat; margin: 0 auto; ">
        <div style="height: 400px;width: 400px; background-color: gray; display: flex;">
            <div style="background-color:orange;width: 100px;height: 100px;position: fixed; top: 100px;"></div>
            <div style="background-color:#3D405B;width: 100px;height: 100px;"></div>
        </div>
    </div>

image.png image.png

大家在实验时不妨试下把橙色的背景色改成透明色(transparent),再给这个元素加个边框,其对比出来的效果更明显。

sticky（粘性定位）

粘性定位以浏览器的可视窗口为参照点移动元素，添加 top 、left、right、bottom 的其中一个之后，当该元素距离可视化窗口（设置的值）时就会脱离文档流"粘住"窗口移动。示例留意下滚动条的位置和"Hellow World"的位置。 image.png

<div style="height: 200vh; background-color: wheat;">
   <p>Hello World</p>
   <div style="background-color:#3D405B;width: 200px;height: 200px;position: sticky; top: 0px;"></div>
</div>

  • 阴影:

阴影在开发中用到的也非常多，主要表现在对某一模块或主题的突出就可以使用到阴影,阴影有字体阴影(text-shadow)和盒子阴影(box-shadow)。 image.png

<div style="background-color: wheat; display: flex; justify-content: space-evenly; align-items: center; box-shadow: 0px 0px 10px green;">
        <h1 style="text-shadow: 0px 0px 10px black;">Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h4>
        <h5>Hello World</h5>
        <h6>Hello World</h6>
    </div>

结尾

好了，咱们讲了那么多，最后来一个小案例来看看这些标签和属性的运用吧！

image.png

部分代码如下

<div>
      <ol style="list-style: none; display: flex;">
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
            <li>
                <img src="" alt="">
                <p></p>
            </li>
        </ol>
    </div>
本文若有不足之处,欢迎纠正。😊
avatar
文章
阅读
粉丝