<!DOCTYPE html>第一天课程
<html lang="en"> <!-- html整个网页 -->
<head> <!-- 网页头部，用于存放给浏览器看的信息 -->
<!-- 父子关系 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 并列关系 -->
<body><!-- 用于存放给用户看的信息 -->
<h1>标题1</h1><!-- h1为最大标题只能有一个 -->
<h2>标题2</h2>
<h3>标题3</h3>
<br>.....<!-- br为换行 -->
<h6>标题6</h6><!-- 一共有6个大小的标题,除了h1以外,其他字号标题不受数量限制 -->
<br>
<h6><strong>标题示范</strong></h6><!-- <strong>代表加粗文字</strong> -->
<!-- <em>代表倾斜</em> -->
<!-- <ins>代表下划线</ins> -->
<!-- <del>代表删除线</del> -->
<h5>图片插入</h5>
<br><img src="./微信图片_20231012092858.jpg " height="100" alt="图片出错" title=壁纸>
<!-- img后加入网址，alt代表替换文本，一般是图片加载不出来的时候出现，<title>为提示文本，将鼠标放到图片上显示 -->
<!-- 在VSC中./可选择本文件夹的图片文件，而../代表上一级文件 -->
<!-- 使用width可调整图片宽度，使用height可以调整图片高度，其实这两个选一个就行，VSC会根据比例自动调整图片大小。 -->
<br>
<h5>跳转哔哩哔哩</h5>
<a href="https://www.bilibili.com/">跳转网页</a>
<!-- a开头进入网页代码，在链接》后输入跳转字节 -->
<br>
<h5>用新窗口打开哔哩哔哩</h5>
<a href="https://www.bilibili.com/" target="_blank">点击打开</a>
<!-- 加入<table>-blank</table>进入新窗口 -->
<br><a href="#" target="_blank"></a>
<!-- 在a href中网页链接未知可以用#表示，同时空格后加入target=——blank可以将网页进入新窗口显示 -->
<br>
<h5>散兵副本音乐</h5>
<br>
<h5><audio src="./HOYO-MiX - 三千娑世御咏歌 Polumnia Omnia.mp3" controls loop></audio></h5>
<!-- 以audio插入音频，在其中controls为显示音频控制面板，loop为循环播放，autoplay为自动播放，一般浏览器禁止自动播放 -->
<br><video src="./WeChat_20231024090158.mp4" loop controls></video>
<!-- 以video插入视频，在其中controls显示视频控制面板，loop为循环播放，autoplay为自动播放，不过在加入muted静音播放的情况下，视频可自动播放。 -->
</body>
</html>
<br> 第二天
<!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>
<!-- 列表分为无序和有序 -->
<p>无序列表</p>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!-- <li>被包含在<ul>里面，主要用来表示不需要规定顺序的列表，比如体育新闻一条一条的列表 -->
<!-- 同时<ul>中只能包含<li>，而<li>标签里面可以包含其他标签如超链接，注意：<li>标签要单列一行 -->
<p>有序列表</p>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<p>定义列表</p>
<!-- 在<ol>中依然只能包含<li>，<li>也依然可以包含其他指令，<li>一般用来表示类似操作步骤，<ol>中的<li>是带序号的 -->
<dl>
<dt>列表标题</dt>
<dd>详情一</dd>
<dd>详情二</dd>
<dd>详情三</dd>
</dl>
<!-- <dl>是定义列表<dt>是定义列表的标题，<dd>是定义列表的详情，在其中<dt>和<dd>可包含其他指令 -->
表格
<table border="10">
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>90</td>
<td>99</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>90</td>
<td>100</td>
</tr>
</table>
<!-- <table>代表表格<tr>代表行<th>代表表头单元格<td>代表内容单元格，在网页中，表格默认没有边框线，使用 border可以为表格提供边框线。 -->
<p>
<h4>合并单元格</h4>
</p>
<table border="10">
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<!-- rowspan=2即有两个竖向（同一列）单元格合并 -->
<td>98</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<!-- <td>100</td>用注释来模拟删除 -->
<td>99</td>
</tr>
<tr>
<td>排名</td>
<td colspan="3">第一</td>
<!-- colspan=3即有三个横向单元格合并（同一行） -->
<!-- <td>第一</td> -->
<!-- <td>第一</td> -->
</tr>
</table>
<!-- 注意：在整个表格中不能跨结构标签合并 -->
<!-- 同时在合并中，保留最上或最左边的单元格（说的是相同信息） -->
<br><br>
<input type="#">
<!-- input 标签，其功能随着type性质的改变而改变 -->
<input type="#" placeholder="提示信息">
<!-- 在input中，加入placeholder可加入提示信息。 -->
<br>
<h3>登录</h3>
<!-- 在input中，加入placeholder可加入提示信息。 -->
账号：<input type="text">
<!-- text代表文本框用于输入单行文本 -->
<br>
密码：<input type="password">
<!-- 密码框，可遮蔽输入信息 -->
<br>
男<input type="radio" name="性别">
女<input type="radio" name="性别">
<!-- radio代表单选框，加入name分组限定单选 -->
<br>
<h4>喜好选择</h4>
<br>
馒头<input type="checkbox" checked>
面包<input type="checkbox">
米饭<input type="checkbox">
<!-- checkbox代表多选框，加入checked可默认选择（也可以加入单选进行默认。 -->
<br>
上传单个文件<input type="file">
<br>
上传多个文件<input type="file" multiple>
<!-- file默认只能上传一个文件，加入multiple可选中多个文件。 -->
<h3>下拉菜单</h3>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4 </option>
</select>
<!-- 在<select name="" id=""></select>中，name和id需要后台，学习时可暂时忽略。 -->
<!-- <option value=""></option>中的value也一样需要后台，暂时忽略。 -->
<!-- 加入selected可进行默认，不加和话默认初始选项为第一项。 -->
<br>
<h3>文本域</h3>
<br>
<textarea>默认输入的信息</textarea>
<!-- 文本域多行输入文本 -->
<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
<!-- 在其中的前两种属性需要后台暂时忽略，后两种属性一般用CSS进行调整，可忽略。 -->
<!-- 可文本域中“默认输入的信息”并不是提示一类，而是直接出现在文本域中。 -->
<!-- 文本域右下角有个//号，可调整文本域大小，一般禁用。 -->
<label for=""></label>
<!-- 作用：增大但空间的点击范围 -->
<br>写法1：
<label for="男">男</label>
<input type="radio" name="性别" id="男">
<br>
<label for="女">女</label>
<input type="radio" name="性别" id="女">
<!-- 让laber中的for属性和input的id属性相同，可使其控制范围变化。 -->
<br>写法2
<label><input type="radio" name="性别2">男</label>
<label><input type="radio" name="性别2">女</label>
<!-- 可直接将input代入laber中，简单快捷。 -->
<br>
按钮
写法：<button type="#">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
<!-- 提交按钮要后台 -->
<!-- 叠置按钮要加form -->
<!-- 普通按钮以后配合JS使用 -->
form使用
<form action="">
<button type="reset"></button>
</form>
<!-- action可删除可不管，其作用是发送数据到相应地址 -->
无语义的布局标签
<!-- 作用：布局网页(划分网页区域，摆放内容) -->
<div></div>独占一行
<span></span>不换行
字符实体
空格
< 小于号 ⁢> 大于号 >
<!-- 代码中连续敲空格，网页只识别一个，用字符实体可实现空格。 -->
第三天CSS初入
三种引入方式
1.内部样式表
<title>CSS</title>
<style>
p {
color: red;
}
</style>
<!-- 必须写在<title></title>下面，即<head></head>里面。 -->
2.外部样式表
<link rel="stylesheet" href="./my.css">
<!-- link表示引入外部样式表，rel表示关系，样式表。 -->
<!-- 注：CSS文件提前准备。 -->
3.行内样式：配合JS使用
<div style="color: red;">颜色</div>
<!-- /* div可以是<p>.也可以是其他标签。 */ -->
选择器——标签和类
<!-- 作用：查找标签，设置样式。 -->
标签选择器：选中同名标签设置相同样式。
<!-- 例如<p>,<h1>,div,a,img.... -->
<style>
p {
color: red;
}
</style>
<!-- 这个法代表全部选中，无法进行标签差异化。 -->
类选择器：查找标签，差异化显示标签效果。
<style>
.red {
color: red;
}
</style>
<div class="red">颜色为红色</div>
<!-- 注意：类名自定义，不要用纯数字或中文，尽量用英文。 -->
<style>
.strong {
src: format();
}
</style>
<div class="red strong">000</div>
<!-- 一个类选择器可以供多个标签使用 -->
<!-- 如上所示，一个标签可以使用多个类名，类名之间用域名隔开。 -->
开发习惯：类名见名知义，多个单词可以用-连接，例如news-hd.
id选择器
<!-- 和类选择器差不多，不过这个是JS用的。 -->
<!-- 一个界面只能用一个id -->
<style>
#red {
color: red;
}
</style>
(使用) <div id="red">000</div>
通配符选择器
<!-- 作用：查找页面所以标签，设置相同样式（优先） -->
<style>
* {
color: red;
}
</style>
<!-- 可以改变标签的默认样式 -->
画盒子
CSS新属性 作用
width 宽度
height 高度
background 背景色
字体修饰属性
字体大小
<style>
p {
font-size: 30px;
}
</style>
<!-- 属性值为文字尺寸，PC端网页最常用的单位为PX（像素） -->
<!-- 谷歌文字的默认属性为16px -->
文字粗细
<style>
p {
font-weight: 100;
}
</style>
<!-- 一般开发使用数字 -->
<!-- 正常为400，加粗为700。 -->
<!-- 关键字 正常normal 加粗bold -->
字体样式
<style>
p {
font-style: italic;
}
</style>
<!-- 正常normal 倾斜italic -->
<!-- 一般用于清除文字默认斜体效果 -->
行高
作用为设置多行间距
<style>
p {
line-height: 110px;
}
</style>
<!-- 属性值 数字+px -->
<!-- 数字（表示当前标签font-size属性值的倍数） -->
<!-- 默认行高=上间距+下间距+文字高度 -->
行高-垂直居中
<style>
div {
height: 100px;
background-color: aqua;
line-height: 100px;
}
/* 此处height和line height值相同 */
</style>
<!-- 只能用于单行文字 -->
字体族(用于设置字体)
<style>
p {
font-family: 楷书;
}
</style>
网页开发建议使用无衬线字体(默认字体)
fone属性
<!-- 一般用于前期网页文字公共样式 -->
例 <style>
div {
font: italic 700 30px/2 '楷体';
}
</style>
<!-- 顺序 fone: 是否倾斜 是否加粗 字号/行高 字体 -->
<!-- 其中 字号/行高 字体 是必须加的,另外两个可省略. -->
<!-- 中间用空格隔开 -->
文字缩进
<style>
P {
text-indent: 2em;
}
</style>
<!-- 单位为em,一个字大小为1em -->
属性值 数字+px
数字+em(推荐)
文字对齐方式
<!-- 作用:控制内容水平对齐方式 -->
属性值 效果
left 左对齐
cenrer 居中对齐标题
right 右对齐
<!-- 居中对齐的是文字内容而不是标签 -->
图片对齐方式
<!-- 其实差不多,text-align的本质是控制内容的对齐方式,属性要设置给文字的父级. -->
<style>
div {
text-align: center;
}
</style>
<div><img src="./微信图片_20231012092858.jpg" alt="00"></div>
文本修饰线
<style>
p {
text-decoration: none;
}
</style>
属性 效果
none 无
underline 下划线
line-through 删除线
overline 上划线
DAY4 复合选择器
<!-- 由两个或多个选择器通过不同方式组合而成 -->
后代选择器
<!-- 分为父选择器和子选择器 -->
<!-- 父选择器和子选择器直接用空格隔开 -->
<style>
div span {
color: red;
}
</style>
<div>
<span>
颜色<!-- 此处将变为红色 -->
</span>
</div>
子代选择器
写法： 父选择器 > 子选择器
<!-- 选择最近的子集 -->
<style>
div>p {
color: aliceblue;
}
</style>
<div>
<p>颜色</p><!-- 此处将变为白色 -->
<span>1111</span><!-- 而此处不变 -->
</div>
并集选择器
<!-- 选中多组标签设置相同样式 -->
写法 选择器1，选择器2，......，选择器N {CSS属性}
<style>
div,
span,
p {
color: aliceblue;
}
</style>
<div>000</div>
<p>000</p>
<span>000</span>
<!-- 将全变为红色 -->
交集选择器
<!-- 选中同时满足多个条件的元素 -->
<style>
.box {
color: yellowgreen;
}
p.box {
font-size: 20px;
}
/* 表示选择同时满足p和box标签 */
</style>
<div>000</div>
<p>000</p>
<div class="box">123</div>
<p class="box"> 1245</p><!-- 此标签字号将被改变 -->
伪类选择器-超链接
选择器 作用
link 访问前
visited 访问后
hover 鼠标悬停
active 点击时
<!-- 一般工作使用hover -->
<!-- 如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。 -->
<style>
a:hover {
color: red;
}
</style>
<a href="#">点击</a>
<!-- 此时点击超链接将会变红 -->
除了超链接，其他选择器也认可，只要按照
<!-- 选择器：hover {CSS}属性 -->即可。
CSS三大特性
继承性：子代默认继承父代的文字控制属性。
<!-- 如果子代有样式，则不继承，生效自己的样式（如超链接和style -->
层叠性：相同的属性会覆盖:后面的CSS属性会覆盖前面的CSS属性。
不同属性会叠加：不同的CSS属性都生效。
<style>
div {
color: red;
font-weight: 700;
}
div {
color: aqua;
font-size: 30px;
}
</style>
<div>div标签</div>
<!-- 此时颜色冲突，后面的蓝色生效，而字号和粗细不重复，相叠加。 -->
优先级：当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div标签</div>
规则：选择器优先级高的样式生效。
公式：<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!limportant>
<!-- 选中标签的范围越大，优先级越低 -->
优先级：叠加计算规则。
<!-- 如果是复合选择器，则需要进行叠加计算。 -->
<!-- 公式：（每一级不存在进位） -->
<!-- 行内样式个数，id选择器个数，类选择器个数，标签选择器个数 -->
<!-- 规则：从左到右依次比较选择器个数，同一级个数多的优先级高，如果数量相同，则向后比较。 -->
<!-- !important优先级最高 -->
<!-- 继承权优先级最低 -->
<!-- 继承的!important优先级最低。 -->
Emmet写法
HTML 结构 Emmet
类选择器 <div class="box"></div> 标签名.类名
id选择器 <div id="ins"></div> 标签名#id名
同级标签 <div></div>
<p></p> div+p
父子级标签 <div>
<p></p>
</div> div>p
多个相同标签 <div></div>
<div></div> div*2
有内容的标签 <div>内容</div> div{内容}
背景属性
背景图
属性名 background-image{bgi}
<!-- 用于引入背景图 -->
<style>
div {
width: 400px;
height: 400px;
background-image: url(./);
}
</style>
<!-- 背景图默认是平铺效果 -->
背景图平铺方法
属性名：background-repeat{bgr}
属性值 效果
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
背景图位置
属性名：background-position(bgp)
属性值：水平位置 垂直位置
关键字 位置
left 左侧
righr 右侧
center 居中
top 顶部
bottom 底部
<!-- 可以写一个关键字，另一个方向默认为居中 -->
<!-- 如数字只写一个方向，另一个方向默认为居中 -->
例
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px 100px;
background-position: 50px center;
}
</style>
背景图缩放
<!-- 设置背景图大小 -->
属性名background-size{bgz}
关键字
cover:等比例缩放图片，以完全覆盖背景区，可能背景图片部分看不见。
contain:等比例缩放图片，以完全覆盖背景区，可能背景去部分空白。
百分比：根据盒子尺寸计算图片大小。
数字+单位例如px
<!-- 主要用关键字和百分比 -->
背景图固定
作用：背景不会随着元素内容滚动。
属性名：background-attachment{bga}
属性值：fixed
<style>
body {
background-image: url(#);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
背景复合属性
属性名：background{bg}
属性值：背景色 背景图 背景平铺方式 背景图位置/背景图缩放比例 背景图固定
<!-- 空格隔开各个属性值，不区分顺序 -->
<style>
div {
width: 400px;
height: 400px;
background: pink url(./微信图片_20231029151607.jpg) no-repeat right center/cover
}
</style>
显示模式
<!-- 标签，元素的显示方式 -->
<!-- 布局网页时，根据标签的显示模式选择合适的标签摆放内容 -->
块级元素： 独占一行
宽度默认是父级的100%{div初始与body宽度大小一样}
增加高度属性生效
行内元素： 一行共存多个
尺寸由内容撑开
添加宽高不生效
行内块元素：一行共存多个
默认尺寸由内容撑开
加宽高生效
<!-- 行内块元素如图片 -->
转换显示模式
属性名：display {在style里面加}
属性值 效果
block 块级
inlink-block 行内块
inline 行内<!-- 一般不用 -->
DAY5
结构伪类选择器
<!-- 根据元素的结构关系查找元素 -->
E:first-child 查找第一个E元素
E:last-child 查找最后一个E元素
E:nth-child(n) 查找第n个元素
<style>
li:first {
background-color: aliceblue;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 在其中n也可以是个式子，如n+5，n-5 -->
伪元素选择器
<!-- 创建虚拟元素{伪元素}，用来摆放装饰性的内容 -->
E::before 在E元素的最前面添加一个伪元素
E::after 在E元素的最后面添加一个元素
<!-- 必须设置content:" "属性，用来设置伪元素内容。 -->
<!-- 如果没有内容，则引号留空即可。 -->
<!-- 伪元素默认是行为显示模式 -->
<!-- 权重与标签选择器相同 -->
盒子模型
1.内容区域 width&height
2.内边距 padding
<!-- （出现在内容与盒子边缘之间 -->
<!-- 设置内容与盒子边缘之间的距离 -->
属性名padding/padding-方位名词<!-- 默认四个方向 -->
多值写法
四个值：上右下左
三个值：上-左右-下
两个值：上下-左右
一个值：四个方向均为10px
<!-- 规律：顺时针，都从上面开始，没有数就看对面(如三个值) -->
3.边框线 border (bd)
<!-- 出现在盒子边缘 -->
属性值 边框线粗细 线条样式 颜色(不区分顺序)
solid 实线
dashed 虚线
dotted 点线
设置单方向边框线
border-方向名词(bd+方向首字母)<!-- 方向为上右下左 -->
4.外边距 margin
<!-- 出现在盒子外面，面积不计算入盒子 -->
<!-- 外边距多值写法与内边距相同 -->
居心版中： margin:0 auto
<!-- 要求：盒子要有宽度 -->
清除默认样式
<style>
* {
margin: 0;
padding: 0;
}
</style>
<!-- 也可以加入內减模式box-sizing:borger-box; -->
去有序无序列表里的序号可以用
<style>
li {
list-style: none
}
</style>
内容溢出的overflow属性
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出，都显示流动条位置)
autoplay 溢出滚动(溢出才显示流动条位置)
<style>
div {
overflow: scroll;
}
</style>
外边框--合并
场景：垂直排列的兄弟元素，上线margin会合并。
现象：取两个margin中最大的那个。
<style>
.one {
margin-bottom: 50px;
}
.two {
margin-top: 20px;
}
</style>
外边框--塌陷
<!-- 场景：父子级的标志，子级添加上外边框产生塌陷问题。 -->
现象：导致父级一起向下移动。
解决办法：
1.父级设置padding，子级取消margin
2.父级设置 overflow-hidden
3.父级设置 border-top
行内元素-垂直外边距问题
<!-- 场景:行内元素添加margin和padding,无法改变垂直位置。 -->
解决办法:给行内元素添加line-height可改变垂直位置。
圆角
属性:border-radius
正圆：给正方形盒子设置圆角属性值为宽高的一半/50%。
<!-- 圆角半径从左上顺时针计算 -->
胶囊：给长方形盒子设置圆角属性值为盒子高度的一半。
<!-- 注意：超过50%没有效果 -->
阴影
<!-- 作用；给元素设置阴影效果 -->
属性：box-shadow
属性值：x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
<!-- 注意:X轴偏移量和Y轴偏移量必须书写 -->
<!-- 默认是外阴影，内阴影需要添加inset -->
<!-- XY影响阴影位置，模糊影响阴影融合 -->
CSS书写顺序
1.盒子模型属性
2.文字样式
3.圆角·阴影等修饰属性
浮动-总结
浮动属性float， left表示左浮动，right表示右浮动
特点
1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内块特点
3. 父级宽度不够，浮动的子级会换行
浮动后的盒子脱标
清除浮动:子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
拓展:浮动本质作用是实现图文混排效果
清除浮动
1.在父元素的最后添加一个块级元素，设置CSS属性 clear:both
<!-- 在工作中一般类选择器设置为clearfix -->
2.单伪元素法
在父元素的最后添加一个块级元素{如div}，在style中加入
<style>
clearfix::after {
content: '';
/* 使伪元素生效 */
display: block;
/* 将伪元素设为块级元素 */
clear: both;
}
</style>
3.双伪元素法<!-- 推荐 -->
<!-- 直接复制用就行，和去默认一起。 -->
<style>
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
</style>
4.overflow
父元素添加CSS属性overflow:hidden
Flex--组成
<!-- 设置方式：给元素设置display:flex,子元素可以自动挤压和拉伸 -->
组成部分：
弹性容器(父级)
弹性盒子(子级)
主轴：默认水平方向
侧轴/交叉轴：默认垂直方向
主轴对齐方式
属性名justify-content 效果
属性值flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
侧轴对齐方式
属性名 align-items
<!-- 当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置) -->
align-self
<!-- 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置) -->
属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器<!-- (弹性盒子没有设置侧轴方向尺寸则默认拉伸) -->
Center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
修改主轴方向
属性名：flex-direction
属性值:column 垂直方向，从上到下。
<!-- 修改主轴方向为垂直方向，侧轴自动变化为水平方向 -->
弹性伸缩比
<!-- 作用:控制弹性盒子的主轴方向的尺寸 -->
属性名:flex
属性值:整数数字，表示占用父级剩余尺寸的份数
弹性换行
<!-- 弹性盒子可以自动挤压和拉伸，默认情况下，所有弹性盒子都在一行上 -->
属性名:flex-wrap
属性值;wrap 换行
nowrap 不换行(默认)
行对齐方式(与主轴相同)
<!-- 对单行盒子不生效 -->
align-content
背景透明
<style>
li {
background-color: transparent;
}
</style>
行内块与行内垂直对齐方式
<style>
li {
vertical-align: middle;
}
</style>
<!-- 来源：用户界面图片与字体对齐 -->
定位
<!-- 作用：灵活改变盒子在网页中的位置 -->
实现:1.定位模式position
2.边偏移，设置盒子位置。
(left right top bottom)
相对定位position:relative
特点 1.改变位置的参照物是自己原来的位置
2.不脱标，占位（原来位置不被占用）
3.标签显示模式特点不变
绝对定位position:absolute
使用场景：子级绝对定位，父级相对定位。(子绝父相)
参照物：1.已经定位的祖先元素
2.浏览器可视区
定位居中
实现步骤：1.绝对定位
2.水平，垂直边偏移为50%
3.子级向左，向上移动自身尺寸的一半
*左，上的外边距为尺寸的一半
*transform:translate(-50%,-50%)<!-- 常用 -->
固定定位position:fixed
场景：元素的位置在网页滚动时不会改变
1.脱标，不站位
2.参照物：浏览器窗口
3.显示模式特点：具备行内块特点
堆叠顺序 z-index
取值是整数,默认是0,数值越大顺序越靠上。
CSS精灵(用法)
CSS sprites 是一种网页图片应用处理方式，把网页中的一些背景图片
整合到一张图片中,再background-position,精确定位图片位置。
实现与步骤：
1.创建盒子，盒子尺寸与小图尺寸相同。
2.设置盒子背景图为精灵图。
3.添加bg-position属性,改变背景图片位置。
*使用PXcook测量小图左上角坐标。
*取负数坐标为bg-position属性值(向左上移动图片位置)
字体图标
<!-- 展示的是图标，本质是字体。 -->
作用:在网页中添加简单的、颜色单一的小图标。
*iconfont图标库 https://www.iconfont.cn/
*下载字体
登录+素材库+官方图标库+进入图标库+选图标,加入购物车+购物车,添加至项目，确定+下载至本地。
<!-- 在调整图标大小时主要优先级 -->
<!-- 在下载的文件中自带默认，优先级应高于iconfont类 -->
字体图标 上传
在iconfont的头部区域,有一个上传箭头,一般选择无颜色上传。
CSS修饰属性
垂直对齐方式(对于盒子内的元素)
属性名vertical-align
属性值 效果
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐
基线对齐图片下有小空白
<!-- 因为浏览器把行内块和行内标签当作文字处理，默认按基线对齐 -->
效果:图片img的底下有空白,转块级不按基线对齐,空白就消失了<!-- 及转块级消空白 -->
过渡transition
作用:可以为一个元素在不同形态之间切换添加过渡效果
属性名transition(复合属性)
属性值:过渡的属性 时间(s)
提示: *过渡的属性也可以是具体的CSS属性
*也可以为all(两个状态属性值不同的所有属性，都产生过渡效果)
*transition设置给元素本身而不是变化后如(hover)
透明度和光标属性
透明度opacity
作用:设置整个元素的透明度(包含背景和内容)
属性值:0-1
*0:完全透明(元素不可见)
*1:不透明
*0-1之间:半透明
光标类型
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
属性值 效果
default 默认值,通常是箭头
pointer 小手效果,提示用户可以点击。
text 工字形,提示用户可以选择文字。
move 十字光标,提示用户可以移动。
项目目录
.xtx-PC
<!-- xtx为项目名，PC代表电脑端 -->
*images文件夹:存放固定使用的图像素材，例如logo、样式、修饰图等等。
*upload文件夹:存放非固定使用的图像素材，例如商品图、宣传图等需要上传的图片
*iconfont文件夹:字体图标素材。
*CSS文件夹:存放CSS文件(link标签引入)
1.base.css 基础公共样式
2.common.css 各个网页相同模块的重复样式,例如:头部、底部
3.index.css 首页CSS样式
*index.html:首页HTML文件
网页头部SOE标签
1.title:网页标题、标签
2.description:网页描述
3.keywords:网页关键词
写的时候无需写完整,直接meta:首字母就行
<!-- （首字母说的是上面三个SOE标签的首字母） -->
Favicon图标
作用:网页图标，出现在浏览器标题栏，增加网站辨识度
使用:link:favicon;
导航头部
在制作搜索框时，浏览器有默认的宽度，此时在相应CSS中加入w(宽):0;可使flex:1;生效
对搜索框添加提示文字效果
.search input::placeholder{ }
工作中购物车一般为左对齐，车上的数字向右输入
</body>
</html>
02-14
11-17
8308
8308
03-17
04-29
298
298
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
