前端0基础笔记（2023最新版黑马前端教程笔记）

标签语法

HTML——超文本标记语言

标记是带尖括号的文本

标签成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多/

拓展：

双标签：成对出现的标签

单标签：只有开始的标签，没有结束标签

< b r >:换行

< h r>:水平线

HTML基本骨架：

html:整个网页

head:网页头部，用来存放给浏览器看的信息，例如CSS

body:网页主体，用来存放给用户看的信息，例如图片、文字

title:网页标题

写一个 ! 就可以生成基本骨架

标签的关系：

作用：明确标签的书写位置，让代码格式更整齐

父子关系：

嵌套关系

<head></head>

兄弟关系：

并列关系

<head></head> <body></body>

代码格式：

父子关系：子级标签换行且缩进（Tab键）

兄弟关系：兄弟标签换行要对齐

注释

中间的...是内容

在 vs code，添加/删除注释的快捷键：ctrl + /

标题标签：

一般用在新闻标题，文章标题，网页区域名称，产品名称等等

标签名：h1~h6（双标签）

特点：

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

h 1 标签在一个网页只能用一次，用来放新闻标题或网页 logo

h 2 ~ h 6 没有使用次数的限制

换行和水平线标签

两个都是单标签

  • 换行：< b r >
  • 水平线：< h r >

浏览器不能识别代码中Enter换行

文本格式化标签：

作用：为文本添加特殊格式，以突出重点。

常见文本格式：加粗、倾斜、下划线、删除线等

最常用：

标签名： 效果：

strong 加粗

em 倾斜

ins 下划线

del 删除线

自带强调含义

标签名： 效果：

b 加粗

i 倾斜

u 下划线

s 删除线

图像标签：

作用：在网页中插入图片

< img src="图片的URL">

src是用于指定图像的位置和名称，是< img >的必须属性

< img > ：单标签

以./开头，vs code 有提示

图像属性：

属性名： 作用： 说明：

alt 替换文本 图片无法显示的时候显示文字

title 提示文本 鼠标悬停在图片上面的时候显示文字

width 图片的宽度 值为数字，没有单位

height 图片的高度 值为数字，没有单位

前两个属性是最常用的

属性名="属性值"

浏览器图片默认是等比例的

属性不区分先后顺序

路径

路径是指查找文件时，从起点到终点经历的路线

路径分类：

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找文件

/ 表示进入某个文件夹里面 文件夹名字/

. 表示当前文件所在文件夹 ./

.. 表示上一级

绝对路径应用场景：友情链接（使用在线网址）

超链接

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

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

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

跳转到本地文件，尽量用相对路径查找

想要跳转时创建新窗口而不是从将本窗口覆盖，< a >里面应该加一个属性： target="_blank"，新窗口跳转页面

如：

< a href="..." target="_blank">

开发初期，不知道超链接跳转地址，href 属性写#，表示空连接，不会跳转

音频标签

< audio src="音频的URL">< /audio>

常见属性： 作用： 特殊说明：

src(必须属性) 音频URL 支持格式：MP3、Ogg、Wav

controls 显示控制面板

loop 循环播放

autoplay 自动播放 一般会禁用

在vs code里，如果属性名和属性值完全一致，可以简写为一个单词

如：

controls/controls="controls"

视频标签：

< video src="视频的URL">< /video >

常见属性： 作用： 特殊说明：

src(必须属性) 视频URL 支持格式：MP4、Webm、Ogg

controls 显示控制面板

loop 循环播放

muted 静音播放

autoplay 自动播放 在静音状态自动播放

无序列表和有序列表

无序列表：

作用：布局排列整齐的不需要规定顺序的区域

ul 嵌套 li ul：无序列表 li：列表条目

ul 标签里面只能包裹 li 标签，li 标签里面可以包裹任何内容

有序列表：

作用：布局排列整齐的需要规定顺序的区域

ol 嵌套 li ol：有序列表 li：列表条目

