【2024秋第1节课】初识HTML与CSS

ZeZeZe
574 阅读26分钟

HTML和CSS简介

  • HTML指的是超文本标记语言 (Hyper Text Markup Language)，超文本指的是超链接, 标记指的是标签, 是一种用来制作网页的语言, 这种语言由一系列的标签组成，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm。现在已经发展到5.0版, 即HTML5。
  • CSS级联样式表，通常又称为“风格样式表（Style Sheet），它是用来进行网页风格设计的。使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
  • HTML 用于定义内容的结构和语义，形成页面的基本框架，CSS 用于设计风格和布局，改变内容的外观。

HTML基础

标签结构

  • 标签要成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 /
  • 标签分类：双标签和单标签
<strong>需要加粗的文字<strong>
<br>  //换行
<hr>   //水平线

01-HTML骨架

  • <!DOCTYPE html>，文档声明，告诉浏览器使用哪种HTML版本来显示网页，位于文档最前面位置。
  • <lang>,用来定义当前文档显示的语言。 en定义语言为英语，zh-CN定义语言为中文
  • <meta>,定义文档元数据，常用来描述当前页面的特性，比如文档字符集 charset="utf-8"
  • <head>, HTML 头部包含 HTML元素的内容，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据，可以设置meta，title以及导入css。
  • <body>存放的是页面会显示的内容以及元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

02-常用标签

1.标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

注意

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  2. h2 ~ h6 没有使用次数的限制

2.段落标签

<p>段落</p>

显示特点：

  • 独占一行
  • 段落之间存在间隙

3.文本有关标签（这里的都可以用css来实现，仅作为了解）

<strong> 加粗 </strong>    <b>
    <em> 倾斜 </em>         <i>
    <ins>下划线  </ins>     <u>
    <del>删除线 </del>       <s>
​

4.图像标签

作用：在页面中显示图片

<img  src="图片的 URL">
  • src 属性是必须的，它包含了你想嵌入的图片的路径。

有关属性

属性作用
alt替换文本 图片无法显示时显示的文字
title显示文本 鼠标悬停在图片上面时候显示的文字
width/height图片的宽度和高度 值为数字

5.a标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 # ，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>
​
<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
​
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

6.input 标签

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

input 标签 type 属性值不同，则功能不同。

参考资料：表单标签＜input＞的介绍_input标签-CSDN博客

<input type="...."
type属性值说明
text文本框，输入单行文本
password密码框
radio单选框
checkbox复选框
file文件上传

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

按钮

<button type="">按钮</button>
type属性说明
submit提交按钮，将数据提交到后台
reset重置按钮，点击后将表单恢复到默认
button默认没有功能

例

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>
​
  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

7.布局标签

作用：布局网页（划分网页区域，摆放内容）

  • div：独占一行
  • span：不换行
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

有语义的布局标签

标签名意义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
acticle网页文章

更多标签：HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

03-字符实体

显示效果描述实体名称
空格 
<小于号<
大于号>

更多字符实体：HTML特殊符号（字符实体)大全-CSDN博客

CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
  /* 选择器 { } */
  p {
    /* CSS 属性 */
    color: red;
  }
</style>
​
<p>体验 CSS</p>

提示：属性名和属性值成对出现 → 键值对（以后还会遇到这个名词，请大家注意一下）。

