- 博客(34)
- 收藏
- 关注
RSS订阅原创 CSS 浮动
对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响。对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。4.2 解决浮动产生的影响（清除浮动）4.1 浮动后会有哪些影响。二、元素浮动后的特点。
2023-07-03 19:36:50
225
原创 CSS 盒子模型
注意：元素早期只分为：行内元素、块级元素，区分条件只有一条：“是否独占一行”，如果按照这种分类方式，行内块元素应该算是行内元素。内容区的宽度 = 父的 content - 自身的左右margin - 自身的左右border - 自身的左右padding。上面的兄弟元素的下外边距和下边的兄弟元素的上外边距会合并，取一个最大的值，而不是相加。优先级：元素默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
2023-07-01 19:24:21
172
原创 CSS 鼠标相关属性
备注：鼠标指针样式有很多，具体可参见MDN。crosshair：十字架。/* 自定义鼠标光标 */pointer：小手。text：文字选择器。扩展：自定义鼠标图标。
2023-06-30 19:32:14
131
原创 CSS 背景相关属性
length：使用具体的长度值来指定背景图像的宽度和高度。contain：将背景图像等比例缩放，保持图像完全适应背景区域，不会裁剪图像，可能会在背景区域留白。这些属性值可以单独使用，也可以组合使用，例如：background-size: cover 50%;percentage：使用百分比值来指定背景图像的宽度和高度，相对于背景区域的百分比。示例：background-size: 50% 75%;cover：将背景图像等比例缩放，保持图像完全覆盖背景区域，可能会裁剪部分图像。no-repeat：不重复。
2023-06-30 18:19:41
129
原创 CSS 表格相关属性
以上5个属性，只有表格才能使用，即：<table> 标签。auto：自动，列宽根据内容计算（默认值）生效的前提：单元格边框不能合并。fixed：固定列宽，平均分。生效前提：单元格不能合并。top：上面（默仍值）bottom：表格下面。没有数量、顺序的要求。CSS中可用的长度值。show：显示，默认。
2023-06-30 17:47:00
66
原创 CSS 列表属性
列表相关的属性，可以作用在ul、ol、li元素上。none:不显示前面的标识（很常用）lower-roman：小写罗马字。upper-roman：大写罗马字。lower-alpha：小写字母。upper-alpha：大写字母。square：实心方块。decimal：数字。
2023-06-30 16:37:35
61
原创 CSS 常用文本属性
备注： 由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。让line-height=（height✖️2）-font-size - x。问题：垂直方向上的底部对齐，更好的解决办法是什么？-- 后面我们用定位去做。开发中常用的是：rgb/rgba或HEX/HEXA（十六进制）问题：多行文字垂直居中怎么办？--后面我们用定位去做。特别注意：vertical-align 不能控制块元素。x是字体族，动态决定的一个值。
2023-06-30 16:25:33
959
原创 HTML 全局属性
作用：可以让 label 标签与表单控件相关联；也可以与 CSS、JavaScript 配合使用。给标签指定语言，具体规范和可选值请参考【10.HTML 设置语言】。完整的全局列表，请参考：全局属性-HTML（超文本标记语言）｜MDN。给标签指定唯一标识，注意：id是不能重复的。内容的方向，值：ltr、rtl。
2023-06-29 15:45:37
114
原创 CSS 像素与颜色
每一位数字的取值范围是：0～f，即：（0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f）所以没一种光的最小值是：00，最大值是：ff。/* 紫罗兰色 */color: rgb(100%,0%,0%);/*可简写为：#f986*/color: rgb(255,0,0);
2023-06-29 14:56:51
199
原创 CSS 三大特性
-元素的同一个样式名，被设置了不同的值，这就是冲突。备注：参照MDN网站，可查询属性是否可被继承。并集选择器的每一个部分是分开算的！
2023-06-28 21:07:18
61
原创 CSS 选择器！
1.1通配选择器* {属性名：属性值；* {/* 选中所有元素 */备注：目前来看通配选择器貌似有点鸡肋，但后面清楚样式时，会对我们有很大帮助。1.2 元素选择器标签名 {属性名: 属性值；备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。1.3 类选择器class 翻译过来有：种类、类别的含义，所以class值，又称：类名。.类名 {属性名: 属性值；/* 选中所有 class 值为 speak 的元素 */.speak {color: red;
2023-06-28 19:57:52
115
原创 CSS 代码风格
项目上线时，我们会通过工具（webpack）将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让网页打开的速度更快。紧凑风格 --项目上线时推荐，可减小文件体积。展开风格 --开发是推荐，便于维护和调试。
2023-06-25 21:26:21
95
原创 CSS 语法规范
备注2:选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上。备注1:最后一个声明后的分号理论上能省略，但最好还是写上。
2023-06-25 21:18:36
66
原创 CSS 样式表的优先级
1、内部样式、外部样式，这二者的优先级相同，且：后米的 会覆盖 前面的（简记：“后来者居上”）2、同一个样式表中，优先级也和编写顺序有关，且：后面的 会覆盖 前面的（简记：“后来者居上”）优先级规则：行内样式>内部样式=外部样式。3、可触发浏览器的缓存机制。1、结构与样式未彻底分离。2、样式不能多页面复用。4、结构与样式彻底分离。1、结构与样式未分离。1、样式可多页面复用。
2023-06-25 21:08:01
733
原创 CSS 编写位置
书写繁碎，样式不能复用，并且没有体现：出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时才偶尔使用。1、<style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中。写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。1、style 属性的值不能随便写，写要符合 CSS 语法规范，是 名：值；1、新建一个扩展名为 .css 的样式文件，把所有css代码都放入此文件中。2、此种写法：样式可以复用、代码结构清晰。
2023-06-25 20:38:19
66
原创 meta 元信息
meta name="descripotion" content="80字以内的一段话，与网站内容相关"><meta name="keywords" content=" 8-12个以逗号分隔的单词/词语"<meta name="copyright" connect="2023-2027©️版权所有"><meta name="robots" content="此处可见下表">2、针对IE浏览器的兼容性配置。noarchive 的替代名称。10、配置网页自动刷新。5、配置网页描述信息。8、配置网页生成工具。
2023-06-25 13:54:44
74
原创 HTML 字符实体
在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTML实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。字符实体由三部分组成：一个&和一个实体名称（或者一个#和一个实体编号），最后加上一个分号；
2023-06-21 18:06:27
488
原创 HTML 框架标签
frameborder：是否显示边框，值：0或者1。name：框架名字，可以与target属性配合。height：框架的高。width：框架的宽。
2023-06-21 18:02:37
57
原创 HTML 表单
标签名标签语义常用属性单\双标签form表单action 属性：表单要提交的地址。target 属性：跳转的新地址的打开方式；值：_self、_blankmethod 属性：请求方式，可选值：get、post双input多种形式的表单控件type 属性：指定表单控件的类型。可选值：text、password、radio、checkbox、hidden、submit、reset、button等。name 属性：指定数据名称value 属性：对于输入框：指定默认输入的值；
2023-06-20 23:24:40
409
1
原创 HTML 表格
align：设置单元格水平对齐方式，可选值如下： 1、 left 左对齐 right 右对齐 center：居中。valign：设置垂直对齐方式，可选值如下：1、top 顶部对齐 bottom 底部对齐 middle 居中对齐。1、一个完整的表格由：表格标题、表格头部、表格主体、表格脚注、四部分组成。width：设置单元格的宽度，同列所有单元格全都会受影响。height：设置单元格的高度，同行所有单元格全都受影响。valign：设置单元格垂直对齐方式。align：设置单元格水平对齐方式。
2023-06-19 21:15:02
96
原创 HTML 列表
一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是一个术语描述（dd可以有多个）概念：列表中的某项内容，有包含一个列表（注意：嵌套时，请务必把结构写完整）注意： li 标签最好写在 ul 或者 ol 中，不要单独使用。概念：所谓自定义列表，就是一个 术语名称 和 术语描述 的列表。概念：无顺序或不侧重顺序的列表。概念：有顺序或侧重顺序的列表。
2023-06-18 19:44:01
43
原创 HTML 超链接
主要作用：从当前页面进行跳转href ：要跳转的位置target ：跳转时如何打开页面，常用值如下：_self : 在本页签中打开_blank : 在新页签中打开跳转到的页面：想展示多个回车或空格，怎么办呢？---后面会讲跳转到文件注意：若浏览器无法打开文件，则会引导用户下载注意：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
2023-06-18 18:02:30
46
原创 HTML 图片标签
2、网络绝对路径：http://www.atguigu.con/images/index_new/logo.png。使用网络绝对路径，确实方便，但要注意：若啊服务器开启了防盗链，会造成图片引入失败。相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。图片的格式非常多，上面这些，只是一些常见的，我们前端人员经常能接触到的。1、本地绝对路径：E：/a/b/c/奥特曼.jpg (很少使用)
2023-06-18 01:03:50
112
1
原创 HTML 文本标签
3、排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。生活中的例子：div是大包装袋，span是小包装袋。本意是：人物的思想活动、所说的话等等。4、文字标签通常都是行内元素。1、用于包裹：词汇、短语等。现在多用于：呈现字体图标。2、通常写在排版标签里边。
2023-06-17 16:05:19
164
1
原创 HTML 块级元素与行内元素
marquee 元素设计的初衷是：让文字有动画效果，但如今我们可以通过CSS来实现了，而且还可以更炫酷，所以marquee 标签已经过时了（废弃了），不推荐使用。1、块级元素 中能写行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）2、行内元素 中能写 行内元素，但不能写块级元素。h1～h6 不能相互嵌套。
2023-06-11 23:15:51
75
原创 HTML 语义化标签
div 语义（含义） 没有任何语义就是一个包裹器。如果有一天你想用h1了，最好不要因为他的默认效果，而是因为他的语义-----网页主要内容。p 语义（含义） 段落。如果有一天你想用p了，最好不要因为他的默认效果，而是因为他的语义-----段落。h1～h6 语义（含义） 标题。语义化：标签默认的效果不重要，语义最重要！
2023-06-11 22:47:11
39
原创 HTML 排版标签
标签名 标签含义 单/双 标签 h1~h6 标题 双 p 段落 双 div 没有任何含义，用于整体布局（生活中的包装袋） 双 h1 最好只写一个，h2～h6 能适当的多写 h1~h6 不能互相嵌套，例如：h1 标签中最好不要写 h2 标签了。 p 标签很特殊！它里面不能有：h1～h6、p、div 标签（暂时先这样记，后面会说规律）。
2023-06-11 20:59:44
39
原创 HTML 标准结构
在存放代码的文件夹中，存放一个favicon.ico图片,可配置网站图标。配置VScode的内置插件emmet，可以对生成结构的属性进行定制。生成的结构中，有两个meta标签，我们暂时用不到，可以先删掉。使用vscode，输入！，随后回车即可快速生成标准结构。
2023-06-11 18:59:40
35
原创 HTML 字符编码
字符编码：计算机会将字符以二进制的方式存储在计算机中。当你查看这个字符时，他会根据字符编码进行解析将0101的数字转换成字符。存储的过程称为编码---查看的过程称为解码。字符编码原则2:存储时采用哪种方式编码，读取时就必须采用相同的方式解码。否则：数据能呈现，但数据错乱（乱码）！每个字符编码都有所不同：例如GBK中0110代表喔---UTF-8中0110代表你。字符编码原则1：存储时，务必采用合适的字符编码。否则：无法存储，数据会丢失！meta 是定义字符编码的标签----默认是UTF-8。
2023-06-11 18:11:02
522
原创 HTML 文档声明
1、作用：告诉浏览器当前网页的版本。html3 html4 html5等。3、注意：文档声明，必须在网页的第一行，且在 html 标签外。
2023-06-11 01:27:24
66
原创 HTML 注释
特点：注释的内容会被浏览器所忽略，不会呈现在页面中，但是源码中依然可见。注释的作用：让代码不参与运行，对代码进行解释和说明。注释不可以嵌套，以下是写错的。
2023-06-11 01:11:19
38
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人