ol 标签里面只能包裹 li 标签，li 标签里面可以包裹任何内容

定义列表：

dl 嵌套 dt 和 dd

dl：定义列表 dt：定义列表的标题 dd：定义列表的描述/详情

如：

< dl >

​ < dt >列表标题< /dt >

​ < dd >列表描述/详情< /dd >

< /dl >

dl 里面只能包含 dt 和 dd，dt 和 dd 里面可以包含任何内容

表格：

用来展示数据

table 嵌套 tr ，tr 嵌套 td / th

table:表格

tr: 行

th: 表头单元格

td: 内容单元格

表格默认没有边框线，需要使用 border 属性添加边框线

表格结构标签：

thead 表格头部

tbody 表格主题

tfoot 表格底部

单元格合并：

  • 明确合并的目标

  • 保留最左、最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    ​ 跨行合并，保留最上单元格，添加属性 rowspan

    ​ 跨列合并，保留最左单元格，添加属性 colspan

  • 合并之后删除其他单元格

表单：

input标签：

作用：收集用户信息

使用场景：

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

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

< input type="...">

type 属性值： 说明：

text 文本框，输入单行文本

password 密码框

radio 单选框

checkbox 多选框

file 上传文件

password 输入什么都是以 黑点 形式显示

input 标签占位文本：

占位文本： 文本框内未输入信息时，显示提示信息

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

单选框 radio

属性名： 作用： 特殊说明：

name 控件名称 控件分组，同组只能选中一个(单选功能)

checked 默认选中 属性名和属性值相同，简写为一个单词

上传文件：

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选的功能

< input type = "file" multiple>

多选框：

多选框也叫复选框

默认选中： checked

< input type = "checkbox" checked>...

单选框  radio 默认只能有一个，而多选框 checkbox 默认可以同时有好几个，使用 checked 标签

下拉菜单：

标签： select 嵌套 option ,select 是下拉菜单，option 是下拉菜单中的每一项

< select >

< option >北京< /option >

< option >上海< /option >

< option >广州< /option >

< option >深圳< /option >

< option selected >武汉< /option >

< /select >

下拉菜单中默认可使用 selected 标签

文本域：

作用：多行输入文本的表单控件

标签：textarea 双标签

< textarea >...< /textarea>

右下角拖拽功能一般都会被禁用掉，未来会用 CSS 设置尺寸

label 标签：

作用：网页中 ，某个标签的说明文本

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围

写法一：

  • label 标签只包裹内容，不包裹表单控件
  • 设置 label 标签的 for 属性值和表单控件的 id 属性值相同

< input type="radio" id="man" >

< label for="man" >男< /label >

写法二：

  • 使用 label 标签，包裹文字和表单控件，不需要属性

< label >< input type="radio" >男< /label >

按钮：

< button type = "..."> < /button>

type属性值： 说明：

submit 提交按钮，点击后可以提交数据到后台（默认功能）

reset 重置按钮，点击后将表单控件恢复到默认

button 普通按钮，默认没有功能，一般配合 JavaScript 使用

将账号密码类数据放到 form 表单区域（双标签），这样提交和重置才能有功能

< form action="" >...< /form > action 后面是数据提交的地址

无语义的布局标签：

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

  • div:独占一行

  • span:不换行

字符实体

作用：在网页中显示预留字符，以防被浏览器识别为代码命令

显示结果 描述 实体名称

​ 空格 &nbsp；

< 小于号 &alt；

＞ 大于号 &gt；

CSS：

层叠样式表：Cascading Style Sheets , 是一种 样式表 语言，用来描述 HTML 文档的呈现形式（美化内容）

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

< title >...< /title >

< style >

​ /* 选择器{} */

​ p{

​ /* CSS属性 */

​ color:red;

​ }

< /style >

**属性名和属性值成对出现，叫 键值对 **，如： color : red ;

CSS引入方式：

内部样式表：学习使用

  • ​ CSS 代码写在 style 标签里面