01-CSS引入方式

  • 内部样式表

    • CSS 代码写在 style 标签里面
    • 此方式引入的CSS代码只作用于本页
    <!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style>
    div{
        width: 65px;
        height: 55px;
        background: ren;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

  • 外部样式表 (*)

    • CSS 代码写在单独的 CSS 文件中（ .css）
    • 在 HTML 使用 link 标签引入
 <!--链接式:常用-->
  <link type="text/css" rel="stylesheet" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>

  • 行内样式（不推荐使用）

    • CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>

盒模型

在css中，任何元素都可以看成是一个盒子。一个盒子是由四部分组成的：内容（content）、内边框（padding）、边框（border）和外边框（margin）。

盒模型有两种：标准盒模型（content-box） 和IE盒模型（border-box） 。

标准盒模型下，盒子的实际尺寸=内容（设置的宽/高）+ 内边距 + 边框。

IE盒模型下，盒子的实际尺寸=设置的宽/高= 内容 -内边距 - 边框。（实际盒子空间不包括padding和border）

image-20231025135230592

元素分类

我们使用的元素一般有三种类型：块级元素，行内元素，行内块元素

块级元素

  • 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构的搭建

  • 块级元素的特点:

    • 总是从新行开始。
    • 高度、行高、外边距以及内边距都可以控制。
    • 宽度默认是容器的100%。
    • 可以容纳内联元素和其他块元素。

  • 常见的块元素有:

    <h1>~<h6>`、`<p>`、`<div>`、`<ul>`、`<ol>`、`<li>

行内元素

  • 行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式。

  • 行内元素的特点：

    • 和相邻行元素在一行上。
    • 高、宽设置无效，但水平方向的padding和margin可以设置，垂直方向的无效。
    • 默认宽度就是它本身内容的宽度。
    • 行内元素只能容纳文本或者其他行内元素。(a特殊，容纳链接)

  • 常见的行内元素有:

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>、<u>、<ins>

行内块元素(特殊的行内元素)

  • 在行内元素中有几个特殊的标签 <img>、<input>、 <td>,可以对他们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

  • 行内块元素的特点：

    • 和相邻行内元素(行内块)在一行上，但是之间会有空白缝。
    • 默认宽度就是它本身内部的宽度。
    • 高度、行高、外边距以及内边距都可以控制。

显示模式转换

  • 块级标签转为行内标签模式
div  {display:inline;  
  }
  • 行内标签模式转为块级模式
span {display:block; 
 }
  • 行内标签模式转为行内块模式
a {display:inline-block;  
  }

选择器：

参考资料：CSS选择器-MDN

基础选择器

基础选择器是由单个选择器组成的，主要包括：标签选择器、类选择器、id 选择器和通配符选择器。

  1. 标签选择器：

标签选择器用于将HTML的标签作为选择器，能快速为页面中同类型的标签统一设置样式，但不能设计差异化样式。（在一类标签中所有标签或者大部分标签需要同一个样式的时候使用）

div{ font-size: 12px; color: red }
/* 页面里所有盒子都将改变成此样式 */

2.类选择器：

类选择器以" . " 进行标识，可以用于给多个HTML标签设置相同的样式，也可以给一个标签指定多个类名，从而达到更多的选择目的。（在多个部分需要相同的样式的时候使用）

<style>
.test1  {color:royalblue;font-size:12px }
.test2  { color: red }
</style>
<div class="test1">hi</div>
<div class="test1 test2">天气很好</div>

3.id选择器：

id 选择器以" # " 进行标识，可以为标有特定 id 的 HTML 元素指定特定的样式。id属性唯一。（对唯一特定元素需要加上样式的时候使用）

<style>
#wrap  { background-color:orange}
</style>
​
<div id="wrap"> 你好</div>

4.通配符选择器：

通配符选择器使用 " * " 定义，它表示选取页面中所有元素（标签）。

只有极少数情况需要用到通配符选择器比如给所有元素设置内外边距的时候会使用：

* {
​
margin： 0；
​
padding： 0；
​
}

复合选择器

复合选择器是建立在基础选择器之上，由两个或多个基础选择器，通过不同的方式组合而成的。 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

  1. 后代选择器:

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

/* 元素1 元素2 { 样式声明 } 
  表示选择元素 1 里面的所有元素 2 (后代元素)。*/
​
div p  { font-size: 12px; color: red; }    
/* 选择 div 里面所有的 p 标签元素 */

2.子选择器:

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

也就是子类的子类不是我的子类，不能跨级选择。

/*元素1 > 元素2 { 样式声明 } 
选择元素1 里面的所有直接后代(子元素) 元素2。*/
​
div > p { font-size: 12px; color: red; } 
/* 选择 div 里面所有最近一级 p 标签元素 */

3.并集选择器:

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通过英文逗号" , "连接而成。通常用于集体声明。

常用于需要同一个样式但是非同类的元素使用。

/*元素1,元素2,元素3 { 样式声明 } */
div,.myclass,#psd { 样式声明 }
 /* 选择 div、.myclass和#psd元素 */

4.伪类选择器和伪元素：

参考链接：伪类选择器和伪元素

伪类是选择器的一种，它用于选择处于特定状态的元素，伪类和伪元素是用来修饰不在文档树中的部分。比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。伪类的操作对象是文档树（后面课程会单独讲这部分）中已有的元素，而伪元素则创建了一个文档书外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

故伪类和伪元素选择器往往不是单独出现的，而是和其他选择器一起出现。

<p>Hello World, and wish you have a good day!</p>
p:first-letter {font-size: 5em ;color:orange;}
 /* 可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。*/

image-20231010141448332

选择器权重

权重规则概述：

  • !important 优先级最高，但也会被权重高的important所覆盖，一般不推荐使用important（除非你有一个样式很着急上，但是你找不到他的对应的一堆选择器）。

  • 行内样式总会覆盖外部样式表的任何样式(除了!important)

  • 单独使用一个选择器的时候，不能跨等级使css规则生效。(无论多少个类选择器，都没有一个id选择器权重高）

  • 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

  • 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.

  • 一般为!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  • （注意:“权值”和“权级”的概念是为了更好的理解权重而提出的，并不是真的存在的)

    • image-20231010141523323

CSS背景

背景颜色

background-color 属性定义了元素的背景颜色.

body {background-color:#b0c4de;}

背景图像

background-image

background-image 属性描述了元素的背景图像.

语法：background-image: url('图片的路径') -- 路径可以是本地的也可以是网上的

多张图片的话可以使用,隔开

语法`：`background-image: url('图片的路径')
background-repeat

background-repeat 设置元素背景图像在页面中呈水平或垂直方向平铺

可设置的值：

  • repeat：水平和垂直方向上平铺，默认
  • no-repeat：不平铺
  • repeat-x：在水平方向上平铺
  • repeat-y：在垂直方向上平铺
background-position

background-position 设置背景图像在背景中的位置

可设置的值：

  • left top/center/bottom：左上/左中/左下(水平位置，垂直位置)
  • right top/center/bottom：右上/右中/右下(水平位置，垂直位置)
  • center top/center/bottom：中上/居中/中下(水平位置，垂直位置)
  • x% y%：百分比 (水平位置，垂直位置)
  • x y：具体值 (水平位置，垂直位置)

注意：如果只设置一个属性值，则另一个属性值默认为 center

background-attachment

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。

可设置的值：

  • scroll：滚动，默认 (跟随页面)
  • fixed：固定
  • local：滚动 (跟随元素内容)
简写

background简写没有顺序要求

background：背景颜色 背景图片地址 背景是否平铺 背景图像滚动 背景图片位置

tips：背景图片地址详情参照上文背景图像语法

background-size

background-size 设置元素的背景图片的大小

可设置的值：

  • width height：具体值 (宽度，高度)
  • width% height%：百分比 (宽度，高度)
  • cover：等比例缩放，图片完全覆盖到整个盒子，有可能图片显示不完全
  • contain：等比例缩放，当高或宽其中有一个与盒子的尺寸相等，就不再缩放了

注意：如果只设置一个属性值，则另一个属性值默认为 auto

CSS文本样式

颜色

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

css中的几乎所有颜色表达方式都可以用这三种方式表达。

文本对齐方式

text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。

文本修饰

  • text-decoration 属性用来设置或删除文本的修饰。
  • text-decoration:none，主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；
  • text-decoration:overline，设置文本上划线。
  • text-decoration:line-through; 设置文本中间划线。
  • text-decoration:underline; 设置文本下划线。
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本阴影

text-shadow用于设置页面文本的阴影

selector {
    text-shadow: color offset-x offet-y blur-raduis;
}
coloroffset-xoffset-yblur-raduis
意义设置文本内容的阴影颜色阴影在水平方向的偏移量垂直方向阴影的偏移值设置文本内容的阴影模糊半径
是否必选否是是否
值的意义用于设定颜色（用讲的方法设定）值小于 0 的话，则表示向左偏移。 值等于 0 的话，则表示水平方向不发生任何偏移。 值大于 0 的话，则表示向右偏移。值小于 0 的话，则表示向上偏移。 值等于 0 的话，则表示垂直方向不偏移。 值大于 0 的话，则表示向下偏移不允许负值，如果没有指定，则默认为 0。值越大，阴影半径越大

tips：blur-raduis中设置多重阴影效果需要设置多个阴影值，这些值之间使用逗号分隔。

文本间距

line-height:行高，也就是文本行的高度。

line-height=上距离+内容高度+下距离

单行文字垂直居中

当 line-hieght 等于 height，内容垂直居中 当 line-hieght 大于 height，内容向下移动 当 line-hieght 小于 height，内容向上移动

div{line-height:40px}
/*同时设置div的高度也为40px,则div中的单行文字垂直居中*/

字体粗细

font-weight：设置文字是否加粗显示。

属性值作用
normal默认（400）
bold加粗（700）
bolder更粗
lighter细体
 p{
        font-weight: bold;
      }
 span{
        font-weight:600;
      }

文本单位

  • 像素（px）：是页面布局的基础，常用单位，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素（为web开发者提供，在CSS中使用的一个抽象单位）和物理像素（只与设备的硬件密度有关，任何设备的物理像素都是固定的）。

  • 百分比（%）：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

  • em和rem：对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于自身或者父元素字体，rem相对于根元素（html字体大小：document.documentElement.style.fontSize）。

    • em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。

    • rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

    • px、em、rem的区别及使用场景

    • 区别:

    • px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。

    • em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。

      • em 是以自身的 font-size 为参考的，当 em 没有设置自身的 font-size ，则会以父元素的 font-size 为标准；
      • rem 是相对于根元素，这样就意味着，只需要在根元素确定一个参考值即可。

    • 适用场景:

    • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。

    • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备

px%emrem
是否长度固定是否否否
相对于哪些元素无直接父元素自身的fontsize，如果没有则参考父元素相对于根元素
使用场景不需要大小随分辨率变化的时候，且不怎么需要适配移动设置宽度,使元素填充可用空间的特定比例自身或者父元素有fontsize且需要根据分辨率改变需要适配各种移动设备

字体样式：

参考链接：font-family

边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框样式

border-style属性可以有1-4个值

image-20231010141618388

边框宽度

border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

布局与定位：

文档流：

从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。

脱离文档流：

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

定位：

position 属性指定了元素的定位类型。

position 属性的五个值：

static relative fixed absolute sticky

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p{
    position:fixed;
    top:30px;}
relative 定位

相对定位元素的定位是相对其正常位置，relative定位的元素未脱离文档流 。

h2
{
    position:relative;
    left:20px;}
absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于整个html页面调整，开启绝对定位的元素脱离文档流:

h2
{
    position:absolute;
    left:100px;
    top:150px;}
sticky 定位

参考链接：blog.csdn.net/weixin_5108…

粘性定位的元素是依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，（这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同之后为固定定位。）而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

staticfixedrelativeabsolutesticky
是否脱离文档流否否是是部分脱离

CSS布局：

Flex布局

Flex布局(Flexible Box Layout)是一种一维的布局模型,它提供了强大而灵活的方式来分配容器中项目之间的空间,即使它们的大小是未知或动态的。

主要概念

Flex容器: 设置了display: flex的父元素

Flex项目: Flex容器的直接子元素

重要属性

Flex容器属性

image-20231010141704221

display: flex: 定义一个flex容器（给父元素指定的）

/*任何一个容器都可以指定为flex布局*/
<div class="container"></div>
​
.container {
    display: flex | inline-flex;
}
/*这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。*/

flex-direction: 设置主轴方向

row (默认): 水平方向,从左到右

column: 垂直方向,从上到下

row-reverse: 水平方向,从右到左

column-reverse: 垂直方向,从下到上

justify-content: 定义项目在主轴上的对齐方式

.container {    justify-content: flex-start | flex-end | center | space-between | space-around;}

image-20231010141755578

align-items: 定义项目在交叉轴上的对齐方式

.container {  align-items: flex-start | flex-end | center | baseline | stretch;}

image-20231010141815053

flex-wrap: 控制flex项目是否换行

flex-wrap: nowrapflex-wrap: wrapflex-wrap: wrap-reverse
默认值，不换行。当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行换行，第一行在上面换行，第一行在下面
子元素属性

子元素有以下六个属性：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

相关资料

浮动

float属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

主要特性:

脱离文档流: 浮动元素会脱离普通的文档流

影响周围元素: 浮动元素会影响其后的元素布局

不影响块级元素: 浮动元素不会影响之前的块级元素的布局

行内元素环绕: 浮动元素后的行内元素会环绕在其周围

MDN

相关博客

grid布局：

这是除了flex布局之外的另外一种强大的布局方式，但是其知识点较多，学习成本较高且有一定的兼容性问题，如有同学想要了解可以参照以下链接：

（超详细）强大的grid布局-CSDN博客

动画

css中实现动画有两种方式：transition过渡动画、 animation自定义动画。

过渡动画

过渡动画详解

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

自定义动画

animation动画详解

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

关键帧@keyframes
  • @keyframes 规则是创建动画并为动画命名，可以在其中对每一帧进行设置。
  • @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式（关键帧）。
  • 需要规定一个关键帧名称@keyframes-name。
  • 用百分比来规定变化发生的时间:0%-100%，之间可以是任意多的变化次数，也可以倒放100%-0%
  • 使用自定义动画的元素，需要通过animation相关属性进行配置。
.dv{
    width: 40px;
    height: 40px;
    background-color: aliceblue;
}
.dv:hover {
    animation-name: myAnimaiton;
    animation-duration: 3s;
  }
  @keyframes myAnimaiton {
    0% {
      padding: 0;
      background: burlywood;
    }
    100% {
      padding: 150px;
      background-color: royalblue;
    }
  }

  • animation-name

    • 需要绑定的keyframe的名称

  • animation-duration

    • 动画执行的时间
    • 默认是0, 无动画执行
    • 单位是秒s或者毫秒ms

  • animation-timing-function

    • 动画执行的速度

  • animation-delay

    • 规定延迟多久后开始执行动画

  • animation-iteration-count

    • 动画循环执行的次数
    • infinite: 无限次

  • animation-direction

    • 动画的方向
    • normal: 正常方向
    • reverse: 反方向（ 从100%-0%的执行）
    • alternate: 交替执行, 从正常方向开始
    • alternate-reverse: 交替执行, 从反方向开始

2D及3D转换

2D转换相关资料

3D转换相关资料

2D转换是通过css来改变元素的形状或位置，也可以叫做变形。

3D转换将页面看作是一个三维空间来对页面中的元素进行移动、旋转、缩放和倾斜等操作。

属性对照表

值描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

作业：

提交邮箱： frontend@lanshan.email

提交格式： 标题命名为学号-姓名-第一次作业 ,内容为github地址。

1.写一个类似的html页面

image-20231010142032534

2.用flex实现以下画面效果

3.用css动画实现轮播图

avatar
文章
阅读
粉丝