<!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>
HTML5+CSS3学习笔记
最新推荐文章于 2024-09-11 10:10:41 发布