外部样式表：开发使用

  • CSS 代码写在单独的CSS文件里面（.css）

  • 在 HTML 里面使用 link 标签引入

< link rel="stylesheet" href="./my.css" >

( rel 表示关系 )

行内样式：配合 JavaScript 使用

  • CSS写在标签的 style 属性值里

< div style= " color : red; font-size : 20px ; " >这是div标签< /div >

选择器：

作用：查找标签，设置样式

基础选择器：

  • 标签选择器：

    使用 标签名 作为选择器，选中同名标签 设置相同的样式 例如：p,h1,div,a,img......

  • 类选择器

  • id选择器

  • 通配选择器

类选择器：

作用：查找标签，差异化设置标签的显示效果

步骤：

  • 定义类选择器： .类名
  • 使用类选择器： 标签添加 class = "类名"

定义类选择器：

< style >

​ .red{

​ color : red;

}

< /style >

使用类选择器：

< div class="red" >这是 div 标签 < /div >

一个 class 里面可以有几个类名，中间加个空格，如：< div class = "red size ..." >...< /size >

id选择器

作用：查找标签，差异化设置标签的显示效果

场景：id 选择器一般 配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

  • 定义 id 选择器：#id名
  • 使用 id 选择器：标签添加 id = "id名"

定义 id 选择器

< style >

red{

​ color : red;

}

< /style >

使用 id 选择器

< div id="red" >这是div标签< /div >

规则：同一个 id 选择器，在一个页面只能用一次

通配符选择器：

作用：查找页面所有标签，设置相同样式

通配符选择器：* ，不需要调用，浏览器 自动 查找页面所有标签，设置相同的样式

*{

​ color : red;

}

画盒子：

目标：使用合适的选择器画盒子

属性名 作用

width 宽度

height 高度

background-color 背景色

文字修饰属性：

字体大小： font-size 单位是px

字体粗细： font-weight 数字（开发使用）：正常400，加粗700；关键字：正常normal,加粗bold

字体倾斜： font-style 清除文字默认的倾斜效果 正常：normal，倾斜：italic

行高： line-height 设置多行文本的间距 数字+px ; 数字(当前标签 font-size 属性值的倍数)

(测量方法：从一行文字的最顶(最底)测量到下一行文字的最顶(最底))

字体族： font-family 属性值：字体名

字体复合属性： font

文本缩进： text-indent 属性值：数字+px ; 数字+em

( 推荐：1em = 当前标签字号大小)

文本对齐： text-align

修饰线： text-decoration

颜色： color

行高-垂直居中技巧：行高属性值等于盒子高度属性值

font 复合属性：

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开

如：font : 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

div{

​ font: italic 700 30px/2 楷体;

}

注意：字号和字体必须书写，否则 font 属性不生效

对齐方式：

文字：

作用：控制内容水平对齐方式，调整的是文字，而不是整个标签

属性名：text-align

属性值 效果

left 左对齐(默认)

center 居中对齐

right 右对齐

例： text-align:center;

图片：

text-align 本质是控制内容对齐方式，属性要设置给内容的父级

< style >

​ < div >{

​ txet-align: center;

}

< /style >

< div >

​ img src="..." alt="...";

< /div >

文本修饰线：

属性名：text-decoration

属性值 效果

none 无

underline 下划线

line-through 删除线

overline 上划线

复合选择器：

定义：由 两个或多个基础选择器 ，通过不同方式组合而成

作用：更准确、更高效的选择目标元素（标签）

后代选择器：

选中某元素的后代元素

写法：父选择器 子选择器（CSS属性），父子选择器之间用空格隔开

< style >

div span{

​ color : red;

}

< /style >

< span > ... < /span >

< div >

​ < span > ... < /span >

< /div >

如上，< div > 所有的 < span > 的文字都会变成红色（包括 < div > 里所有 < span > ，儿子级、孙子级、重孙子级..)

