![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5+CSS
文章平均质量分 61
Keeling1720
这个作者很懒,什么都没留下…
展开
-
41.css3设置变形(平移和旋转)
文章目录css3设置变形css3设置平移(translateX、translateY、translateZ)css3设置变形变形是指通过css来改变元素的形状或位置变形不会影响到页面布局使用transform来设置变形效果css3设置平移(translateX、translateY、translateZ)使用transfrom设置变形,值translateX让元素沿着x轴平移值translateY让元素沿着Y轴平移值translateZ让元素沿着Z轴平移详见代码,如下:<原创 2021-05-04 23:54:40 · 743 阅读 · 0 评论 -
40.css3的关键帧
这里直接贴代码了,跑一遍再看看代码基本上就懂了。无非就是说一下,关键帧可以在每一帧中设置自己想要的属性,然后可以定义帧的长短等等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关键帧</title> <style> .outer{ height: 500px;原创 2021-05-04 21:53:51 · 112 阅读 · 0 评论 -
39.html5的动画(animation)
文章目录html5的动画(animation)动画的定义(@keyframes(关键帧))动画的调用(使用)animation-iteration-count(动画执行的次数)animation-direction(动画执行的方向)animation-play-state(动画的执行状态)animation-fill-mode(动画的填充模式)animation的简写html5的动画(animation)animation(动画)和transition(过渡)其实差不多,就是一个自己会动(动画),一个需原创 2021-05-04 10:39:41 · 2612 阅读 · 0 评论 -
38.html5的过渡(transition)
文章目录html5的过渡(transition)transition-property(指定要执行过渡的属性)transiton-duration(指定过渡效果的持续时间)transition-timing-function(过渡的时序函数)transition-delay(过渡效果的延迟)transition(过渡的简写)html5的过渡(transition)过渡(transition):通过过渡可以指定一个元素发生变化时的切换方式,从而创建一些比较好的效果,提升用户的体验。transition-原创 2021-05-04 09:52:10 · 2454 阅读 · 0 评论 -
37.html5设置浏览器的网站logo
html5设置浏览器的网站logo很简单只需要在head下使用标签 <link rel="icon" href="./logo.png">即可设置完成。补充个知识点:一般在一些网页后边加上后缀( /ficon.ico就可以跑去获取人家的logo啦,因为我经常在csdn写博客,那就用csdn的吧,网址如下:)https://blog.csdn.net/favicon.ico网站里面啥都没有,就一篇外墙抹灰加一个logo,右键直接下载拿来耍,当然自己做自己的网站的时候不可以用原创 2021-05-03 09:49:48 · 698 阅读 · 0 评论 -
36.html5的表单(form)
文章目录html5的表单(form)表单的简介(form)表单项补充让input的文本框不要记住输入过的信息让表单项不能被修改html5的表单(form)主要用于将本地的数据提交给远程的服务器表单的简介(form)from的属性:action:表单要提交的服务器的地址表单项:文本框 <input type = “text” name=“what1”>(数据要提交到服务器,必须指定name属性值)密码框 <input type = “password” name=“wh原创 2021-05-03 09:22:29 · 362 阅读 · 1 评论 -
35.html5的表格(table)
文章目录html5的表格(table)table简介合并单元格(colspan和rowspan)长表格(thead、tbody、tfoot)html5的表格(table)table简介html5使用table标签绘制表格。在table中使用tr表示表格中的行,一个tr代表一行,n个tr代表n行。在tr中,一个td表示一个单元格,n个td就代表n个单元格<!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-05-02 22:59:12 · 565 阅读 · 0 评论 -
34.html5的线性渐变和径向渐变
文章目录html5的线性渐变和径向渐变线性渐变(linear-gradient())径向渐变html5的线性渐变和径向渐变渐变是图片,需要通过background-image来设置线性渐变(linear-gradient())使用属性:background-image:linear-gradient(方向/角度,颜色1,颜色2)来设置。方向可以是to top、to bottom、to left、to right、to top left、to top right、to bottom left、to原创 2021-05-02 14:07:34 · 675 阅读 · 0 评论 -
33.html5设置背景
文章目录html5设置背景设置背景图片(background-image)设置背景图片的重复样式(background-repeat)设置背景位置(background-position)设置背景的范围(background-clip)设置图片的原点(background-origin)设置背景的尺寸(background-size)设置背景的简写属性(background)html5设置背景设置背景图片(background-image)直接使用以下样式设置样式即可。background-ima原创 2021-05-01 12:40:42 · 2282 阅读 · 3 评论 -
32.html的文本属性
文章目录HTML的文本属性文本的垂直和水平居中文本的水平对齐(text-align)其他的文本样式HTML的文本属性文本的垂直和水平居中文本的水平对齐(text-align)text-align:文本的水平对齐,可选值:left 左侧对齐(默认)right 右侧对齐center 居中对齐justify 两端对齐其他的文本样式...原创 2021-04-29 09:54:59 · 284 阅读 · 0 评论 -
31.html的行高(line height)和字体的简写属性等等
文章目录html的行高和字体属性等等line height字体的简写属性html的行高和字体属性等等line height1.行高(line height)指的是文字占有的实际高度。可以通过line-height来设置行高,行高也可以指定一个大小(px,em或整数),如果是整数,那么行高就是字体的指定的倍数。2.设置字体宽就是字体存在的格子,设置font-size就是设置字体的高度。3.行高在字体框的上下平均分配4.行高等于父元素的高度,那么单行文字就会垂直居中。5.行高还经常用来设置文字的行原创 2021-04-27 17:26:52 · 3567 阅读 · 0 评论 -
30.html5画轮播图
自己写的有点low,有个致命缺点是一旦离开小圆点,小圆点就不是红边框加灰色背景的了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> .img1,.img2,.img3,.img4{ position: absolute原创 2021-04-27 16:48:45 · 2217 阅读 · 0 评论 -
29.html的iconfont(图标字体)
文章目录图标字体(iconfont)推荐下载链接一(fontawesome)推荐下载链接二(阿里巴巴矢量图标库)iconfont的其他用法(阿里巴巴图标库)图标字体(iconfont)图标字体(iconfont) -在网页中经常需要使用一些图标,可以通过图片来引入图标(但是图片本身较大,且不灵活) -因此,我们可以将图标直接设置为字体,然后使用font-face原创 2021-04-26 23:20:51 · 759 阅读 · 0 评论 -
28.html设置字体
文章目录字体的属性冷知识1.怎么知道自己有没有某个字体呢?2.如果我硬要用一种不常见的字体,怎么办?字体的属性由于比较简单,这里直接说明字体相关的样式:1.color:字体的颜色(前景色)2.font-size:字体的大小常用单位:px,em(相当于当前元素的一个font-size)和rem(相当于根元素的一个font-size)3.font-family:字体族(字体的格式),默认格式是微软雅黑,也可以自己设置宋体,楷体等等。可选值:(指定类别,具体格式由浏览器而定)①.monospac原创 2021-04-26 17:06:56 · 726 阅读 · 0 评论 -
27.html的定位(position)和偏移量(offset)
文章目录定位偏移量(offset)相对定位绝对定位固定定位粘滞定位定位定位(position)是一种高级的布局手段,通过定位可以将元素摆放到页面的任意位置可选值:static:默认值,元素静止,没有开启定位relative:开启元素的相对定位absolute:开启元素的绝对定位fixed:开启元素的固定定位sticky:开启元素的粘滞定位偏移量(offset)元素开启定位后,可以通过偏移量来设置元素的位置,偏移量有四个分别是top:定位元素和定位位置上边的距离bottom:定位元素和原创 2021-04-25 20:21:48 · 5135 阅读 · 0 评论 -
26.html中float属性覆盖(高度塌陷)怎么办 (BFC)
文章目录高度覆盖方法一、BFC方法二、使用clear属性高度覆盖概念:在浮动布局中,父元素的高度经常是由子元素撑开的,但是,当子元素设置为浮动时(float),其完全脱离文档流,会导致父元素的高度丢失。例如:未设置浮动时:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度塌陷</title> <style原创 2021-04-24 22:28:03 · 579 阅读 · 0 评论 -
25.html设置浮动(float属性)
文章目录html设置浮动(float属性)浮动的简介浮动其他的特点1.不会盖住文字2.脱离文档流特点html设置浮动(float属性)浮动的简介float属性:通过浮动可以使一个元素向父元素的左侧或右侧移动可选值(部分):①none;默认值,不浮动②left;元素向左浮动③right;元素向右浮动注意:1.元素设置浮动以后,水平布局的等式便不需要强制成立了。2.元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,因此,元素下边还在文档流中的元素会自动向上移动。3.浮动元素向原创 2021-04-24 17:42:38 · 9787 阅读 · 0 评论 -
24.html设置轮廓、阴影、圆角
文章目录html设置轮廓、阴影、圆角轮廓(outline)阴影(box-shadow)圆角html设置轮廓、阴影、圆角轮廓(outline)轮廓跟border(边框)类似,唯一不同的是,border会影响布局,但是outline不会,具体如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮廓、阴影、圆角</title>原创 2021-04-24 16:48:43 · 1760 阅读 · 0 评论 -
23.去除浏览器默认样式
文章目录去除浏览器默认样式1.枚举式2.简单页面草率式3.装杯专业式去除浏览器默认样式通常情况下,不同浏览器可能会为相同元素设置一些默认样式,因此就可能导致开发的页面在不同浏览器下打开效果不同。为此,在开发页面的时候,我们需要把浏览器的默认样式去除,全部由自己编写,以此来保证自己的网页在所有浏览器的显示效果都是一样的。(下面以我的谷歌浏览器为例)1.枚举式废话不多说,代码来一波:<!DOCTYPE html><html lang="en"><head>原创 2021-04-22 21:53:44 · 878 阅读 · 0 评论 -
22.行内元素的盒模型(display、visibility用法)
文章目录行内元素的盒模型一、行内元素的局限性1.行内元素不支持直接设置宽度和高度2.行内元素可以设置padding,但是不会影响页面垂直布局3.行内元素可以设置border,但是不会影响页面垂直布局4.行内元素可以设置margin,但是不会影响页面垂直布局二、display用法三、visibility用法行内元素的盒模型一、行内元素的局限性1.行内元素不支持直接设置宽度和高度<!DOCTYPE html><html lang="en"><head> &原创 2021-04-22 10:17:22 · 268 阅读 · 0 评论 -
21.布局
点击跳转水平方向布局的视频详细讲解一个元素在其父元素中,水平布局必须满足以下公式:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度可以设置为auto的有以下三个属性:(默认是width)width、margin-left、margin-right如果手动设置了以上三个数值,那么margin-right最后的结果会发生变化(跟你设置的会原创 2021-02-24 20:49:18 · 61 阅读 · 0 评论 -
20.盒子模型
盒模型、盒子模型、框模型(box model) - css将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的盒子后,将页面的布局就变成将不同的盒子摆放到不同的位置 - 每个盒子都由以下几个部分组成: 内容区(content) 内边距(padding) 边框(border) 外边距(margin)代码:<!DOCTYPE html...原创 2021-02-22 23:04:26 · 138 阅读 · 0 评论 -
19.文档流
文档流: - 网页是一个多层的结构 - 通过css可以分别为每一层设置样式 - 作为用户,只能看到最顶上一层 - 这些层中,最底下的一层称为文档流,文档流是网页的基础 我们所创建的元素默认都是在文档中进行排列 - 对于我们来说,元素z主要有两个形态 - 在文档流中 - 不在文档流中 - 元素在文档流中的特点: - 块元素 ...原创 2021-02-22 22:48:17 · 58 阅读 · 0 评论 -
18.选择器权重(优先级)
样式的冲突: - 当我们通过不同的选择器,选中相同的元素时,并且为相同的样式设置不同的值时,此时就发生了样式的冲突 发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定 选择器的权重: 内联样式: 1000 id选择器: 100 类和伪元素选择器:10 元素选择器: 1 通配选择器: 0 继承的样式 没有优先级 ...原创 2021-02-22 22:28:16 · 3100 阅读 · 0 评论 -
17.继承
样式的继承:我们为一个元素设置的样式同时也会应用到他的后代元素上 继承是发生在祖先后代之间的 目的:方便开发 -利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上, 这样只需设置一次就可让所有元素都获取到样式 注意:并不是所有的样式都可以被继承 不如:背景相关的,布局相关等这些样式不会被继承代码:<!DOCTYPE html><html lang="en"><h..原创 2021-02-22 22:05:56 · 57 阅读 · 0 评论 -
16.伪元素
伪元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置) 伪元素使用::开头 ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 ::before 元素的开始 ::after 元素的最后 - before和after必须结合content属性来使用...原创 2021-02-22 21:45:25 · 113 阅读 · 0 评论 -
15.伪类选择器
伪类(不存在的类,特殊的类) - 伪类用来描述一个元素的特殊状态 比如:第一个子元素、被点击的元素、鼠标移入的元素 - 一般情况下使用:开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child(n) 第n个子元素, 若值为n,则全部选中, 值为2n 或者 even,则选中偶数位,也就是第2,..原创 2021-02-20 16:24:29 · 161 阅读 · 0 评论 -
14.属性选择器
属性选择器[属性名] 选择含有指定属性的元素[属性名 = 属性值] 选择含有指定属性和属性值的元素[属性名 ^= 属性值] 选择以指定属性值开头的元素[属性名 $= 属性值] 选择以指定属性值结尾的元素[属性名 *= 属性值] 选择属性中包含某属性值的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</ti.原创 2021-02-15 17:08:10 · 123 阅读 · 0 评论 -
13.关系选择器
文章目录关系选择器1.子元素选择器2.后代选择器3.兄弟选择器3.1.下一个兄弟3.2.下边所有此类兄弟关系选择器父元素 -直接包含子元素的元素子元素 - 直接被父元素包含的元素祖先元素 - 直接或间接包含后代元素的元素 - 一个元素的父元素也是他的祖先元素后代元素 - 直接或间接被祖先元素包含的元素 - 一个元素的子元素也是他的后代元素兄弟元素 - 拥有相同父元素的元素1.子元素选择器<!DOCTYPE html><html lang="en">原创 2021-02-15 16:32:11 · 823 阅读 · 0 评论 -
12.复用选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>复合选择器</title> <style> /*将class为red的元素设置为红色字体*/ .red{ color: red; } /*将class为red的div元素设置原创 2021-02-14 18:19:08 · 133 阅读 · 0 评论 -
11.css语法
/** css中的注释,注释中的内容会被浏览器所忽略 css的基本语法: 选择器 声明块 选择器:通过选择器可以选中页面中的指定元素 比如,p的作用就是选中页面中所有的p元素 声明块:通过声明块来指定要为元素设置的样式 声明块由若干个声明组成 声明是一个名值对 ...原创 2021-02-14 18:03:17 · 120 阅读 · 1 评论 -
10.css3简介及其简单用法
css - 层叠样式表 - 网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式 而最终我们能够看到的只是网页最上边的一层 - 总之一句话,css是用来设置网页中元素的样式 使用css来修改元素的样式共有三种方式: 第一种方式(内联样式,行内样式):(不常用,太繁琐) - 在标签内部通过style来设置元素的样式 注意:开发时,绝对不要使用内联样式 第...原创 2021-02-10 19:56:04 · 131 阅读 · 0 评论 -
9.音视频播放
这里的mp3和mp4都是我自己下载的,有路过看到的兄弟记得自己下载然后修改代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>音视频播放</title></head><body> <!-- audio 标签用来向页面中引入一个外部的音视频文件 音原创 2021-02-10 19:13:45 · 128 阅读 · 0 评论 -
8.图片标签和格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片</title></head><body> <!-- 图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片,img标签是一个自结束标签 img这种元素属于替换元素(基于块和原创 2021-02-09 23:37:12 · 32183 阅读 · 0 评论 -
7.超链接
覆盖原有链接,返回一个新的连接:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接</title></head><body> <!-- 超链接可以让我们从一个页面跳转到另一个页面 或者到本页面的其他位置 使用 a 标签来定义超原创 2021-02-09 17:01:37 · 144 阅读 · 1 评论 -
6.列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body> <!--无序列表,使用ul创建无序列表,li表示列表项--> <ul> <li>铅笔</li> <li&g原创 2021-02-09 03:00:09 · 68 阅读 · 0 评论 -
5.语义化标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>语义化标签</title></head><body> <!-- 在网页中HTML专门用来负责网页的结构 所以在使用HTML标签时,应该关注的是标签的语义,而不是他的样式 标题标原创 2021-02-09 02:36:24 · 171 阅读 · 0 评论 -
4.meta标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- meta主要用于设置网页中的一些元数据,元数据不是给用户看的,而是给浏览器看的 charset 指定网页的字符集 name 指定数据的名称 content 指定数据的内容 key原创 2021-02-07 13:23:53 · 236 阅读 · 0 评论 -
3.实体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实体</title></head><body> <!-- 默认情况下,在网页中编写的多个空格,会自动被浏览器当成一个空格 在HTML中,我们不能直接书写一些特殊符号 比如:多个连续的空原创 2021-02-07 12:57:19 · 83 阅读 · 0 评论 -
2.标签中的属性
比较简单,这里直接通过代码来解释:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签中的属性</title></head><body> <!-- 属性,在标签中(开始标签或自结束标签)还可以设置属性 属性是一个键值对(x = y)原创 2021-02-05 15:36:26 · 179 阅读 · 0 评论