html
文章平均质量分 62
格子学前端
这个作者很懒,什么都没留下…
展开
-
CSS3基础之3D转换
文章目录1. 三维坐标系2. 3D位移translate3d3. 透视perspective3.1`translateZ`4. 3D旋转`rotate3d`5. 3D呈现`transform-style`1. 三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴: 水平向右 注意: x 右边是正值,左边是负值y轴: 垂直向下 注意: y 下面是正值,上面是负值z轴: 垂直屏幕 注意: 往外面是正值,往里面是负值tips: 3D 转换我们主要学习工作中最常用的3原创 2022-03-24 08:04:59 · 800 阅读 · 19 评论 -
CSS3基础之动画
文章目录前言1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言动画animation是CSS3中新增的内容之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结...原创 2022-03-23 08:50:18 · 1412 阅读 · 16 评论 -
CSS3基础之filter、calc函数、transition过渡
文章目录1.CSS3盒子模型1. 1 content-box1. 2 border-box2.滤镜filter3.calc函数4.transition过渡1.CSS3盒子模型CSS3 有两种不同的盒模型,可以分别通过设置box-sizing的content-box或border-box这两个属性来得到1. 1 content-box<style> div { box-sizing: content-box; }</style>c原创 2022-03-22 08:17:17 · 818 阅读 · 20 评论 -
CSS3基础之2D转换
文章目录1.2D转换1.1移动translate1.2旋转rotate1.3旋转中心点transform-origin2.缩放scale3.2D转换综合写法4.2D转换总结1.2D转换**转换(transform)**是可以实现元素的位移,旋转,缩放等效果移动:translate旋转:rotate缩放:scale在CSS中的二维坐标系1.1移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位<style> div原创 2022-03-21 08:16:03 · 594 阅读 · 32 评论 -
CSS3之新增选择器
文章目录1.属性选择器1.利用属性选择器就可以不借助于类或者id选择器2.属性选择器还可以选择 属性 = 值的某些元素3.属性选择器可以选择属性值开头的某些元素4.属性选择器可以选择属性值结尾的某些元素2.结构伪类选择器2.1 `E:first-child` 和`E:last-child`2.2 `nth-child(n)`2.3`E:first-of-type`和`E:last-of-type`3.伪元素选择器1.属性选择器属性选择器可以根据元素特定的属性来选择元素,这样就可以不用借助于类或者i原创 2022-03-19 08:41:45 · 719 阅读 · 16 评论 -
CSS基础之元素的隐藏与显示
文章目录前言1.display显示隐藏2.visibility显示隐藏3.overflow溢出显示隐藏4.display与visibility的区别前言类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现,这时候我们就需要用到元素的隐藏和显示1.display显示隐藏display属性用于设置一个元素应如何显示<style> div { display: block; /* 同时具有转换为块级元素和显示元素的作用原创 2022-03-18 08:12:50 · 856 阅读 · 20 评论 -
CSS基础之定位
文章目录前言1.定位的组成2.静态定位static3.相对定位relative4.绝对定位absolute5.子绝父相6.固定定位fixed7.粘性定位sticky8.定位模式总结前言定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子1.定位的组成定位 = 定位模式 +边偏移定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:值语义static静态定位relative相对原创 2022-03-17 08:33:36 · 410 阅读 · 20 评论 -
HTML基础标签汇总
文章目录一、HTML 文档结构1.基本结构标签2.文档类型声明标签3.lang语言种类4.字符集二、标签1.标题标签2.段落标签3.换行标签4.文本格式化标签5.盒子标签6.图像标签7.超链接标签8.特殊字符9.表格标签10.列表标签11.表单标签一、HTML 文档结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2022-03-13 09:50:41 · 1679 阅读 · 46 评论 -
CSS基础之盒子模型
文章目录前言1.盒子模型的组成2.边框(border)3.内边距(padding)4.外边距(margin)①外边距典型应用②外边距合并③清除内外边距前言css页面布局三大重点: css 盒子模型 、 浮动 、 定位1.盒子模型的组成border(边框)content(内容)padding(内边距)margin(外边距)2.边框(border)CSS 边框属性允许你指定一个元素边框的样式和颜色边框由三部分组成:边框宽度(粗细)、边框样式、边框颜色属性作用原创 2022-03-12 08:34:51 · 336 阅读 · 18 评论 -
CSS基础之CSS三大特性
文章目录1.层叠性2.继承性3.优先级1.层叠性所谓层叠性是指多种CSS样式的叠加,它是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性覆盖掉原则:样式冲突,遵循的原则是就近原则。 哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2.继承性子标签会继承父标签里面的某些样式,例如文本颜色和字号等Tips:恰当地使用继承可以简化代码,降低CSS样式的复杂性3.优先级当同一个元素指定多个选择器,就会有优原创 2022-03-11 08:49:03 · 1000 阅读 · 24 评论 -
CSS基础之CSS背景
文章目录前言1.background-color2.background-image3.background-repeat4.background-position5.background-attachment6.背景复合写法7. 背景半透明8.背景总结前言通过 CSS 背景属性,可以给页面元素添加背景样式,包括background-color、background-image、background-repeat、background-position等1.background-color<原创 2022-03-09 07:41:53 · 397 阅读 · 25 评论 -
CSS基础之CSS元素显示模式
原创 2022-03-07 08:29:30 · 212 阅读 · 16 评论 -
CSS基础之CSS复合选择器
原创 2022-03-05 08:03:26 · 303 阅读 · 26 评论 -
CSS基础之CSS文本属性
文章目录前言1.color2.text-align3.font-size4.text-decoration5.text-indent6.line-height7.文本属性总结前言CSS 文本属性可以设置文本的 外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等1.colorcolor属性用于定义文本的颜色 <style> div { color: blue; } </style>原创 2022-03-03 08:19:37 · 2078 阅读 · 23 评论 -
CSS基础之CSS字体属性
文章目录前言1.font-family2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结前言CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)1.font-familyCSS 使用 font-family属性设置文本的字体系列 <style> div { font-family: Arial, "Microsoft Yahe", "微软雅黑"; }原创 2022-03-01 12:13:55 · 653 阅读 · 20 评论 -
CSS基础之CSS选择器
CSS选择器前言一、基础选择器分类1.标签选择器2.类选择器3.类选择器-多类名4.id选择器5.通配符选择器总结前言要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。一、基础选择器分类1.标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 <style> 标签名 { 属性1: 属性值1; ..原创 2022-01-24 12:50:23 · 516 阅读 · 15 评论 -
CSS基础之CSS简介
CSS简介前言一、什么是CSS?二、CSS语法规范三、CSS代码风格1.样式格式书写2.空格规范前言如果说HTML是网页内容的载体,那么CSS就是网页的外衣。CSS与HTML一样,都是网页的的重要组成元素,两者相辅相成,缺一不可一、什么是CSS?CSS是层叠样式表的简称,有时我们也会称之为CSS样式表或级联样式表。与HTML类似,CSS也是一种标记语言,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边框等)以及版面的布局和外观显示样式等。C..原创 2022-01-23 10:12:37 · 606 阅读 · 13 评论 -
HTML常用标签之表单标签
HTML常用标签之表单标签前言一、表单域二、表单元素1.input 输入表单元素2.select 下拉表单元素3.textarea 表单元素前言在网页中,我们需要跟用户进行交互,手机用户资料,此时就需要用到表单标签在HTML中,一个完整的表单通常由表单域、表单控件(表单元素)和提示信息三个部分构成一、表单域表单域是一个包含表单元素的区域在HTML标签中,<form>标签用于定于表单域,以实现用户信息的收集和传递<form>会把它范围内的表单元素信息提交给服务..原创 2022-01-21 21:42:18 · 3356 阅读 · 20 评论 -
HTML常用标签之列表标签
列表标签前言一、无序列表Tips二、有序列表Tips三、自定义列表Tips四、代码实现总结前言列表标签的主要作用是页面布局,它相比表格标签,更加整齐、整洁、有序,作为布局更加自由和方便关于表格标签可以点这里→HTML常用标签之表格标签一、无序列表<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义,基本语法格式如下~Tips无序列表的各个列表项之间没有顺序之分,是并列的<ul>只能嵌套<..原创 2022-01-20 08:38:29 · 8175 阅读 · 16 评论 -
HTML常用标签之表格标签(合并单元格)
表格标签之合并单元格前言一、合并单元格的方式二、目标单元格三、删除单元格四 、代码实现总结前言关于表格标签基础点这里→HTML常用标签之表格标签在某些特殊情况下我们需要把多个单元格合并成一个单元格,这时候我们就需要用到表格标签中的合并单元格操作。一、合并单元格的方式跨行合并rowspan="合并单元格的个数"跨列合并colspan="合并单元格的个数"二、目标单元格我们只需将代码写入目标单元格即可实现合并单元格的操作跨行:最上侧单元格为目标单元格跨列:最左侧单元..原创 2022-01-16 20:14:17 · 8924 阅读 · 16 评论 -
HTML常用标签之表格标签
表格标签的主要作用是显示、展现数据,使得数据的显示非常规整,提高可读性。先来介绍三个最常用的表格标签:1. <table> </table> 适用于定义表格的标签2. <tr> </tr>用于定义表格中的行,必须嵌套在<table> </table>中3. <td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>中下面来看看它们的具体实现~<!DOCTY原创 2022-01-13 14:00:00 · 2361 阅读 · 0 评论 -
HTML中的特殊字符
在HTML页面中,有一些特殊的符号无法直接使用,我们可以使用下面的特殊字符来进行代替在以上的特殊字符中我着重介绍一下空格、小于、大于这三个比较常用的字符1. 空格符 在html中我们不能直接通过打空格的方式来隔开文字,而是应该在文字间插入空格符 (nbsp的全称是No-Break Space,意为不间断空格)2. 小于号 <小于号<的英文全称是less than,在这里我们可以借助英文全称来记忆它~3. 大于号 >原创 2022-01-12 20:38:37 · 12677 阅读 · 0 评论 -
HTML常用标签之注释标签
在HTML文档中添加一些便于阅读和理解的但又不需要显示在页面中的文字时,我们可以使用注释标签。注释标签的具体使用格式为 <!-- ‘内容’ -->,下面我们来看看具体代码的实现~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-01-12 20:16:16 · 2920 阅读 · 0 评论 -
HTML常用标签之超链接标签
超链接标签<a>用于定义超链接,作用是从一个页面链接到另一个页面,超链接标签有几个属性比较重要,下面来简单介绍一下1. href <a href="跳转目标地址"></a>href用于指定链接目标的url地址,它是超链接标签的必须属性,简单用法如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq原创 2022-01-09 14:00:00 · 1128 阅读 · 0 评论 -
HTML常用标签之图像标签
图像标签<img>用于定义HTML页面中的图像,它有多种属性,下面简单介绍一下它的一些重要属性1. src <img src="图像URL"/> src是`<img>`标签的必须属性,用于指定图像文件的路径,我们可以通过在src属性中写入图片关于html文件的相对路径或者绝对路径来达到使网页中显示图片的目的,具体操作如下~<!DOCTYPE html><html lang="en"><head> <meta原创 2022-01-08 23:21:16 · 5309 阅读 · 0 评论 -
HTML常用标签之div和span标签
<div>和<span>可以抽象地理解为盒子标签,但它们彼此也有一些差别,具体的用法如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2022-01-09 09:30:00 · 598 阅读 · 1 评论 -
HTML常用标签之文本格式化标签
文本格式化标签有很多种,包括粗体、斜体、删除线、下划线等,下面的这张表格简单地介绍了文本格式化标签地使用标签地具体使用,见以下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont原创 2022-01-08 22:18:24 · 1570 阅读 · 1 评论 -
HTML常用标签之换行标签
最近在学习html,在这里分享下自己的学习笔记~换行标签<br/>,简单易懂,咱们直接来看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de原创 2022-01-08 22:05:07 · 18232 阅读 · 1 评论 -
HTML常用标签之段落标签
最近在学习html,在这里分享下自己的学习笔记~段落标签<p>,它的使用见以下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2022-01-08 21:56:05 · 4214 阅读 · 0 评论 -
HTML常用标签之<h1>到<h6>标签
最近在学习html,在这里分享下自己的学习笔记~h1到h6标签也叫标题标签,它的使用见以下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2022-01-08 21:43:57 · 2268 阅读 · 1 评论 -
HTML入门之代码骨架
最近在学习html,在这里分享下自己的学习笔记~<!DOCTYPE html> //告诉浏览器使用哪种html版本来显示网页<html lang="en"> //定义当前文档显示的语言//中文为“zh-CN"<head> <meta charset="UTF-8"> //规定html文档使用的字符编码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2022-01-08 20:39:27 · 974 阅读 · 0 评论