子代选择器：

选中某元素的子代元素(即最近的子级)

写法： 父选择器 > 子选择器（CSS属性），父子选择器之间用 > 隔开

子代选择器只能选择儿子级的标签内容进行改变，对孙子即以后级的标签无效

并集选择器：

选中多组标签设置相同样式

写法：选择器1，选择器2，选择器3，...，选择器N（CSS属性），选择器之间用 ， 隔开

交集选择器：

选中同时满足多个条件的元素

写法：选择器1选择器2（CSS属性），选择器之间连写，没有任何符号

< p class="box" >...< /p >

< p >...< /p >

< div class="box" >...< /div >

p.box{

...;

}

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面

伪类选择器：

伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器：hover (CSS属性)

< style >

​ a:hover{

​ color : red;

}

​ .box:hover{

​ color : red;

}

< /style >

< a href="#" >...< /a >

< div class="box">...< /div >

任何标签都可以设置鼠标悬停状态

伪类-超链接（拓展）

超链接一共有四个状态

选择器 作用

:link 访问前

:visited 访问后

:hover 鼠标悬停

:active 点击时（激活）

提示：如果要给超链接设置以上四个状态，要按 LVHA 顺序写

CSS三大特性

特性：化简代码/定位问题，并解决问题

继承性：

子级标签默认继承父级标签的文字控制属性，当子级有子级的样式时，不会再继承父级标签的样式

层叠性：

特点：

  • ​ 相同的属性会覆盖，后面的 CSS 属性覆盖前面的 CSS 属性

  • ​ 不同的属性会叠加：不同的 CSS 属性都生效

优先性：

当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important : 提高优先权（慎用!）

*{

​ color : red !important; 此时，优先级最低的通配符选择器优先级最高

}

选中的标签范围越大，优先级越低

优先级-叠加计算规则：

叠加计算：如果是复合选择器，则需要权重叠加计算

公式：行内样式，id 选择器个数，类选择器个数，标签选择器个数

规则：

  • 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

  • !important 权重最高

  • 继承权重最低

Emmt 写法：

代码的简写方式，输入缩写 VS Code 会自动生成对应的代码

说明 标签结构 Emmet

类选择器 < div class="box">...< /div > 标签名.类名

id 选择器 < div id="box">...< /div > 标签名#id 名

同级标签 < div >< /div >< p >< /p > div + p

父子级标签 < div >< p >< /p >< /div > div > p

多个相同标签 < span >1< /span >< span>2< /span>< span >3< /span > span*3

有内容的标签 < div >内容< /div > div{内容}

CSS大多数简写方式为属性单词的首字母

背景属性：

名字 属性

背景色 background-color

​

背景图 background-image

背景图平铺方式 background-repeat

背景图位置 background-position

背景图缩放 background-size

背景图固定 background-attachment

背景图复合属性 background

背景图：

属性名：background-image (bgi)

属性值：url

div{

​ ...;

​ background-image:url(...);

}

背景图平铺方式：

属性名：background-repeat (bgr)

属性值 效果

no-repeat 不平铺

repeat 平铺（默认效果）

repeat-x 水平方向平铺

repeat-y 垂直方向平铺

背景图位置：

属性名：background-position (bgp)

属性值 效果

left 左侧

right 右侧

center 居中

top 顶部

bottom 底部

坐标：数字+px 或 正负 都可以

可以只写一个关键字，另一个方向默认为居中

数字只写一个值表示水平方向，垂直方向为居中

背景图缩放：

设置背景大小

属性名： background-size (bgz)

关键字：

​

​ cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

​ contain: 等比例缩放背景图片以完全装入背景区，可能背景区部分空白

百分比：根据盒子尺寸大小计算图片大小

数字 + 单位 （ 例如：px ）

背景图固定：

背景不会随着元素的内容滚动

属性名：background-attachment (bga)

属性值：fixed

背景复合属性：

属性名：background (bg)

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放（空格隔开，不区分顺序）

