01:HTML基础
头部<head>
HTML文档的头部标记主要包含页面标题标记、元信息标记、样 式标记、脚本标记、链接标记等。头部标记所包含的信息一般不 会显示在网页上
HTML文档的头部标记主要包含页面标题标记、元信息标记、样 式标记、脚本标记、链接标记等。头部标记所包含的信息一般不 会显示在网页上。
2.2.1 页面标题<title></title>
- 基本语法标题信息显示在浏览器的标题栏上
- 语法说明 title标记是双标记,是开始标记,是结束标 记,两者之间的内容为显示在浏览器的标题栏上的信息。
2.2.2 元信息<meta>
- meta标记用来描述一个HTML网页文档的属性,也称为元信息( meta-information),这些信息并不会显示在浏览器的页面中。 例如作者、日期和时间、网页描述、关键词、页面刷新等。该标记 位于文档的头部(其属性形式是“名称/值”对)。
1.<meta>标记
基本语法:<meta name=" " content=" ">
<meta http-equiv=" " content=" ">
属性说明 meta属性主要分为两组。
name属性与content属性
name属性用于描述网页,它是以“名称/值”形式中的名称, name属性的值所描述的内容通过content属性表示,便于搜索引 擎机器人查找、分类。
http-equiv属性与content属性
http-equiv属性用于提供HTTP协议的响应头报文,它是以“ 名称/值”形式的名称,http-equiv属性的值所描述的内容通过 content属性表示,通常为网页加载前提供给浏览器等设备使用。
HTML颜色设置方法
- 使用RGB(R,G,B),其中R、G、B为是0~255的整数;
- 使用RGB(R%,G%,B%),其中R、G、B为0~100的整数;
- 使用3位或6位十六进制数#RGB或#RRGGBB,R、G、B为十六 进制数,取值范围:0~9、A~F,每一种颜色用2位十六进制数 表示,RR:红色部分,GG:绿色部分,BB:蓝色部分。红色为 #FF0000; #RGB可以转换为#RRGGBB 。例如红色 分别 表示为 #F00、#FF0000。
- 使用颜色英文名称,如red表示红色,green表示绿色,blue表 示蓝色等。
属性语法
基本语法 :
- <标记名称 属性1=“属性值1”属性2=“属性值2... 属4n=”属性值n">
- 属性应在开始标记(首标记)内定义,并且和标记名之间有 一个空格分隔。例如,上例中hr标记中,align为属性,center为 属性值,属性值可以直接书写,也可以使用双引号“”括起来。
添加空格与特殊符号
在HTML文件中,添加空格的方式与其他文档添加空格 的方式不同,网页中通过代码控制来添加空格,而在其他编 辑器中通过键盘空格键来输入空格。
基本语法: <body> &It;®×</body>
注:在body标记内通过键盘无论输入多少空格、回车符,页面 在显示时都会忽略。
标签语法
HTML 超文本标记语言——HyperText Markup Language。
-
超文本:链接
-
标记:标签,带尖括号的文本
标签结构
-
标签要成对出现,中间包裹内容
-
<>里面放英文字母(标签名)
-
结束标签比开始标签多 /
-
标签分类:双标签和单标签
HTML骨架
-
html:整个网页
-
head:网页头部,用来存放给浏览器看的信息,例如 CSS
title:网页标题 -
body:网页主体,用来存放给用户看的信息,例如图片、文字
提示
VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键
标签的关系
作用:明确标签的书写位置,让代码格式更整齐
-
父子关系(嵌套关系):子级标签换行且缩进(Tab键)
<html>
<head></head>
</html>
-
兄弟关系(并列关系):兄弟标签换行要对齐
<head></head>
<body></body>
注释
概念:注释是对代码的解释和说明,能够提高程序的可读性,方便理解、查找代码。
注释不会再浏览器中显示。
在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /,html文件中注释为<!-- -->。
标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
显示特点:
-
文字加粗
-
字号逐渐减小
-
独占一行(换行)
经验
h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制
段落标签
一般用在新闻段落、文章段落、产品描述信息等等
<p>段落</p>
显示特点:
-
独占一行
-
段落之间存在间隙
换行和水平线
-
换行:br
-
水平线:hr
<br>
<hr>
文本格式化标签
文本修饰标记各类浏览器均支持,各类网页开发工具中仍然有 这类标记。
作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
提示:strong、em、ins、del 标签自带强调含义(语义)。
字体font标记
- font标记用来改变默认的字体、颜色、大小等属性,这些 更改分别通过不同的属性定义完成
- 基本语法:
<font face=" " size=" " color=" "></font>
属性说明:
拼音/音标注释ruby 标记和rt/rp 标记
基本语法:
<ruby>
中<rp>(</rp><rt>zhong</rt><rp>)</rp>
国<rp>(</rp><rt>guo</rt><rp>)</rp>
</ruby>
- ruby标记定义中文注音或字符,与rt/rp标记一同使用。
- ruby标记由一个或多个字符(需要解释或发音的字符)和 一个提供该信息的rt 标记组成,还包括可选的rp标记,rp标 记定义当浏览器不支持ruby标记时显示的内容。
- 注意有些浏览器当定义rp标记后,将不起效果。
段落缩进标记<blockquote>
段落缩进blockquote标记是块级标记,常称为块引用标 记,浏览器在 blockquote标记前后添加了换行,并增加了 外边距。
- 一对blockquote标记能够向右缩进5个西文字符的位置。
- 基本语法
<body>
<blockquote>需要缩进的内容</blockquote>
</body>
预格式化标记<pre>
-
<pre></pre>标记对网页中的文字段落进行预格式化,浏览器 会完整保留设计者在源文件中所定义的格式,包括各种空格、缩 进以及其他特殊格式。
- 基本语法
<pre>预格式化文本</pre >
<pre>
春 晓
孟浩然春眠不觉晓,
处处闻啼鸟
夜来风雨声,
花落知多少
</pre>
图像标签
网页上插入图像的方法就是使用标记。它的众多 属性可以控制图像的路径、尺寸和替换文字等各种功能。
基本语法: <img src="url" width="" height="" hspace="" vspace="" align="" border="" alt="">
属性说明:
- src(source):图像的 URL路径。alt :添加图片的替代文字。
- width/height:设置图片的宽度和高度(px,%)。
- border:设置图片边框 (px);
- align:设置图片对齐方式(水平/垂直两个方向);
- hspase/vspase: 图片的间距设置(单位不加px)
设置图像对齐方式及间距
设置图像热区链接
基本语法:
<img src="图片地址" usemap="#映射图片名称">
<map name="映射图片名称”>
<area shape="热区形状1" coords="热区坐标1" href="URL1">
<area shape="热区形状2"coords="热区坐标2" href="URL2">
</map>
作用:在网页中插入图片
<img src="图片的 URL">
src用于指定图像的位置和名称,是 <img> 的必须属性。
图像属性
属性语法
-
属性名="属性值"
-
属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序
路径
概念:路径指的是查找文件时,从起点到终点经历的路线。
路径分类:
-
相对路径:从当前文件位置出发查找目标文件
-
绝对路径:从盘符出发查找目标文件
-
Windows 电脑从盘符出发
-
Mac 电脑从根目录出发
-
相对路径
查找方式:从当前文件位置出发查找目标文件
特殊符号:
-
/ 表示进入某个文件夹里面 → 文件夹名/
-
. 表示当前文件所在文件夹 → ./
-
.. 表示当前文件的上一级文件夹 → ../
绝对路径
查找方式:Windows 电脑从盘符出发;Mac 电脑从根目录(/)出发
<img src="C:\images\mao.jpg">
提示
Windows 默认是 \ ,其他系统是 /,建议统一写为 /
特殊的绝对路径 → 文件的在线网址:https://www.itheima.com/images/logo.png ",应用场景:网页底部友情链接
超链接标签
超链接是指从一个网页指向一个目标的连接关系。
这个目标可以是:一个网页、图片、一个电子邮件地址 、一个文件或是一个应用程序。
作用:点击跳转到其他页面。
<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>
超链接语法、路径及分类
超链接a (Anchor 锚)标记语法
基本语法:<a href="url" name=" " title=" " target=" ">超链接标题</a>
语法说明:
超链接由目的地址、链接标题、打开方式等三部分组成。
- 1.href (href-Hypertext reference):链接指向的目标文件。
- 2.title:指向链接的提示信息。
- 3.target:指定链接页面打开的窗口,有5 种取值:_parent –父框架中 打开;_blank-新窗口;_self – 当前窗口,默认值;_top -在顶级窗 口或标签页中打开,忽略所有框架;framename-框架或浮动框架名
超链接路径
超链接路径:绝对路径、相对路径、根路径。
绝对路径指文件的完整路径,包括盘符或文件传输的协议http、 ftp等,一般用于网站的外部链接。 绝对路径有2种。(1)从盘符开始定义的文件路径,如 D:\web\index.html;(2)从协议开始定义的URL网址,例如中国 教育与科研计算机网的网址http://www.edu.cn。
- 相对路径是指相对于当前文件的路径,从当前文件所在位置指向 目的文件的路径。例如 web/index.html。
- 根路径是指从网站的最底层开始起,一般网站的根目录就是域名 下对应的文件夹。以一个斜杠“/”开头,代表根目录,然后书写文 件夹名,最后书写文件名。例如/download/index.html。
超链接分类
超链接可以分为内部链接和外部链接两种。内部链接是指网 站内部文件之间的链接,而外部链接是指网站内的文件链接 到站点内容外的文件。
超链接的应用
创建文件下载超链接
网站提供软件、文件等资料下载,下载文件的链接指向文件 所在的相对路径或绝对路径,文件类型: *.doc/*.pdf/*.exe/*.rar等。
基本语法:<a href="url">链接内容</a>
5.3.2 创建FTP站点访问超链接
FTP服务器链接和网页链接区别在于所用协议不同,浏览网页 采用http协议,而FTP服务器采用FTP协议连接。
基本语法 :<a href="ftp:服务器IP地址或域名">链接的文字</a>
创建图像链接
链接标题是一个图像,浏览时单击链接图像时,可以打开 超接href所设置的URL。
基本语法:<a href="#"><img src="url" width="" height="" align="" border="" alt=""></a>
创建电子邮件超链接
一般网站上都会设置“联系我们”这样的栏目或超链接,目的是方便用户及 时与网站管理员进行沟通与联系--电子邮件超链接。
基本语法:<a href="mailto:E-mail地址[?subject=邮件主题[&参数=参数值]]">链接内容</a>
创建页面书签链接
书签是指到文章内部的链接,可是实现段落间的任意跳转 。实现这样的链接要先定义一个书签作为目标端点,再定义到 书签的链接。
书签定义步骤:
1.定义书签名:<a name="书签名称">书签标题</a>
2.定义书签链接:
<a href="#书签名称">书签标题</a><!--同一页面-->
<a href="URL#书签名称">书签标题 </a><!--不同页面间-->
注意:URL:是放置标记的HTML文件的URL
滚动文字
要设计一个更加生动的网站还需要在网页中添加多媒体 元素。多媒体元素还可以更好地体现设计者的个性,通常滚动 文字可以增加文字的动态效果。
添加滚动文字
通过marquee标记可以添加滚动文字(内容),增加动态 效果,丰富网页的内容。
基本语法:
<marquee width="" height="" bgcolor="" direction="upldown/left/right" behavior="scroll/slide/alternate" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" οnmοuseοver="this.stop()" onMouseOut="this.start()">滚动内容
</marquee>
语法说明 :
- marquee标记是双(成对)标记,以开始,以结 束,将需要滚动的内容放到marquee标记之间,同时也可以设置滚动内 容的样式。
- marquee标记中设置onMouseOver= “this.stop()”属性值对的作用是 当光标移动到滚动文字区域时,滚动内容将暂停滚动;设置 onMouseOut= "this.start()"属性值对的作用是当鼠标移出滚动文字区域 时,滚动内容将继续滚动。
设置滚动文字其它属性
embed标记
<embed>标记定义了一个容器,用来嵌入外部应用或者互 动程序(插件)。可以嵌入图像、音频、视频文件以及 HTML文件,为网页增加更多的炫丽的效果。
注意:现在已经不建议使用<embed>标记了,可以使用 <img>,<iframe>,<video>,<audio>等标记代替。
基本语法:<embed src="ur!" width="" height=""type="">
语法说明:width、height:整型值,单位为像素。设置宽度和高度会出现播放界面,否则不显示播放界面。一些高版本浏览器不设置宽度和高度也可以出现播放界面。如果播放声音、音乐文件作为背景音乐时,必须同时将宽度和高度属性的值设置为0。
src:设置媒体文件的路径。
浮动框架
浏览器窗口含有孤立的子窗口称为浮动框架。在浏览器 窗口中使用标记可以嵌入浮动框架。
音频
<audio src="音频的 URL"></audio>
常用属性
拓展:书写 HTML5 属性时,如果属性名和属性值相同,可以简写为一个单词
<!-- 在 HTML5 里面,如果属性名和属性值完全一样,可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>
视频
<video src="视频的 URL"></video>
常用属性
<!-- 在浏览器中,想要自动播放,必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>
02:列表、表格、表单
HTML中列表一共有5种,分别是无序列表、有序列表、定义 列表、菜单列表和目录列表。常用的列表有无序列表、有序列表、 定义列表等3种。
列表
作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。
无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul 嵌套 li,ul 是无序列表,li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
注意事项:
-
ul 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
注意事项:
-
ol 标签里面只能包裹 li 标签
-
li 标签里面可以包裹任何内容
定义列表
标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
- dt标记的由来:definition term
- dd标记的由来: definition description
注意事项:
-
dl 里面只能包含dt 和 dd
-
dt 和 dd 里面可以包含任何内容
列表嵌套
在HTML文件中,列表嵌套使用不仅使网页的内容布局更加美 观,而且使显示的内容更加清晰、明白。
基本语法:
<ul>
<Ii >项目名称
<o1>
<li >项目名称 </li>
</o1>
</li>
</ul>
表格
网页中的表格与 Excel 表格类似,用来展示数据。
表格是网页设计制作不可缺少的元素,它以简洁明了和高 效快捷的方式将图片、文本、数据和表单的元素有序的显示在 页面上,让我们可以设计出漂亮的页面。
基本使用
标签:table 嵌套 tr,tr 嵌套 td / th。
注意:<table>、<tr>和<td>是创建表格的基本标签,缺一不可。<table>用于定义一个表格<tr>用于定义表格中的行,必须嵌套在<table>标签中,<td>用于定义表格中的单元格,也可称为表格中的列,必须嵌套在<tr>标签中。
提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
表格结构标签
作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。
提示:表格结构标签可以省略。
表格属性设置
表格是网页文件中布局的重要元素,制作网页的过程中常常需 要对网页中的表格做一些设置,对表格的设置实质是对表格table标 记属性的一些设置。
1.表格的边框属性--border
2.边框的颜色--bordercolor
3.背景颜色—bgcolor
4.背景图像—background
5.表格宽度与高度—width/height
6.表格对齐属性-align
表格单元格间距、单元格边距属性
设置表格行的属性
表格行tr标记的属性用于设置表格某一行的样式,其属 性设置如下表所示。
11.4.1 表格行内容水平对齐的属性
<tr align="left | center |right"> </tr>
11.4.2 表格行内容垂直对齐的属性
<tr valign="top | middle | bottom"></tr>
设置单元格的属性
表格列标记td的属性可以设置表格单元格的显示风格。常用的 属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。
合并单元格
作用:将多个单元格合并成一个单元格,以合并同类信息
合并单元格的步骤:
-
明确合并的目标
-
保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
-
跨行合并,保留最上单元格,添加属性 rowspan
-
跨列合并,保留最左单元格,添加属性 colspan
-
-
删除其他单元格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
注意:不能跨表格结构标签合并单元格(thead、tbody、tfoot)。
表 格 嵌 套 - 语 法
表单
表单是较为复杂的HTML元素,经常与脚本、动态网页、后台 数据处理等结合在一起使用,是设计动态网页的必备元素。
利用表单可以在HTML页面中插入一些表单控件(元素),如文 本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等, 完成各类信息的采集。
作用:收集用户信息。
基本语法:
<form method="post" action="">
<input type="text" name="">
<textarea name="" rows="" cols=""></textarea>
<select name="">
<option value=""selected> </option >
</select>
</form>
使用场景:
-
登录页面
-
注册页面
-
搜索区域
表单form标记属性
name:给定表单名称,表单命名之后就可以用脚本语言(如VBScript或JavaScript)对它进行控制。action:设置表单处理程序的网络路径和程序名,当用户提交表单时,服务器将执行action属性所设置的程序。
method:用于指定表单处理表单数据方法,有get和post两个值(默认get)
- GET 为默认值这种方式提交的数据将以"?key=value&key=value”显示在浏览器的地址栏中,保密性差且有数据量限制;
- post方法,使用HTTP实体头域发送数据到Web服务器,没有数量限制,因此开发中通常使用POST方式提交表单。
enctype: 规定表单数据在发送到服务器之前如何编码。有三种 取值,分别如下 :
- application/x-www-form-urlencoded (默认值,在发送前编码所 有字符,空格被编码为’+’ ,特殊字符被编码为ASCII十六进制字符, 少量文本数据)
- multipart/form-data (指定传输数据编码方式为二进制,比如图片、 mp3、文件,主要用于文件上传功能,并且不对字符编码 )
- text/plain (纯文本的传输,空格转换为 “+” 加号,但不对特殊字符 编码,上传大量文本数据)
表单信息的输入
表单的主要功能是为用户提供输入信息的接口,将输入信息发送请求 到服务器并等待服务器响应。表单中输入信息的标记是input标记,可以输 入一行信息。
一般形式:输入类型标记 <input type="控件类型 ” name="” value=" ...>
< input >标记属性
◼ type属性,给出输入控件的类型,常用的控件类型有:text,textarea,radio, checkbox,button,image,hidden,password,file,submit/reset
◼ name属性,设置输入控件的名字,程序需要通过控件名称处理用户输入数据,同 时,设置控件名称可以增加HTML代码的可读性。
◼ value属性,保存用户的输入和选择,服务器通过调用输入区域的value属性值来 获得输入控件的数据。另外,用户可以通过value属性来指定输入区域的缺省
input 标签
input 标签 type 属性值不同,则功能不同。
去掉边框线
outline:1px solid green
<input type="..." >
单行文本输入框
<input name="" type="text" maxlength="" size="" value="" readonly>
语法说明:
- maxlength:设置单行输入框输入的最大字符数;
- size:设置单行输入框可显示的最大字符数;
- value:文本框的值,指定输入框中初始值;
- readonly: 只读,文本框不可编辑。
input 标签占位文本
占位文本:提示信息,文本框和密码框都可以使用。
<input type="..." placeholder="提示信息">
单选框
常用属性
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
提示:name 属性值自定义。
上传文件
默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。
<input type="file" multiple>
多选框
多选框也叫复选框,默认选中:checked。
常用属性
◼name属性,name为复选框的名称,便于程序获取用户输入
◼value属性,每一个checkbox 必须有一个value,当复选框选中时,value值 便会传到表单form的action属性指定的程序中。
◼checked属性,用来设置该复选框缺省时是否被选中。
每一个复选框name、value属性都是不同的
<input type="checkbox" checked> 敲前端代码
其它表达方式
<textarea rows=""cols=""wrap="soft|hard" readonly required disabled maxlength></textarea>
注:rows:指定输入的行数;cols:指定输入的列数;wrap:指定文本自动换行,值 分别为:soft|hard,HTML5中soft-提交时不换行,hard-提交时换行。
- readonly:指示用户无法修改文本区内的内容
- required:定义为了提交该表单,该 textarea 的值是否是必需的
- disabled:规定禁用文本区域
- maxlength:在文本区域中允许的最大字符数
下拉菜单
标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
默认显示第一项,selected 属性实现默认选中功能。
文本域及隐藏框
文件上传标记 <input name="" type="file” size="" accept="">
语法说明:
- 选择文件后并不能真正打开,只是将文件名回填到文件输入框内。
- size属性显示文本框长度。
- accept属性设置上载文件过滤,即点击“浏览”按钮时,只显示指定文件 类型的文件列表。
作用:多行输入文本的表单控件。
<textarea>默认提示文字</textarea>
注意点:
-
实际开发中,使用 CSS 设置 文本域的尺寸
-
实际开发中,一般禁用右下角的拖拽功能
隐藏输入域<input name=”" type="hidden" value="">
语法说明:
- 在一个表单中,可以定义隐藏表单元素,它在网页上并不显示,不需要 用户输入。
- 主要目的是随表单一起传给表单处理程序一个特定的值,用于为网页处 理程序传送数据。
label 标签
作用:网页中,某个标签的说明文本。
经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
-
写法一
-
label 标签只包裹内容,不包裹表单控件
-
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
-
<input type="radio" id="man"> <label for="man">男</label>
写法二:使用 label 标签包裹文字和表单控件,不需要属性
<label><input type="radio"> 女</label>
提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
<button type="">按钮</button>
表单提交
- 表单填写完毕后,单机submit按钮,结束表单输入,将表单数据传送到服务器端 ,由表单<form>标记中的action属性指定的服务器上的程序处理用户输入数据。
表单重置
- 表单清除就是要将表单中已做的输入和选择全部清除,重新填写。
value: 指定显示在按钮上的文字,默认值分别为“提交” 、 “重置 ” 、 “确定”等。需要给value赋个初值。
<!-- 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>
提示:按钮需配合 form 标签(表单区域)才能实现对应的功能
提交按钮、重置按钮和普通按钮
普通按钮 <input name="" type="button" value="" oncick="">
- name: name为按钮名称,便于程序对按钮的操作
- value: 指定显示在按钮上的文字
- 单击普通按钮时,如果定义onclick属性,才能调用相应的事件 处理函数
图像按钮
设置input标记的type属性值为image, 可以实现向表单中插入一个图像按钮 ,用户可利用图像按钮在网页中插入一张图像,通过src属性加载图像。
定义域和域标题
利用域标记可将表单内的相关元素进 行分组。当一组表单元素放到fieldset标记内时,浏览器会以特殊方 式来显示它们,它们可能有特殊的边界、3D效果,或者可创建一个 子表单来处理这些元素。 标记定义域标题。
基本语法:
语义化
无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
-
div:独占一行
-
span:不换行
<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>
有语义的布局标签
字符实体
03:CSS基础
CSS属性值中的单位
绝对单位
绝对单位在网页中很少使用,一般多用在传统平面印刷 中,但在特殊场合使用绝对单位是很必要时的。
绝对单位包括:英寸、厘米、毫米、磅和pica(皮卡),其对 应的英文单位分别是in(1in=2.54cm)、cm、mm、 pt( 1pt=1/72in)、pc(1pc=12pt)。
相对单位
相对单位与绝对单位相比显示大小不是固定的,它所设置的对 象受屏幕分辨率、或视觉区域、浏览器设置以及相关元素的大小等 因素影响。
注意:经常使用的相对单位包括:em、ex、px、%。
- em:em参照的对象是其父元素的font-size,1em等于其父元素 的font-size一倍。如果设置当前元素的font-size为0.75em,而其 父元素的font-size是16px时,则当前元素的font-size是0.75 * 16px = 12px;
- ex:以所使用的字体中小写字母x的高度作为参考,在实际使用中 ,浏览器将通过em的值除以2得到ex的值
- px:像素是CSS中使用频率最高的单位,是相对于屏幕显示器分 辨率而言的。
- %:参考父元素中相同属性的值。例:父元素宽度为200px, 子元 素宽度为50%,则子元素实际宽度为100px
CSS初体验
CSS(Cascading Style Sheet)层叠样式表,也称为级 联样式表,用来设计网页风格。
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。
书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。
<title>CSS 初体验</title>
<style>
/* 选择器 { } */
p {
/* CSS 属性 */
color: red;
}
</style><p>体验 CSS</p>
提示:属性名和属性值成对出现 → 键值对。
CSS的特点
CSS 通过定义标记或标记属性的外在表现,对页面结构 风格进行控制,分离文档的内容和表现,克服了传统HTML 的缺点。将CSS 嵌入在页面中,通过浏览器解释执行,而且 CSS 文件是文本文件,只要理解了HTML 就可以掌握它。
CSS的优势:
1.表现和内容相分离 CSS通过定义HTML标记的样式,使得页面内容和显示 相分离,简化了网页格式设计,也使得对网页格式的修改更 方便。
2.加强了网页的表现力 CSS样式属性提供了比HTML更多的格式设计功能。例如,去掉网页 超级链接的下划线、给文字添加阴影等。
3.增强了网站风格的一致性 CSS样式定义到样式表文件中,在多个网页中同时应用样式表文件 中的样式,就确保了多个网页具有一致的格式。可以随时更新样式表文件 ,改变网站风格。大大降低了网站的开发与维护工作。
CSS编辑方法
1.写在HTML文件里;
2.写在独立的*.CSS文件里。
CSS基本语法:
CSS引入方式
◼内联样式表(行内样式)(Inline Style Sheet)
◼内部样式表(Internal Style Sheet)
◼链接外部样式表(Link External Style Sheet)
◼导入外部样式表(Import External Style Sheet)
-
内部样式表:学习使用
-
CSS 代码写在 style 标签里面
-
-
外部样式表:开发使用
-
CSS 代码写在单独的 CSS 文件中(.css)
-
在 HTML 使用 link 标签引入
-
<link rel="stylesheet" href="./my.css">
行内样式(内联样式) :配合 JavaScript 使用
-
CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>
导入外部样式表
选择器
作用:查找标签,设置样式。
标签选择器
标签选择器:使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如:p, h1, div, a, img......
<style>
p {
color: red;
}
</style>
注意:标签选择器无法差异化同名标签的显示效果
类选择器
作用:查找标签,差异化设置标签的显示效果。
步骤:
-
定义类选择器 → .类名
-
使用类选择器 → 标签添加 class="类名"
<style>
/* 定义类选择器 */
.red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>
注意:
类名自定义,不要用纯数字或中文,尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名,类名之间用空格隔开
开发习惯:类名见名知意,多个单词可以用 - 连接,例如:news-hd。
id选择器
作用:查找标签,差异化设置标签的显示效果。
场景:id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式
步骤:
-
定义 id 选择器 → #id名
-
使用 id 选择器 → 标签添加 id= "id名"
<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>
规则:同一个 id 选择器在一个页面只能使用一次。
CSS 属性选择器
定义属性选择器时,方括号“[]”将属性包围住,如下所示: [属性名]{属性:属性值;属性:属性值;...;} [title]{color:red;} /*带有title属性的所有元素设置样式*/
通配符选择器
作用:查找页面所有标签,设置相同样式。
通配符选择器: *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
* {
color: red;
}
经验:通配符选择器可以用于清除标签的默认样式,例如:标签默认的外边距、内边距。
盒子尺寸和背景色
CSS列表样式
1. list-style-type: disc|circle|square|decimal|lowerroman|upper-roman|lower-alpha|upper-alpha|none
2. list-style-image : url(*.gif)|none
3. list-style-position : inside | outside
CSS文本样式
1. 字符间距 letter-spacing:normal | 长度单位
2. 行距 line-height:normal | 比例 | 长度单位 | 百分比
3. 首行缩进 text-indent:长度单位 | 百分比单位
4. 字符装饰 text-decoration:none | underline | overline | linethrough
5. 英文大小写转换 text-transform:uppercase | lowercase | capitalize[首字母大写]| none
6. 水平对齐 text-align:left | right | center | justify
7. 垂直对齐 vertical-align: top | middle | bottom | text-top | text-bottom
6、7只对inline元素、inline-block元素和普通的文本起作用
文字控制属性
字体大小
-
属性名:font-size
-
属性值:文字尺寸,PC 端网页最常用的单位 px
经验:谷歌浏览器默认字号是16px。
字体样式(是否倾斜)
作用:清除文字默认的倾斜效果
属性名:font-style
属性值
-
正常(不倾斜):normal
-
倾斜:italic
行高
作用:设置多行文本的间距
属性名:line-height
属性值
-
数字 + px
-
数字(当前标签font-size属性值的倍数)
line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;
行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。
单行文字垂直居中
垂直居中技巧:行高属性值等于盒子高度属性值
注意:该技巧适用于单行文字垂直居中效果
div {
height: 100px;
background-color: skyblue;
/* 注意:只能是单行文字垂直居中 */
line-height: 100px;
}
字体族
属性名:font-family
属性值:字体名
拓展(了解):font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找
-
font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
font复合属性
使用场景:设置网页文字公共样式
- font-size设置字号
- font-family设置字体
在CSS中使用font属性可以设置丰富的字体,美化页面的外观。 其中font-family专门用于设置字体名称系列。
1.基本语法: font-family:字体1,字体2,…,字体n
2.语法说明 属性值为多个字体名称时,可以使用逗号(,)分隔。浏览器依 次查找字体,只要存在就使用该字体,不存在将会继续找下去,以 此类推,直到最后一种字体,仍不存在则使用默认字体(宋体)。 如果字体名称中出现空格,必须使用双引号将字体括起来,比如 Times New Roman。
- font-style设置字体样式
在HTML中,使用、标记可将文字设置 成为斜体。在CSS中可以使用font-style属性设置字体的风格,例如 显示斜体字样。
1.基本语法
font-style: normal | italic | oblique
2.语法说明
font-style : normal (不使用斜体,默认) italic (斜体显示) oblique(倾斜字体显示)
- font-weight设置字体粗细
在HTML中使用或标记 来设置字体加粗。在CSS中可以使用font-weight属性用于设 置文本字体的粗细。
1.基本语法
font-weight: normal | bold | bolder | lighter |100|200|…|900
2.语法说明
100-900(9个层次,数字越小字体越细、数字越大字体越粗)
- font-variant设置字体变体
font-variant属性用于设置字体变体,主要用于设置英文 字体,实际上是设置文本字体是否为小型的大写字母。
1.基本语法
font-variant: normal | small-caps
2.语法说明
font-variant: normal (默认正常)| small-caps (小型的大写字 母字体)
- font设置综合字体属性
font属性是复合属性,包括字体粗细、风格、字体变体、 大小/行高及字体名称等多个属性的设置。
1.基本语法 font: font-style font-weight font-variant font-size/line-height font-family
2.语法说明
- 利用font属性一次完成多个字体属性的设置,属性值与属性值之间必须使 用空格隔开。前三个属性值可以不分先后顺序,默认为normal。
- 大小和字体名称系列必须显式指定,先设置大小,再设置字体系列。行高 、字体大小中间用“/”分隔,行高为可选的属性。font属性可以继承。
CSS属性命名规范:CSS样式属性由多个单词构成时,单词之间使用“-” 连字符连接。
复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
div {
font: italic 700 30px/2 楷体;
}
注意:字号和字体值必须书写,否则 font 属性不生效 。
文本缩进
属性名:text-indent
属性值:
-
数字 + px
-
数字 + em(推荐:1em = 当前标签的字号大小)
p {
text-indent: 2em;
}
文本对齐方式
作用:控制内容水平对齐方式
属性名:text-align
text-align本质是控制内容的对齐方式,属性要设置给内容的父级。
<style>
div {
text-align: center;
}
</style>
<div>
<img src="./images/1.jpg" alt="">
</div>
文本修饰线
属性名: text-decoration
color 文字颜色
提示:只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色。
调试工具
作用:检查、调试代码;帮助程序员发现代码问题、解决问题
-
打开调试工具
-
浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
-
F12
-
使用调试工具
04-1-CSS进阶
复合选择器
定义:由两个或多个基础选择器,通过不同的方式组合而成。
作用:更准确、更高效的选择目标元素(标签)。
后代选择器
后代选择器:选中某元素的后代元素。
选择器写法:父选择器 子选择器 { CSS 属性},父子选择器之间用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* li {
color: red;
} */
/* .red {
color: red;
} */
/* 后代选择器 中间用空格隔开 */
/* ul li {
color: red;
} */
/* 只让第一组ul 里面的li变色 */
.first li {
color: red;
}
</style>
</head>
<body>
<ul class="first">
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ol>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
</body>
</html>
小技巧: 后代选择器执行代码的时候,先执行孩子,后执行父亲。 先找li 后找ul
子代选择器
子代选择器:选中某元素的子代元素(最近的子级)。
选择器写法:父选择器 > 子选择器 { CSS 属性},父子选择器之间用 > 隔开。
<style>
div > span {
color: red;
}
</style><div>
<span>这是 div 里面的 span</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
并集选择器
并集选择器:选中多组标签设置相同的样式。
选择器写法:选择器1, 选择器2, …, 选择器N { CSS 属性},选择器之间用 , 隔开。
<style>
div,
p,
span {
color: red;
}
</style><div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
交集选择器
交集选择器:选中同时满足多个条件的元素。
选择器写法:选择器1选择器2 { CSS 属性},选择器之间连写,没有任何符号。
<style>
p.box {
color: red;
}
</style><p class="box">p 标签,使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签,使用了类选择器 box</div>
注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面。
伪类选择器
伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式。
鼠标悬停状态:选择器:hover { CSS 属性 }
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style><a href="#">a 标签</a>
<div class="box">div 标签</div>
超链接伪类
选择器::marker{
color:red;
}
可以改变li标签小圆点颜色。
提示:如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写。
经验:工作中,一个 a 标签选择器设置超链接的样式, hover状态特殊设置
表单获得焦点选择器 focus
/* 当表单得到光标的时候 */
input:focus {
width: 300px;
background-color: pink;
}
基本选择器
基本选择器 | 说明 | 举例 |
---|---|---|
标签选择器 | 选择页面中同名标签 | div {color: red;} |
类选择器 | 选择1个或者多个 | .red {color: red;} <div class="red"></div> |
id选择器 | 唯一的,只能使用一次 | #red {color: red;} <div id="red"></div> |
通配符选择器 | 选择所有的标签 | * {color: red;} |
复合选择器
复合选择器 | 说明 | 举例 |
---|---|---|
后代选择器 | 选择子孙后代 用 空格 隔开 | div span {color: red;} |
子代选择器 | 只选最近一级孩子(亲儿子选择器) 用 > 隔开 | div>span{color: red;} |
并集选择器 | 选择多个标签, 用 逗号 隔开 理解为 和 | div, span, p {color: red;} |
交集选择器 | 既又的关系,既是某标签,又是某类名 | p.one {color: red;} |
伪类选择器 | 状态关系, :hover 鼠标经过 | div:hover {color: red;} |
CSS特性
CSS特性:化简代码 / 定位问题,并解决问题
-
继承性
-
层叠性
-
优先级
继承性
继承性:子级默认继承父级的文字控制属性。
注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。
层叠性
特点:
-
相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性
-
不同的属性会叠加:不同的 CSS 属性都生效
<style>
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;
}
</style>
<div>div 标签</div>
注意:选择器类型相同则遵循层叠性,否则按选择器优先级判断
优先级
优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div 标签</div>
基础选择器
规则:选择器优先级高的样式生效。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大,优先级越低)
复合选择器-叠加
叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一级之间不存在进位)
规则:
-
从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
-
!important 权重最高
-
继承权重最低
选择器 | 权重 | 说明 |
---|---|---|
继承/ *通配符 | 0 | 没有权重 |
标签选择器 | 1 | 累加 |
类选择器/伪类选择器 | 10 | 累加 |
id选择器 | 100 | 累加 |
行内 | 1000 | |
!important | ∞ | |
继承的权重是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* li的权重是1 ,比 0 高 */
li {
color: red;
}
/* 继承的权重是 0, 所以无法直接修改 li的样式 */
.box {
color: green !important;
}
/* 结论: 想要修改谁的样式,就要选择谁 */
</style>
</head>
<body>
<ul class="box">
<li>我是文字</li>
</ul>
</body>
</html>
z-index:设置图层层叠的上下层关系,实现多个图层层叠的效果,子层 永远在父层之上,值越大越在上层,前提条件是position属性值为 “absolute” 。
Emmet 写法
Emmet写法:代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。
-
HTML标签
-
CSS:大多数简写方式为属性单词的首字母
04-背景属性
背景图
网页中,使用背景图实现装饰性的图片效果。
-
属性名:background-image(bgi)
-
属性值:url(背景图 URL)
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}
提示:背景图默认有平铺(复制)效果。
平铺方式
属性名:background-repeat(bgr)
背景图位置
属性名:background-position(bgp)
属性值:水平方向位置 垂直方向位置
-
关键字
坐标
-
水平:正数向右;负数向左
-
垂直:正数向下;负数向上
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}
提示:
关键字取值方式写法,可以颠倒取值顺序
可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中
背景图缩放
作用:设置背景图大小
属性名:background-size(bgz)
常用属性值:
-
关键字
-
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
-
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
-
-
百分比:根据盒子尺寸计算图片大小
-
数字 + 单位(例如:px)
div {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}
提示:工作中,图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同
背景图固定
作用:背景不会随着元素的内容滚动。
属性名:background-attachment(bga)
属性值:fixed
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
显示模式
显示模式:标签(元素)的显示方式。
作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点:
-
独占一行
-
宽度默认是父级的100%
-
添加宽高属性生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素</title>
<style>
/* 块级元素 */
/* 1. 独占一行 */
/* 2. 可以设置宽度和高度 */
/* 3. 宽度默认和父亲一样宽,如果么有父亲,则和浏览器一样宽 */
.box1,
.box2 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<p>abc</p>
<div class="box1">div1</div>
<div class="box2">
<p>123</p>
<p>123</p>
</div>
</body>
</html>
行内元素
特点:
-
一行可以显示多个
-
设置宽高属性不生效
-
宽高尺寸由内容撑开
行内块元素
特点:
-
一行可以显示多个
-
设置宽高属性生效
-
宽高尺寸也可以由内容撑开
转换显示模式
属性:display
经验:
我们重点记住把行内元素比如链接转换为 块级或者行内块即可
display: block 尽量写到样式的第一行
块级元素可以控制里面的行内元素或者行内块元素 左中右对齐 tac 控制
块级元素不能控制里面的块级元素对齐
04-2-CSS高级
01-定位(重点)
position:定位,static|absolute|relative|fixed
定位的盒子通过边偏移来移动位置。在CSS中,通过top、bottom、left和right属性定义元素的边偏移
作用:灵活的改变盒子在网页中的位置
实现:
1.定位模式:position
2.边偏移:设置盒子的位置
-
left
-
right
-
top
-
bottom
静态定位static
- 静态定位是元素的默认定位方式,无定位的意思。它相当于border里面的 none,不要定位的时候用。
- 静态定位按照文档流特性摆放位置,它没有边偏移。
- 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列, 块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的 排在后面,每个盒子都占据自己的位置。
相对定位
position: relative
特点:
-
不脱标,占用自己原来位置
-
显示模式特点保持不变
-
设置边偏移则相对自己原来位置移动
绝对定位
position: absolute
使用场景:子级绝对定位,父级相对定位(子绝父相)
特点:
-
脱标,不占位
-
显示模式具备行内块特点
-
设置边偏移则相对最近的已经定位的祖先元素改变位置
-
如果祖先元素都未定位,则相对浏览器可视区改变位置
.father {
position: relative;
}
.father span {
position: absolute;
top: 0;
right: 0;
}
定位居中
实现步骤:
-
绝对定位
-
水平、垂直边偏移为 50%
-
子级向左、上移动自身尺寸的一半
-
左、上的外边距为 –尺寸的一半
-
transform: translate(-50%, -50%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 让绝对定位的盒子水平和垂直居中 */
.box {
position: absolute;
/* 移动父亲的50% */
left: 50%;
/* 往左走自己宽度的一半 */
/* margin-left: -100px; */
top: 50%;
/* margin-top: -100px; */
/* 让子盒子走自己宽度和高度的一半 */
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: pink;
/* 绝对定位让margin 0 auto 失效 */
/* margin: 0 auto; */
}
img {
position: absolute;
top: 50%;
left: 50%;
/* 让子盒子走自己宽度和高度的一半 */
transform: translate(-50%, -50%);
/* 注意,translate 百分比相对于盒子自身的宽度和高度来说 */
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<img src="./images/down-open.png" alt="">
</body>
</html>
固定定位
position: fixed
场景:元素的位置在网页滚动时不会改变
特点:
-
脱标,不占位
-
显示模式具备行内块特点
-
设置边偏移相对浏览器窗口改变位置
堆叠层级z-index
默认效果:按照标签书写顺序,后来者居上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序
属性名:z-index
属性值:整数数字(默认值为auto,取值越大,层级越高)
02-高级技巧
CSS精灵
CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position 精确的定位出背景图片的位置。
优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度
实现步骤:
-
创建盒子,盒子尺寸与小图尺寸相同
-
设置盒子背景图为精灵图
-
添加 background-position 属性,改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值(向左上移动图片位置)
字体图标(重点)
字体图标:展示的是图标,本质是字体
作用:在网页中添加简单的、颜色单一的小图标
优点
-
灵活性:灵活地修改样式,例如:尺寸、颜色等
-
轻量级:体积小、渲染快、降低服务器请求次数
-
兼容性:几乎兼容所有主流浏览器
-
使用方便:先下载再使用
下载字体
登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标,加入购物车 → 购物车,添加至项目,确定 → 下载至本地
使用字体
-
引入字体样式表(iconfont.css)
-
标签使用字体图标类名
-
iconfont:字体图标基本样式(字体名,字体大小等等)
-
icon-xxx:图标对应的类名
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
.iconfont {
font-size: 300px;
color: pink;
}
</style>
</head>
<body>
<!-- 必须2个类名,第一个类名iconfont -->
<i class="iconfont icon-shouji"></i>
<span class="iconfont icon-zhaoxiangji"></span>
</body>
</html>
03-CSS修饰属性
垂直对齐方式
属性名:vertical-align
去除图片底部缝隙的两种方法:
-
给图片添加 display: block;
-
给图片添加 vertical-align: middle; 等,只要不是 baseline就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
/* 行内块元素 默认和文字的基线对齐*/
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
background-color: pink;
}
div {
/* width: 300px;
height: 300px; */
border: 2px solid red;
}
</style>
</head>
<body>
<img src="./images/computer.png" alt=""> my name is 刘德华
<span></span> my name is 刘德华
<hr>
<div>
<img src="./images/1.webp" alt="">
</div>
</body>
</html>
过渡
作用:可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名:transition(复合属性)
属性值:过渡的属性 花费时间 (s)
提示:
-
过渡的属性可以是具体的 CSS 属性
-
也可以为 all(两个状态属性值不同的所有属性,都产生过渡效果)
-
transition 设置给元素本身
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 谁做过渡给谁加 */
transition: all .3s;
}
.box:hover {
height: 300px;
width: 300px;
background-color: green;
}
input {
width: 200px;
height: 30px;
transition: all .3s;
}
/* 当表单得到光标的时候 */
input:focus {
width: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text">
</body>
</html>
透明度opacity
作用:设置整个元素的透明度(包含背景和内容)
属性名:opacity
属性值:0 – 1
-
0:完全透明(元素不可见)
-
1:不透明
-
0-1之间小数:半透明
光标类型cursor
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-child(1) {
cursor: default;
}
div:nth-child(2) {
/* 小手 */
cursor: pointer;
}
div:nth-child(3) {
/* 文本 */
cursor: text;
}
div:nth-child(4) {
/* 移动 */
cursor: move;
}
div:nth-child(5) {
/* 禁止 */
cursor: not-allowed;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div>鼠标默认</div>
<div>鼠标小手</div>
<div>鼠标选择文本</div>
<div>鼠标移动</div>
<div>鼠标禁止</div>
<button>注册</button>
</body>
</html>
禁用鼠标样式
div:nth-child(5) {
/* 禁止 */
cursor: not-allowed;
}
05-盒子模型
选择器
结构伪类选择器
基本使用
作用:根据元素的结构关系查找元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 结构伪类选择器 */
/* 1.选择第一个li */
ul li:first-child {
color: pink;
}
/* 2. 最后一个小li */
ul li:last-child {
color: green;
}
/* 3. 选择其中任意一个 */
ul li:nth-child(6) {
color: red;
}
</style>
</head>
<body>
<!-- ul>li{第$个}*8 -->
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
<li>我是第6个小li</li>
<li>我是第7个小li</li>
<li>我是第8个小li</li>
</ul>
</body>
</html>
:nth-child(公式)
提示:公式中的n取值从 0 开始。
伪元素选择器
作用:创建虚拟元素(伪元素),用来摆放装饰性的内容。
div::before {
content: "before 伪元素";
}
div::after {
content: "after 伪元素";
}
注意点:
必须设置 content: ””属性,用来 设置伪元素的内容,如果没有内容,则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相
PxCook
PxCook(像素大厨) 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
-
开发面板(自动智能识别)
-
设计面板(手动测量尺寸和颜色)
使用方法:创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】,导入设计稿
盒子模型
什么是CSS盒模型?
W3C组织建议把所有网页上的对象都放在一个盒(box) 中,设计师可以通过创建定义来控制这个盒的属性,这些对 象包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域MBPC:边界(margin) 、边框 (border) 、填充(padding)和内容(content) 。
作用:布局网页,摆放盒子和内容。
盒子模型-组成
-
内容区域 – width & height
-
内边距 – padding(出现在内容与盒子边缘之间)
-
边框线 – border
-
外边距 – margin(出现在盒子外面)
外边距还可以通过单边属性进行设置,不会影响其他外边距,且这 些单边属性可以设置一个或多个,具有4个单边外边距属性:
• margin-top:20px;
• margin-right :20px;
• margin-bottom :20px;
• margin-left :20px;
• margin:10px; /* 4个边均为10px */ • margin:10px 20px ; /* 上下|左右*/
• margin:10px 20px 30px; /* 上|左右|下*/
• margin:10px 20px 30px 40px; /* 上|右|下|左*/
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
边框线-四个方向
属性名:border(bd)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
div {
border: 5px solid brown;
width: 200px;
height: 200px;
background-color: pink;
}
单方向边框线
属性名:border-方位名词(bd+方位名词首字母,例如,bdl)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
边框属性设置
- 边框粗细 border-width: thin、medium、thick 、length ; 复合属性,分border-top-width、border-right-width、 border-bottom-width、border-left-width四个子属性。
- 边框样式 border-style :none|dotted|dashed| solid|double|groove[凹型线]|ridge [凸型线] |inset [嵌入线] |outset [嵌出线]; --复合属性,分top、right、bottom、left四个子属性。
- 边框颜色 border-color: 颜色关键字 | RGB值 ;
- border:边框粗细 边框样式 边框颜色;
- border:2px solid #ff33ee;
内边距
作用:设置 内容 与 盒子边缘 之间的距离。
-
属性名:padding / padding-方位名词
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
提示:添加 padding 会撑大盒子。
填充属性设置
- 元素内边界主要是指边框和内部元素之间的空白距离,利用 padding属性设置元素内的边界时,也包括5个属性,同样也 有四种设置方法。
- padding:长度 | 百分比
- padding-top、padding-right、 padding-left、padding-bottom
-
padding值写法 多
技巧:从上开始顺时针赋值,当前方向没有数值则与对面取值相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 1. 手动去减 */
/* width: 160px;
height: 160px; */
/* 2. css3 盒子模型 box-sizing: border-box */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">qwe</div>
</body>
</html>
尺寸计算
默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论:给盒子加 border / padding 会撑大盒子
解决:
-
手动做减法,减掉 border / padding 的尺寸
-
內减模式:box-sizing: border-box
外边距
作用:拉开两个盒子之间的距离
属性名:margin
提示:与 padding 属性值写法、含义相同
版心居中
左右 margin 值 为 auto(盒子要有宽度)
div {
margin: 0 auto;
width: 1000px;
height: 200px;
background-color: pink;
}
行内和行内块元素水平居中对齐,给块级的父元素添加 tac
块级元素水平居中对齐: 让盒子的
左右外边距
设置为 auto 就可以了。 margin: auto;
小米 margin-left: auto; margin-right: auto;
京东/淘宝: margin: 0 auto;
清除默认样式
清除标签默认的样式,比如:默认的内外边距。
/* 清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
list-style: none;
}
元素溢出
作用:控制溢出元素的内容的显示方式。
属性名:overflow
外边距问题
合并现象
场景:垂直排列的兄弟元素,上下 margin 会合并
现象:取两个 margin 中的较大值生效
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
外边距塌陷
场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题
现象:导致父级一起向下移动
.son { margin-top: 50px; width: 100px; height: 100px; background-color: orange; }
解决方法:
-
取消子级margin,父级设置padding
-
父级设置 overflow: hidden
-
父级设置 border-top
行内元素 – 内外边距问题
场景:行内元素添加 margin 和 padding,无法改变元素垂直位置
解决方法:给行内元素添加 line-height 可以改变垂直位置
span {
/* margin 和 padding 属性,无法改变垂直位置 */
margin: 50px;
padding: 20px;
/* 行高可以改变垂直位置 */
line-height: 100px;
}
圆角
作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px / 百分比
提示:属性值是圆角半径
多值写法
技巧:从左上角开始顺时针赋值,当前角没有数值则与对角取值相同。
-
正圆形状:给正方形盒子设置圆角属性值为 宽高的一半 / 50%
img {
width: 200px;
height: 200px;
border-radius: 100px;
border-radius: 50%;
}
胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半
div {
width: 200px;
height: 80px;
background-color: orange;
border-radius: 40px;
}
盒子阴影(拓展)
作用:给元素设置阴影效果
属性名:box-shadow
属性值:X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
-
X 轴偏移量 和 Y 轴偏移量 必须书写
-
默认是外阴影,内阴影需要添加 inset
div {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}
06-Flex布局
标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
浮动(了解即可,不用复习)
基本使用
作用:让块元素水平排列。
属性名:float
属性值
-
left:左对齐
-
right:右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.left,
.right {
/* width: 200px; */
height: 200px;
background-color: pink;
}
.left {
/* 左浮动 */
float: left;
margin-left: 20px;
}
.right {
/* 右侧浮动 */
float: left;
height: 300px;
background-color: purple;
}
.bottom {
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="left">左侧123</div>
<div class="right">右侧123</div>
<div class="bottom"></div>
</body>
</html>
特点:
-
浮动后的盒子顶对齐
-
浮动后的盒子具备行内块特点
-
浮动后的盒子脱标,不占用标准流的位置
产品区域布局
左右布局
html结构
<div class="mi"> <div class="left">左侧</div> <div class="right">右侧</div> </div>
css样式
<style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .mi { width: 1226px; height: 614px; /* background-color: pink; */ margin: 100px auto; } .left { float: left; width: 234px; height: 614px; background-color: skyblue; } .right { float: right; width: 978px; height: 614px; background-color: purple; } </style>
效果:
区域小li布局
完整写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.mi {
width: 1226px;
height: 614px;
/* background-color: pink; */
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: skyblue;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: purple; */
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-bottom: 14px;
margin-right: 14px;
}
/* 让第4,8 个li 去掉外边距 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="mi">
<div class="left">左侧</div>
<div class="right">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)
场景搭建
<style>
.top {
margin: 10px auto;
width: 1200px;
/* height: 300px; */
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: skyblue;
}
.right {
float: right;
width: 950px;
height: 300px;
background-color: orange;
}
.bottom {
height: 100px;
background-color: brown;
}
</style>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
额外标签法
clear:left|right|both|none,与浮动属性是一对作用相反的属性,可以 清除左、右、两边及允许浮动。
在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
<style>
.clearfix {
clear: both;
}
</style><div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
单伪元素法
-
准备 after 伪元素
.clearfix::after {
content: "";
display: block;
clear: both;
}
父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
-
准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}
-
父级使用 clearfix 类
<div class="father clearfix"></div>
overflow法
.father { margin: 10px auto; width: 1200px; /* height: 300px; */ background-color: pink; overflow: hidden; }
Flex布局(重点)
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
CSS对象的显示与隐藏
在CSS的布局中实现特定对象显示与隐藏方法有两种,设 置display和visibility属性来达到显示与隐藏,但在使用上略 有区别。图层div的显示与隐藏经常用在多级菜单或相关内容 附加展示的需求场景。
- display:block|none|inline
- #div1{display:none;} /* 让div1初始装载时不显示 */
- #nav a:hover #div1{ display:block;} /* 鼠标滑过时div1显示 */
- visibility : inherit|visible|collapse|hidden
- img { visibility: hidden; float: right; } /* 让对象隐藏*/
- img { visibility: visible; float: right; } /* 让对象恢复可视*/
Flex组成
display:
⚫ block: 独占一行;如果不指定宽高,默认会继承父元素的宽度
⚫ inline:设置了该属性之后设置高度、宽度都无效,同时text-align属性设置 也无效,但是设置了line-height会让inline元素居中。默认为inline的元素: span、a、label、input、 img、 strong 和em就是典型的行内元素元素。
行内元素和块级元素的区别
- 行内元素通常不会独占一行,它们会沿着父元素的水平方向排列,并且它们的宽 度和高度由内容决定,无法直接设置,但可以通过padding和margin来间接影响 其尺寸
- 行内元素只能设置左右的margin和padding,而不能设置上下的margin和 padding
- 行内元素可以包含文本或其他行内元素,但不能包含块级元素。
- 块级元素独占一行,每个块级元素会新起一行,它们的宽度可以设置,如果不明 确设置宽度,则默认宽度通常是其父元素的100%
- 块级元素的高度、行高、外边距以及内边距都可以控制,块级元素可以包含行内 元素和其它块级元素。
⚫ inline-block:既具有block的宽高特性又具有inline的同行元素特性, inline-block最大的优势是不会脱离文档流,可以让其元素在一行显示
⚫ none:隐藏元素,且不占空间
⚫ flex:将对象作为弹性伸缩盒,解决元素在容器中的对齐、方向、顺序问题, 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效
⚫ inline-flex:将对象作为内联块级弹性伸缩盒显示
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分:
-
弹性容器
-
弹性盒子
-
主轴:默认在水平方向
-
侧轴 / 交叉轴:默认在垂直方向
-
flex:1表示三个属性简写1 1 0分三等分
主轴对齐方式
属性名:justify-content
justify-content: space-between;
显示效果:两侧没缝隙
效果如下: 记住2倍
justify-content: space-around;
justify-content: space-evenly;
效果如下: 记住空隙一样大
效果如下: 经常用于让一个盒子水平居中
justify-content: center;
记忆:
-
两侧没缝隙是 between`
-
缝隙一样大是 evenly
-
2倍缝隙是 around
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 给父亲添加 flex */
display: flex;
/* 主轴的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子盒子居中对齐 */
/* justify-content: center; */
/* between */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
width: 900px;
height: 200px;
background-color: pink;
}
.box div {
width: 249px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
侧轴对齐方式
-
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
-
align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 给父亲添加 flex */
display: flex;
/* 主轴的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让子盒子居中对齐 */
/* justify-content: center; */
/* between */
/* 两侧没缝隙 */
/* justify-content: space-between; */
/* 两倍缝隙 */
/* justify-content: space-around; */
justify-content: space-evenly;
/* 侧轴的对齐方式 */
/* 顶部对齐 */
/* align-items: flex-start; */
/* 底部对齐 */
/* align-items: flex-end; */
/* 居中对齐 */
/* align-items: center; */
/* 默认的 拉伸和父亲一样 */
align-items: stretch;
width: 900px;
height: 500px;
background-color: pink;
}
.box div {
width: 249px;
/* height: 200px; */
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
盒子水平和垂直居中的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
/* 利用flex实现 */
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴水平居中 */
align-items: center;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。
属性名:flex-wrap
属性值
•wrap:换行
•nowrap:不换行(默认)
多行对齐方式
如果有多行侧轴对齐,则去找align-content
如果是单行侧轴对齐,则去找 align-items
修改主轴方向
属性名:flex-direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
/* 默认主轴是横向 row */
/* 更改主轴的方向 我想要1和2盒子竖着排列 */
flex-direction: column;
width: 300px;
height: 300px;
border: 1px solid #000;
/* 主轴 */
justify-content: center;
/* 侧轴 */
align-items: center;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
</div>
</body>
</html>
弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 80%;
height: 200px;
border: 1px solid #000;
}
.box span {
/* 不会区分原来属于什么模式 */
/* width: 100px;
height: 100px;
background-color: pink; */
flex: 1;
background-color: pink;
}
/* 圣杯布局两侧固定,中间自适应 */
.left,
.right {
width: 100px;
background-color: skyblue;
}
.center {
flex: 1;
background-color: purple;
}
.center1 {
flex: 2;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box">
<div class="left">左</div>
<div class="center">中</div>
<div class="center1">中</div>
<div class="right">右</div>
</div>
</body>
</html>
07-移动 Web 第一天
01-平面转换
简介
作用:为元素添加动态效果,一般与过渡配合使用
概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
平面转换也叫 2D 转换,属性是 transform
平移
transform: translate(X轴移动距离, Y轴移动距离);
-
取值
-
像素单位数值
-
百分比(参照盒子自身尺寸计算结果)
-
正负均可
-
-
技巧
-
translate() 只写一个值,表示沿着 X 轴移动
-
单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()
-
定位居中
方法一:margin
方法二:平移 → 百分比参照盒子自身尺寸计算结果
旋转
transform: rotate(旋转角度);
-
取值:角度单位是 deg
-
技巧
-
取值正负均可
-
取值为正,顺时针旋转
-
取值为负,逆时针旋转
-
转换原点
默认情况下,转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值:
-
方位名词(left、top、right、bottom、center)
-
像素单位数值
-
百分比
多重转换
多重转换技巧:先平移再旋转
transform: translate() rotate();
-
多重转换原理:以第一种转换方式坐标轴为准转换形态
-
旋转会改变网页元素的坐标轴向
-
先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果
-
缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
技巧
-
通常,只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
-
取值大于1表示放大,取值小于1表示缩小
倾斜
取值:角度度数 deg
transform: skew();
02-渐变
渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
-
渐变方向:可选
-
to 方位名词
-
角度度数
-
-
终点位置:可选
-
百分比
-
径向渐变
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
取值:
-
半径可以是2条,则为椭圆
-
圆心位置取值:像素单位数值 / 百分比 / 方位名词
03-空间转换
空间转换简介
-
空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。
-
空间转换也叫 3D转换
-
属性:transform
平移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值与平面转换相同
默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果
视距
作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级,取值范围 800-1200)
perspective: 视距;
旋转
Z 轴:rotateZ()
X 轴:rotateX()
Y 轴:rotateY()
rotate3d
-
rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
-
x,y,z 取值为0-1之间的数字
立体呈现
作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:transform-style
属性值:
-
flat:子级处于平面中
-
preserve-3d:子级处于 3D 空间
04-动画
-
过渡:实现两个状态间的变化过程
-
动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
动画实现步骤
-
定义动画
/* 方式一 */
@keyframes 动画名称 {
from {}
to {}
}
/* 方式二 */
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
2.使用动画
animation: 动画名称 动画花费时长;
animation复合属性
提示:
-
动画名称和动画时长必须赋值
-
取值不分先后顺序
-
如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
animation拆分写法
/* linear:匀速移动 */
animation-timing-function: linear;
精灵动画
制作步骤
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图(移动距离 = 精灵图宽度)
3.使用动画
steps(N),N 与精灵小图个数相同
div {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
05-适配器
屏幕分辨率
分类:
-
物理分辨率:硬件分辨率(出厂设置)
-
逻辑分辨率:软件 / 驱动设置
结论:制作网页参考 逻辑分辨率
视口
作用:显示 HTML 网页的区域,用来约束 HTML 的尺寸
-
width=device-width:视口宽度 = 设备宽度
-
initial-scale=1.0:缩放1倍(不缩放)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
适配方案
-
宽度适配:宽度自适应
-
百分比布局
-
Flex 布局
-
-
等比适配:宽高等比缩放
-
rem
-
vw
-
02-rem
简介
-
rem单位,是相对单位
-
保证在不同的设备下有不同的大小
-
rem单位是相对于HTML标签的字号计算结果
-
1rem = 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:320px) {
html {
background-color: green;
}
}
rem 布局
目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10。
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
<body>
......
<script src="./js/flexible.js"></script>
</body>
rem 移动适配
rem单位尺寸
-
确定基准根字号
-
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)
-
rem单位的尺寸
-
rem单位的尺寸 = px单位数值 / 基准根字号
03-less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意:浏览器不识别 Less 代码,目前阶段,网页要引入对应的 CSS 文件
VS Code 插件:Easy LESS,保存 less文件后自动生成对应的 CSS 文件
运算
-
加、减、乘直接书写计算表达式
-
除法需要添加 小括号 或 .
-
表达式存在多个单位以第一个单位为准
变量
概念:容器,存储数据
作用:存储数据,方便使用和修改
语法:
-
定义变量:@变量名: 数据;
-
使用变量:CSS属性:@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
导入
作用:导入 less 公共样式文件
语法:导入: @import “文件路径”;
提示:如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
导出
写法:在 less 文件的第一行添加 // out: 存储URL
提示:文件夹名称后面添加 /
// out: ./index.css
// out: ./css/
禁止导出
写法:在 less 文件第一行添加: // out: false
06-vw适配方案
vw和vh基本使用
vw和vh是相对单位,相对视口尺寸计算结果
-
vw:viewport width(1vw = 1/100视口宽度 )
-
vh:lviewport height ( 1vh = 1/100视口高度 )
vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题
vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变
07-响应式布局方案
-
媒体查询
-
不同的设备大小,不同的效果
-
Bootstrap框架
01-媒体查询
基本写法
-
媒体特性:
-
max-width:最大宽度(小于等于)
-
min-width:最小宽度(大于等于)
书写顺序
-
min-width(从小到大)
-
max-width(从大到小)
媒体查询-完整写法
关键词 / 逻辑操作符
-
and
-
only
-
not
媒体类型
媒体类型用来区分设备类型
-
screen:屏幕设备
-
打印预览:print
-
阅读器:speech
-
不区分类型:all
媒体特性
-
视口宽高:width / height
-
视口最大宽高:max-width ;max-height
-
视口最小宽高:min-width;min-height
-
屏幕方向:orientation
-
protrait:竖屏
-
landscape:横屏
-
媒体查询-外部CSS
02-Bootstrap
简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
使用步骤
下载
下载:Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
字体图标
下载
导航 / Extend:图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip
使用
-
复制 fonts 文件夹到项目目录
-
网页引入 bootstrap-icons.css 文件
-
调用 CSS 类名(图标对应的类名)