- 博客(43)
- 收藏
- 关注
RSS订阅原创 淘宝项目实战视频笔记
通过加载本地字体文件来实现自定义图标。设置字体时使用样式。.icon {在使用自定义图标时，可能会遇到图标加载失败、显示异常等问题。需要检查字体文件路径是否正确、定义是否准确，以及在不同浏览器上的兼容性。
2025-02-09 13:03:01
768
原创 week seven
设计栏：选择、矩形、椭圆、多边形、直线、钢笔、文本、画板、缩放、在这一工作栏下完成不同画板之间的交互，实现不同的交互效果。shift键 或 鼠标左键拖拽选中 选中多个图形。在这一工作栏下完成对画板的设计。选中组件+alt 查看距离。alt 鼠标中键 缩放。空格 鼠标左键 拖拽。练习：苹果音乐播放器。
2024-12-08 18:24:10
257
原创 week five
居中:盒子在其包含块中居中##水平居中##行盒(行块盒)水平居中设置行盒(行块盒)父元素text-align:center##常规流块盒水平居中定宽，设置左右margin为auto##绝对定位元素的水平居中定宽，设置左右的坐标为0(left:0，right:0)，将左右margin设置为auto##垂直居中##单行文本的垂直居中设置文本所在元素的行高，为整个区域的高度##行块盒或块盒内多行文本的垂直居中没有完美方案1.设置盒子上下外边距相同，达到类似效果。
2024-11-24 18:16:11
1700
原创 参考线-深度理解字体
行盒组合起来，可以形成多行，每一行的区域叫做1ine-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。设置为1的时候，表示行高和字体的相对大小一样，而文字的实际大小一般会大于文字的相对大小，所以会出现多行文本有重叠的情况。text-bottom:该元素的virtual-area的底边，对齐父元素的text-bottom。text-top:该元素的virtual-area的顶边，对齐父元素的text-top。制作文字时，会有几根参考线，不同的文字类型，参考线不一样。
2024-11-24 17:41:03
1398
原创 【扩展说明】
1.左浮动的盒子向上向左排列2.右浮动的盒子向上向右排列3.浮动盒子的顶边不得高于上一个盒子的顶边4.若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。
2024-11-24 12:15:00
1430
原创 网页布局（CSS）
确定边栏的宽度，设定容器盒子的左右padding值与边栏宽度相同，然后分别设置一个左右边栏的left:0;再给下面区域设置padding-top，设置为header的高度，相当于划出一个空间放绝对定位的header元素。下面区域的宽高设置为容器的100% 会导致 下面区域超出容器。容器盒子的高度由主区域撑开，当主区域的内容过少，高度不够时，容器盒子的高度也会变小，此时设置容器盒子的。高度设置百分比的前提条件，包含块的高度跟被设置的这个元素的高度没有关系。指排列页面中的区域，大块区域的分布。
2024-11-24 11:15:00
519
原创 week four
学习了更多的选择器，更多的样式，iframe元素，如何在页面中使用flash，表单元素相关知识，表格元素，以及HTML中其他一些元素，web图标和字体，块级格式化上下文，了解了@规则。本周学习HTML和CSS的进阶内容。
2024-11-17 19:02:56
110
原创 块级格式化上下文
1. 根元素 意味着，<htm1>元素创建的BFC区域，覆盖了网页中所有的元素。3. 不会和子元素进行外边距合并 （处于不同的bfc的元素不会发生外边距合并）创建bfc的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。这个区域由某个HTMl元素创建，以下元素会在其内部创建bfc区域。它是一块独立的渲染区域，规定了在该区域内，常规流块盒的布局。1. 创建bfc的元素，它的自动高度需要计算浮动元素。4. 常规流块盒的自动高度和摆放位置，无视浮动元素。2. 常规流块盒在包含块的垂直方向上依次摆放。
2024-11-17 18:57:16
230
原创 web图标和字体
解决用户电脑上没有安装相应字体，强制让用户下载该字体。一般用i元素来做图标，i元素是行盒，i元素默认是斜体。字体图标是一个文字，具有文字的特点。在线使用，直接连接到在线网站地址。离线使用，下载css文件到本地。2. 字体图标（兼容性）# web图标和字体。
2024-11-17 18:53:02
124
原创 @规则 at-rule
这样在html文档中就只用link一个css文档，在这个css文档中再导入另一个css文件。用于 告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行。at-rule: @规则、@语句、CSS语句、CSS指令。2. charset **必须写到第一行**书写格式：@charset "utf-8";书写格式：@import“路径";用于 导入另外一个css文件。
2024-11-17 18:49:49
98
原创 html中的其他元素
写法二：把图标放在项目根目录的最后，图标文件名改成(favicon.ico）写法一：rel属性值可以写成icon/shortcut icon。4. 和 5. 都有一个属性 cite 表示引用出处。type:（属性值是MIME，表示资源类型）可以省略。7. hr （只有功能无语义，空元素）6. br （只有功能无语义，空元素）rel:（链接的资源与当前网页的关系）图标 图片的后缀名 （.ico）默认样式，给元素内容加双引号。链接外部资源（CSS、图标）1. abbr 缩写词。分割线，主要用于分割。
2024-11-17 18:49:00
346
原创 表格元素系列
1.table元素的border-collapse属性控制td和th每个单元框之间的间隙。3.表格的单元格合并 跨行跨列 colspan rowspan。7.最后一行靠右排列，text-align:right;后台:面向管理员 对界面要求不高，对功能性要求高。表格不再适用于网页布局的原因，表格的渲染速度过慢。5.荧光棒效果，指鼠标悬浮到某行的时候，整行变色。在css技术出现之前，网页通常使用表格布局。spread默认值，表示分开，有间隙。6.选中所有的第一列，伪类选择器。colspan 表示跨越的列数。
2024-11-17 18:46:28
197
原创 美化表单元素
原理：自己重新用一个普通元素写一个样式，而不是属性值为radio或者是checkbox的input元素。outline-offset表示外边框偏移量，当outline的样式取值为auto时，失效；表示选中 选中状态下的单选框或多选框 选项 的下一个相邻的label兄弟元素。单选框和多选框特有的伪类选择器 ，被选中的单选框或多选框 选项。使用tabindex属性进行设置，切换的先后顺序。原因：因为单选框和多选框的样式根本无法改变。both:默认值，两个方向都可以调整尺寸。重置后，自己给元素添加样式，
2024-11-17 18:41:12
206
原创 表单元素以及配合表单元素使用的其他元素
select元素 表示下拉列表选择框 option元素 元素内容表示选项内容 optgroup元素给option元素分组 label属性 值表示组名。给datalist写一个id属性值，再给input元素写一个list属性，值写datalist的id属性值。特殊点：默认自带值，写在元素内容，而不是value属性值，而且元素内容内没有空白折叠。name属性值为提交数据的名字，选项的value值，option元素内容是给用户看的。做法：给表单元素加一个id属性，for属性书写表单元素id的值。
2024-11-17 18:32:13
306
原创 在页面中使用 flash
多用途互联网邮件类型：在互联网中通过一个格式化文本来确定资源类型。当浏览器能够识别object元素时，就会忽略embed这一子元素。比如：资源是一个jpg图片，MIME：image/jpeg。embed元素不能作为object元素的子元素。把embed元素写成object元素的子元素。data 资源位置 嵌入资源的地址。可以使用两个元素，都是可替换元素。用于传递参数，提供一些额外的信息。type 资源类型 格式化文本。## embed （空元素）data和type属性。src type属性。
2024-11-17 18:12:54
220
原创 iframe元素
4. 具有行块盒的特点 ，可以设置宽高，盒模型中所有尺寸都有效。相当于在自己的网页上再打开一个别人的网站。3. css不能完全控制其中的样式。2. 显示的内容取决于元素的属性。通常用于在网页中嵌入另一个网页。iframe 是可替换元素。# iframe 元素。
2024-11-17 18:05:54
161
原创 更多的样式
通过background-position先把目标图标放到盒子的左上角，contain:保证图片完整的显示在盒子内，但是不改变图片本身的比例。选中的对象是一整个元素，不管元素里有什么，整个盒子，取值范围0~1。1.当图片属于网页内容的时候 网页结构的一部分，必须使用img元素。默认情况下，是按照图片本身的大小来显示的，不会对图片进行缩放。生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。表示横向撑满，纵向的比例保持不变，按比例缩放。当背景图没有填满整个盒子或者是视口的时候，
2024-11-17 18:03:23
252
原创 更多的选择器
表示选中所有的第一个子元素，选中的范围太广，一般与元素选择器连用。a:first-of-type 表示选中子元素中第一个a元素。表示选中第五个子元素，并且第五个子元素必须是a元素才能被选中。同时满足两个条件 是第一个子元素，同时是li元素。如果第一个子元素不是li元素，则不会选中该元素。表示选中第一个子元素，同时这个子元素是li，表示选中p元素内的第一个字母。表示选中子元素中的第五个a元素。child参考的是全部子元素。而type参考的是某类子元素。它们参考的子元素的范围不同。这一类元素中的第一个。
2024-11-17 17:22:05
212
原创 前端 布局规则之浮动与定位
用伪元素选择器，给容器元素的最后加上一个注意前面所有浮动盒子的伪元素，就可以撑开容器的高度。1.宽度为auto时，适应内容宽度（注意与常规流区分，在常规流中，盒子宽度auto 会自动吸收空间，填充整个包含块的宽度）2.高度为auto时，与常规流一致，适应内容的高度高度（无论在哪一种排列方式下，高度的auto值都表示，适应内容高度）原因：浮动盒子脱离了常规流，因此，常规流盒子在计算高度时，不会考虑浮动盒子。2.浮动元素的包含块，和常规流一样，为父元素的内容盒。定位:手动控制元素在包含块中的**精准**位置。
2024-11-10 18:10:44
400
原创 week two
css方面，学习了css代码的书写，以及常见的样式声明，简写属性，几种简单选择器，学习了层叠，继承，以及属性值的计算过程是如何进行的，明白了页面的渲染过程。接下来学习了非常重要的一个概念，盒模型，有块盒，行盒，行块盒，学习到常规流，即页面中盒模型的排列方式之一，并且根据视频，尝试做出了一个简单的页面。具体学习内容有，HTML的图片元素，多媒体元素，列表元素，容器元素，以及元素的包含关系。本周继续学习HTML的基础知识，并且开始了对css的学习。
2024-11-03 17:53:58
142
原创 css常规流
想要子元素离父元素的边框有距离的话，可以将父元素的margin改为padding，或者加border，只要两个margin之间有任何的东西，就不会合并。包含块(containing block):每个盒子都有它的包含块，包含块决定了盒子的排列区域。2.包含块的高度不取决于子元素的高度（对包含块的高度进行了设定），百分比相对于父元素高度。在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。1.包含块的高度取决于子元素的高度时，设置百分比无效。
2024-11-03 17:51:23
182
原创 行盒盒模型
大部分元素，页面上显示的结果，取决于元素内容，称为**非可替换元素**少部分元素，页面上显示的结果，取决于元素属性，称为**可替换元素**调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。可替换元素类似于行块盒，盒模型中所有尺寸都有效。水平方向有效，垂直方向不会实际占据空间。水平方向有效，垂直方向不会实际占据空间。水平方向有效，垂直方向不会实际占据空间。3.内边距(填充区) padding。## 可替换元素 和 非可替换元素。5.外边距 margin。4.边框 border。
2024-11-03 17:48:15
210
原创 盒模型应用
衡量设计稿尺寸的时候，往往量的是边框盒，但设置width和height，则设置的是内容盒。CJK字符(文字位置截断)，非CK字符(单词位置截断)//空白折叠，不换行。默认情况下，width 和 height 设置的是内容盒宽高。word-break，会影响文字在什么位置被截断换行。break-all:截断所有。keep-all:保持所有。实现当内容溢出时，用...代替显示，表示没显示完。此时背景覆盖内容盒，内边距和边框不会被覆盖。此时，宽度和高度设置的就是边框盒的。默认情况下，背景覆盖边框盒。
2024-11-03 17:46:22
209
原创 css盒模型
内容部分通常叫做整个盒子的**内容盒 content-box**边框+填充区+内容区 =**边框盒 border-box**常见的行盒:span、a、img、video、audio。填充区+内容区 =**填充盒 padding-box**二 padding 上下 左右 （上下一样，左右一样）浏览器默认样式表设置的块盒:容器元素、h1~h6、p。1.行盒，display等于inline的元素。边框 = 边框样式 + 边框宽度 + 边框颜色。颜色样式没有设定就按照字体颜色，默认为字体颜色。
2024-11-03 17:44:37
230
原创 css 继承
宽(width)，高(height)，不能被继承。通常，跟文字内容相关的属性都能被继承。子元素会继承父元素的某些css样式。background 不可继承。
2024-11-03 17:42:53
84
原创 css 层叠
十位:等于选择器中所有类（class）选择器、属性（用中括号）选择器、伪类选择器的数量。常见的重置样式表:normalize.css、reset.css、meyer.css。4.个位:等于选择器中所有元素选择器、伪元素选择器的数量。（对同一个元素的同一个样式进行了多次的声明）百位:等于选择器中所有id选择器的数量。书写一些作者样式，覆盖浏览器的默认样式。作者样式表:开发者书写的样式。3）浏览器默认样式表中的样式。2）作者样式表中的普通样式。## 1.比较重要性。## 2.比较特殊性。## 3.比较源次序。
2024-11-03 17:42:13
218
原创 css 选择器
# 选择器的并列（语法糖，只是为了方便代码的书写，没有改变代码的实质）visited:超链接访问过后的状态。active:激活状态，鼠标按下状态。1.后代元素 —— 空格（most）4.后面出现的所有兄弟元素—— ~为什么伪类选择器开头是元素名呢。link:超链接未访问时的状态。在元素的内部生成并选中子元素。根据属性名和属性值选中元素。3.相邻兄弟元素 —— +没有提供可以选中之前的元素。hover:鼠标悬停状态。选中某些元素的某种状态。前两个只有a元素可以用。2.子元素 —— >
2024-11-03 17:40:28
174
原创 HTML 常见样式声明
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素(html)则使用基准字号。**三原色，色值**:光学三原色(红、绿、蓝)，每个颜色可以使用0-255之间的数字来表达，色。可以用于让单行文本垂直居中，设置行高为容器的高度，可以让单行文本垂直居中。1)px:像素，绝对单位，简单的理解为文字的高度占多少个像素。每行文本的高度，该值越大，每行文本的距离越大。2)em:相对单位，相对于父元素的字体大小。文字粗细程度，可以取值数字，可以取值为预值。红:#ff0000，#f00。
2024-11-03 17:39:16
394
原创 css基础知识
1.id选择器（#加id名）表示id：选中的是对应id值的意思 选择范围过窄。声明块中包含很多声明(属性)，每一个声明(属性)表达了某一方面的样式。3.类选择器（.加类名）（与元素的类型没有关系 灵活 常用。一般style元素写在head元素中，让浏览器先读取到样式。3).有利于代码分离(HTML和CSS)，更容易阅读和维护。1).外部样式可以解决多页面样式重复的问题。2.内联样式表，元素样式表（不推荐。直接书写在元素的style属性中。将样式书写到独立的css文件中。就是一条条的css规则。
2024-11-03 17:37:41
106
原创 HTML元素的包含关系
3. 某些元素有固定的子元素(ul>li，ol>li，dl>dt+dd)以前:块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。4. 标题元素(h)和段落元素(p)不能相互嵌套，并且不能包含容器元素。元素的包含关系由元素的内容类别决定,可以通过MDN搜索查看。例如，查看h1元素中是否可以包含p元素。2. a元素中几乎可以包含任何元素。1. 容器元素中可以包含任何元素。
2024-11-03 17:35:33
103
原创 HTML 容器元素
header：通常用于表示页头，也可以用于表示文章的头部。footer：通常用于表示页脚，也可以用于表示文章的尾部。aside:通常用于表示侧边栏（表示附加的额外信息。section:通常用于表示文章的章节。article:通常用于表示整篇文章。HTML5新加了有语义的容器元素。没有语义，表示有一块区域。内部用于放置其它的元素。## 语义化容器元素。
2024-11-03 17:33:50
115
原创 HTML 列表元素
在一般情况下要使用css来控制显示样式，除非是某些，才用type属性，尽量避免去使用type这个属性。reversed 倒序，从语义化出发，表示逻辑是反的，显示也会变反，布尔属性。ol 表示有一个列表，并且它有顺序。## 无序列表(使用频率最高)常用于制作菜单或新闻列表。通常用于一些术语的定义。
2024-11-03 17:33:15
109
原创 HTML 多媒体元素
布尔属性 只有两种状态：1.不写 2.属性值为属性名。当版本过低时，使用一个p元素对用户进行说明。用多个source子元素 写多个视频格式。这两个元素是HTML5中最新规定的两个元素。用source子元素代替src属性。在source 中书写 src属性。controls 播放控制控件的显示。1.旧版本的浏览器不支持这两个元素。2.不同浏览器支持的音视频格式不同。在HTML5中，可以不书写属性值。解决方法：（可以获得更好的兼容性。autoplay 自动播放。以下四个都是布尔属性。muted 静音播放。
2024-11-03 17:30:56
151
原创 HTML 图片元素
方法：在img元素中使用usemap这个属性，属性值为#name（map元素的name属性）在img元素中使用usemap这个属性，属性值为#name（map元素的name属性）alt属性：当图片资源失效时，将用该属性的文字替代图片。衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具。指代，定义，通常用于把图片，图片标题，描述，包裹起来。使用效果：点击图片的特定区域，可以跳转链接。src属性：source，资源，写地址。方式：将img元素写成a元素的子元素。rect矩形 左上角 右下角。
2024-11-03 17:30:04
206
原创 week 1
3.学习了html文档的基本结构，语义化，文档元素，a元素，html字符，路径的书写等。1.了解了什么是html和css，同时了解到w3g，万维网。2.学习了vscode的使用，一些简写技巧。
2024-10-27 18:59:15
91
原创 HTML 路径的书写
端口号：如果协议是http协议，默认端口号为80；如果协议是https协议，默认端口号是443；当跳转目标和当前页面的协议相同时，可以省略协议（协议名：）协议名：http,https,file(表示一个本地文件)以./开头，./表示当前资源所在的目录。url地址：绝对路径的一种书写方式。协议名：//主机名：端口号/路径。站外资源：非当前网站的资源。站外资源：一定要用绝对路径。## 站内资源和站外资源。站内资源：当前网站的资源。## 绝对路径和相对路径。主机名：域名，IP地址。相对路径中./可以忽略。
2024-10-27 17:48:40
224
原创 HTML a元素
区别：当跳转的页面和当前页面是同一个时，锚链接不刷新页面，还是留在当前页面，但其实地址发生了改变。全局属性，所有元素都可以用，当鼠标悬浮在元素内容上时，会显示的一个完整的描述，提示文字。hyper reference :通常表示跳转地址。>id属性：全局属性，表示元素在文档中的唯一编号。要求计算机上安装有拨号软件，或者是用移动端访问。-_self：在当前页面窗口中打开，默认值。-_blank：在新的页面窗口中打开。跳转的实质就是地址发生了改变。2.锚链接（跳转某个锚点）1.普通链接（跳转地址）
2024-10-27 17:47:17
104
原创 HTML文本元素
空白折叠：在源代码中的连续空白字符（空格，换行，制表），在页面显示时会被折叠成一个空格。>在显示代码时，通常外面套一个code元素,code表示代码区域。以前：独占一行的元素叫块级元素，不会独占一行的元素叫行级元素。在pre元素中出现的内容会按照源代码格式显示到页面上。使用乱数假文时，不用花括号，在>后面直接使用。HTML5中支持的元素：HTML元素周期表。例外：在pre元素中的内容不会出现空白折叠。>跟在元素类型的后面，其后再加元素内容。pre功能的本质：有一个默认的CSS值。## span【无语义】
2024-10-27 17:38:44
138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人