显示模式：

标签的显示方式

块级元素：

div:

  • 独占一行

  • 宽度默认是父级的100%

  • 添加宽高属性生效

行内元素：

span:

  • 一行可存多个

  • 尺寸由内容撑开

  • 加宽后不生效

行内块元素：

img:

  • 一行存多个

  • 默认尺寸由内容撑开

  • 加宽高生效

转换显示模式：

属性名： display

属性值 效果

block 块级

inline-block 行内块

inline 行内 （不太常用）

结构伪类选择器：

作用：根据元素的结构关系查找元素

选择器 说明

E:first-child 查找第一个E元素

E:last-child 查找最后一个E元素

E:nth-child(N) 查找第N个E元素（第一个元素值为1）

属性值 功能

2n 偶数标签

2n+1;2n-1 奇数标签

5n 找到5的倍数的标签

n+5 找到第5个以后的标签

-n+5 找到第5个以前的标签

伪元素选择器：

作用：创建虚拟元素（伪元素），用来摆放装饰性内容

选择器 说明

E::before 在E元素里面最前面添加一个伪元素

E::after 在E元素里面最后面添加一个伪元素

注意：

  • 必须设置 content:"..." 属性，用来设置 伪元素 内容 ，如果没有内容，则引号留空即可

  • 伪元素默认是 行内 显示模式

  • 权重和标签选择器相同

PxCook

切图设计软件，支持 PSD 文件

有

  • 开发面板：自动智能识别

  • 设计面板：手动测量尺寸和颜色

盒子模型：

盒子模型-组成：

组成部分：

  • 内容区域：width height

  • 内边距-padding (出现在内容与盒子边缘)

  • 边框线-border

  • 外边框-margin (出现在盒子外面)

盒子模型-边框线：

属性名： border (bd)

属性值：边框线粗细 线条样式 颜色（不区分顺序）

属性值 线条样式

solid 实线

dashed 虚线

dotted 点线

单方向边框线：

属性名： border-方位名词 (bd=方位名词首字母，如：bdl)

属性值：边框线粗细 先调样式 颜色 （不区分顺序）

border-top border-right border-left border-bottom

​ 上 右 左 下

盒子模型-内边距：

作用：设置 内容 和 盒子边缘 之间的距离

属性名： padding / padding-方位名词

padding-top padding-right padding-left padding-bottom

​ 上 右 左 下

内边距-多值写法：

方向：顺时针

padding: xxpx xxpx xxpx xxpx;

盒子模型-尺寸计算：

默认情况：

​ 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

给盒子加 border / padding 会撑大盒子

解决：

  • ​ 手动做减法，减掉 border / padding 的尺寸

  • ​ 內减模式：box-sizing:border-box;

盒子模型-外边距：

作用：拉开两个盒子之间的

属性名：margin

提示：与 padding 属性值写法、含义相同

外边距不会撑大盒子

版心居中：

如：

div{

​ ...;

​ margin: 随意数字 auto;

}

盒子本身要提前设置好宽度（width），否则无法自动居中

外边距问题-合并现象：

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

外边距问题-塌陷问题：

场景：父子级标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决办法：

  • 取消子级 margin ，父级设置 padding（这样会撑大父级盒子，父级还要设置 box-sizing:border-box）

  • 父级设置 overflow:hidden

  • 父级设置 border-top

清楚标签默认样式：

*{

​ margin: 0;

​ padding: 0;

}

去除无序、有序列表前的符号：

li{

​ list-style : none;

}

内容溢出 overflow 属性：

作用：控制 溢出 元素的内容的显示方式

属性名： overflow

属性值 效果

hidden 溢出隐藏

scroll 溢出滚动（无论是否溢出，都显示滚动条位置）

auto 溢出滚动（溢出才显示滚轮条位置）

行内元素-内外编剧问题：

场景：行内元素添加 margin 和 padding , 无法改变元素垂直的位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

