- 博客(18)
- 收藏
- 关注
原创 h5c3新特性浏览器存储
cookie:可以设置失效时间,不设置默认关闭浏览器后失效localstorage:除非手动删除,否则永久保存sessionstorage:只在浏览器会话下有效,关闭浏览器或页面即清除。
2024-03-15 17:34:30
424
1
原创 PC端网页特效
offest翻译过来就是偏移量,我们使用offest系列相关属性可以动态的得到该元素的位置(偏移)、大小等。获得元素距离带有定位元素的位置获得元素的自身大小(宽度高度)注意:返回的数值都不带单位offest系列常用属性:注意:parentNode返回的是最近一级的父亲,不管有没有定位。
2024-03-15 17:32:30
1898
1
原创 @规则、字体图标、BFC、布局
@规则@规则又叫,@语句,CSS语句,CSS指令1.important@important" ",引号中写路径2.charset@charset"utf-8";告诉浏览器该CSS文件使用的字符编码集是utf-8,必须写到第一行3.font-face <style> @font-face{ font-family: "翩翩体"; src: url("./font/翩翩体.ttf");
2022-01-05 15:18:15
302
原创 常规流布局、浮动、定位
css中布局规则又叫视觉格式化模型是指页面中多个盒子排列规则比如:盒模型是指规定单个盒子的规则视觉格式化模型大体上将页面中盒子的排列分为三种方式1.常规流2.浮动3.定位常规流布局常规流又叫文档流,普通文档流,常规文档流所有元素默认情况下,都属于常规流布局总体规则:块盒独占一行,行盒水平依次排列包含块:每个盒子都有它的包含快,包含块决定了盒子的活动范围(排列区域)绝大部分情况下,盒子的包含块,为其父元素的内容盒1.块盒1)每个块盒的总宽度,必须刚好等于
2022-01-02 17:37:40
687
原创 盒模型和行盒盒模型
目录盒模型1.盒子类型:2.盒子的组成部分:盒模型应用:1.改变宽高范围:2.改变背景覆盖范围:3.溢出处理:4.断词规则5.空白处理:行盒盒模型1.显著特点2.行块盒(通常用于作分页)3.空白折叠4.可替换元素和非可替换元素盒模型box:盒子 每个元素在页面中都会生成一个矩形区域(盒子)1.盒子类型:1)行盒,即display:inline2)块盒,即display:block行盒在页面中不换行,块盒独占一行浏览器默认样式
2021-12-30 16:40:45
438
1
原创 层叠、继承及属性值的计算过程
目录层叠1.比较重要性:2.比较特殊性:3.比较源次序4.应用继承属性值的计算过程1.确定声明值2.层叠冲突3.使用继承4.使用默认值层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器的自动处理(权重计算)1.比较重要性:重要性从高到低:1)作者样式表中的!important样式2)作者样式表中的普通样式3)浏览器默认样式表中的样式2.比较特殊性:总体规则:选择器选中的范围越窄,越特殊具体
2021-12-29 16:18:19
224
原创 为网页添加样式(选择器和声明块)
css规则=选择器+声明块简单的选择器选择器的作用:帮助开发者精准的选中想要的元素id选择器选中的是对应Id值的元素(元素后跟id,对应声明块中#后缀) <style> #text{ color: red; background-color: black; } </style></head><body> <p id="tex..
2021-11-27 00:58:33
665
原创 表格元素和其他元素
在css技术出现之前,网页通常使用表格布局后台管理系统中可能用到表格元素前台:面向用户后台:面向管理员,对界面要求不高,对功能性要求高表格已经不再适用于网页布局,因为表格的渲染速度过慢表格元素table表格标题元素caption表头元素thaed 表格行元素tr 单元格th(表头)表格主体元素tbody 单元格td(表格主体)表尾元素tfootborder-collapse:collapse(表格各单元格折叠) ...
2021-11-25 23:18:19
183
原创 内联元素和表单元素
iframe元素通常用于在网页中嵌入另一个页面iframe可替换元素1.通常为行盒2.通常显示内容取决于元素属性3.css不能完全控制其样式4.具有行块盒的特点例子:
2021-11-24 23:57:29
113
原创 列表元素和容器元素
有序列表ol:整个列表li:列表中某一项例如 上王者需要几步 <ol> <li>打上白银</li> <li>打上黄金</li> <li>打上铂金</li> <li>打上钻石</li> <li>打上星耀</li> <li>打上王者</l
2021-11-20 19:48:48
913
原创 图片和多媒体元素
图片元素img元素图像嵌入元素1.src属性:包含了想嵌入的图片的文件路径2.alt属性:当图片资源失效时,将使用该属性的文字替代图片 <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.utFtkO_9477P0ARxbwTXWQHaEP&w=176&h=170&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2" al
2021-11-20 18:48:52
534
原创 a元素与路径
a元素表示超链接,也可以称a元素为锚元素a元素的href属性通常表示跳转地址1.作为普通链接时,可跳转至某个网页2.作为锚链接时,可跳转至该网页头部3.作为功能链接时,点击可触发某个功能例如:1.普通路径写法 <a href="http://www.baidu.com">百度</a>2.锚链接写法,通常与Id选择器共用 <a href="#chapter1">章节1</a>a href="#chapter2"
2021-11-20 14:43:47
367
原创 HTML文本元素和实体
HTML文本元素h元素 h1~h6 :表示一级标题到六级标题p元素 :段落元素span元素 :无语意的元素,常用来设置样式pre元素 :预定义格式文本,该元素通常按照 原文件中的编排,以等宽字体的形式展现出来,空格也会显示code元素 :呈现计算机代码的元素HTML实体实体字符,通常用于在页面中显示一些特殊符号有两种表示方法 :&单词&#数字 例如:小于符号 <,< 大于符号 &
2021-11-20 12:03:31
291
原创 HTML基础知识
HTML元素的组成1. 元素=起始标记+结束标记+元素内容+元素属性2. 属性=属性名+属性值①属性分类:局部属性:某些元素特有的属性(比如href)全局属性:所有元素通用(比如title)②某些元素没有结束标记,这样的元素叫做空元素③空元素有两种写法:可以理解为只写头或者尾部HTML元素的嵌套HTML元素不能相互嵌套它的一些相关名词有:父元素,子元素,祖先元素,后代元素,兄弟元素(即拥有同一个父亲元素的两个兄弟)标准的文档结构<!DOCTYPE html><h
2021-11-19 21:22:04
114
原创 HTML语义化
什么是语义化?1. 让每一个html元素都有具体含义比如:a元素表示超链接p元素表示段落h1元素表示一级标题2. 所有元素与展示效果无关即:元素展示到页面中的效果,应该由css决定因为浏览器带有默认的css样式,所以每个元素有一些默认样式。选择什么元素,取决于内容的含义,而不是显示的效果为什么要语义化?1. 为了搜索引擎优化(seo)让搜索引擎更好地理解代码(网页)搜索引擎:百度,bing,Google每隔一段时间,搜索引擎会从互联网抓取页面的源代码。语义化做的越好,搜索引擎越
2021-11-18 13:32:19
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人