盒子模型-圆角：

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字 + px / 百分比

属性值是圆角半径

复合属性：从盒子左上角顺时针赋值，没有取值的角与对角取值相同

常见应用：正圆形状：

  • 给正方形盒子设置圆角属性值为 宽高的一半 / 50%

常见应用：胶囊形状：

  • 给长方形盒子设置圆角属性值为 盒子高度的一半

盒子模型-阴影：

作用：给元素设置 阴影 效果

属性名：box-shadow

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：

  • X 轴偏移量和 Y 轴偏移量必须书写

  • 默认是外阴影，内阴影需要添加 inset

标准流：

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个

浮动：

作用：让块元素水平排列

属性名：float

属性值：

  • left 左对齐

  • right 右对齐

浮动后的盒子特点：

  • 顶对齐

  • 具备行内块特点

  • 脱标（脱离标准流）

浮动-产品区域布局：

如果父级宽度不够，浮动的盒子会掉下来

添加 float:left margin-right 、margin-bottom 可以实现块状 li 分区布局

如：

image-20230910142524739

清除浮动：

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：

额外标签法

在父级元素内容的最后添加一个块级元素，设置 CSS 属性 clear : both

类名一般为 .clearfix{...}

如：

.clearfix{

​ clear : both;

}

父级标签最后额外创建一个 div ，把这个类放到这个 div 里面

方法二：

单伪元素法

.clearfix::after{

​ content:"";

​ display: block;

​ clear:both;

}

把这个类直接放到父级 class 里

< div class = "clearfix ...">...< /div >

方法三：

双伪元素法（推荐）

.clearfix::before , .clearfix::after{

​ content : "";

​ display : table;

}

.clearfix::after{

​ clear : both;

}

把这个类直接放到父级 class 里

< div class = "clearfix ...">...< /div >

既能解决塌陷问题，又能解决浮动影响

方法四：

overflow

父级元素添加 CSS 属性： overflow : hidden

浮动-总结：

浮动属性 float ， left 表示左浮动 ， right 表示右浮动

特点：

  • 顶对齐

  • 具备行内块特点

  • 脱标（脱离标准流）

  • 父级宽度不够，浮动的子级会换行

清除浮动：

子级浮动，父级没有高度，子级无法撑开父级高度，影响布局

  • 双伪元素法

拓展：浮动本质作用是实现图文混排的效果

Flex：

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中的脱标现象，布局网页更简单、灵活

Flex-组成：

设置方式：给父级元素设置 display : flex , 子级元素可以自动挤压或拉伸

组成部分：

  • 弹性容器

  • 弹性盒子

  • 主轴：默认在水平方向

  • 侧轴 / 交叉轴：默认在垂直方向

Flex-主轴与侧轴对齐方式：

主轴对齐方式：

属性名：justify-content

属性值 效果

flex-start 默认值，弹性盒子从起点开始依次排序

flex-end 弹性盒子从终点开始依次排序

center 弹性盒子沿主轴居中排序

space-between 弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子之间

​ （弹性盒子之间的间距相等）

space-around 弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子两侧

​ （弹性盒子之间的间距是两端间距的2倍）

space-evenly 弹性盒子沿主轴均匀排序，弹性盒子与容器之间间距相等

侧轴对齐方式：

属性名：

  • align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • align-self 单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值 效果

stretch 弹性盒子沿侧轴线被拉伸至铺满屏幕（弹性盒子没有设置侧轴方向则默认拉伸） （如果弹性盒子在侧轴方向没有尺寸，也会拉伸）

center 弹性盒子沿侧轴居中排列

flex-start 弹性盒子从起点开始依次排列

flex-end 弹性盒子从终点开始依次排列

Flex 修改主轴方向：

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值 效果

row 水平方向，从左向右（默认）

column 垂直方向，从上到下

row-reverse 水平方向，从右向左

column-reverse 垂直方向，从下向上

Flex 弹性伸缩比：

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex 如：flex:1;

属性值：整数数字，表示占用父级剩余尺寸的份数

Flex 弹性换行与行对齐方式：

弹性换行：

属性名：flex-wrap

行对齐方式：

属性名：align-content

属性值 效果

flex-start 默认值，弹性盒子从起点开始依次排序

flex-end 弹性盒子从终点开始依次排序

center 弹性盒子沿主轴居中排序

space-between 弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子之间

​ （弹性盒子之间的间距相等）

space-around 弹性盒子沿主轴均匀排序，空白间距均分在弹性盒子两侧

​ （弹性盒子之间的间距是两端间距的2倍）

space-evenly 弹性盒子沿主轴均匀排序，弹性盒子与容器之间**间

行对齐方式属性值和主轴对齐方式一样

对单行的弹性盒子不生效

经过实践可知，行对齐方式可以在几个盒子超出大盒子大小的情况下，实现主轴对齐方式（因为有弹性换行 flex-wrap），但是要把脖子顺时针旋转90度。总而言之，行对齐方式是以行的视角或方面来进行换行的。主轴对齐方式前提是各个小盒子的宽度不能超过大盒子的宽度，要不然实现不了主轴对齐的各种效果，结果看起来都是一个样

项目目录：

网站根目录是指存放在网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML 、 CSS 、 图片 、JavaScript 等等

  • study

​

images 文件夹：

​ 存放固定使用的图片素材，如：logo、样式修饰等

​

uploads文件夹：

​ 存放非固定使用的图片素材，如：商品图、宣传图需要上传的图片

CSS文件夹：

​

​ 存放 CSS 文件（link 标签引入）

​ base.css：基础公共样式，如：清除默认样式，设置网页基本样式

​

​ index.css：首页 CSS 样式

index.html：

​

​ 首页 HTML 文件

网页制作思路：

布局思路：

​ 先整体再局部，从外到内，从上到下，从左到右

CSS 实现思路：

​ 1.画盒子，调整盒子范围 -> 宽高背景色

​ 2.调整盒子位置 -> flex 布局，内外边距

​ 3.控制图片、文字内容样式

header区域：

header 区域-整体布局：

通栏：宽度与浏览器窗口相同的盒子

标签结构：通栏 > 版心 > logo +导航 + 搜索 + 用户

logo 制作技巧：

logo 功能：

​ 单机跳转首页

​

​ 搜索引擎优化：提升网站百度搜索排名

实现方法：

​ 标签结构：h1 > a > 网站名称（搜索关键字）

​ CSS 样式：

​

​ .logo a{

​ display : block;

​ width : 195px;

​ height : 41px;

​ background-image : url(...);

​ font-size : 0; 隐藏搜索关键字

}

header 区域-导航：

导航功能：

  • 单击跳转界面

实现方法：

  • 标签结构： ul > li * n > a

  • 优势：避免堆砌 a 标签，网站搜索排名降级

header 区域-搜索区域：

实现方法：

  • 标签结构：.search > input + a / button

消除 input 焦点框方法：

​

​ outline : none;

选中 placeholder 属性文字样式方法：

​

​ .search input :: placeholder{

​ ...;

}

搜索图标（放大镜）在大盒子里竖方向居中方法：

​ align-self : center;

header 区域-用户区域：

实现方法：

  • 标签结构： .user > a >img + span

行内块和行内垂直方向对齐方式：

vertical-alibg : middle;

banner 区域：

结构：通栏 banner > 版心 > .left + .right

左侧导航：

实现方法：

  • 标签结构： .left > ul > li * 9 > a

  • 布局思路：

​ a 默认状态：背景图为白色右箭头

右侧课程表：

实现方法：

  • 标签结构： .right > h3 + .content

精品推荐：

实现方法：

  • 标签结构： .recommend > h3 + ul + a.modify
posted @ 2023-09-18 22:36  1st-driver  阅读(164)  评论(0)  编辑  收藏  举报