![](https://img-blog.csdnimg.cn/ea01cff3ef9a48f68e52f5da8c7364cc.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5+CSS3
文章平均质量分 88
一个菜鸡的前端的学习记录!!!
执手天涯@
生命之旅,不能用双眸在别人的故事里捕捉生活的点滴。要以自己的双手,创造属于自己的梦。
展开
-
14、CSS之动画
一、动画1、动画和过渡的区别名称相同点不同点过渡都可以实现元素的动态效果只能实现元素的一个状态到另外一个状态的转换动画可以实现元素的一系列动态效果可以实现多个状态之间的变换效果,而且过程是可以控制的2、动画解释: 快速的切换大量的图片形成具有连续性的画面效果。最小单位: 动画帧、帧使用范围: 多个状态之间转换的时候、需要控制的时候。使用步骤:定义动画 /* 一. 定义单个状态的动画 */ @keyframes 动画名原创 2021-12-12 21:30:11 · 195 阅读 · 0 评论 -
13、CSS空间转换
一、空间转换解释: 实现元素在空间内的位移、旋转、缩放等效果。空间: 是从坐标轴的角度定义,和数学中的三维空间一样,但是z轴的方向指向屏幕。属性: transform1、空间转换之位移语法: transform: translate3d(X,Y,Z);取值: 正负值都可以、可以是像素也可以是百分比。代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-12-12 16:40:04 · 603 阅读 · 0 评论 -
12、CSS之平面转换
一、平面转换1、位移基本使用解释: 改变盒子在平面内的形态。一般包含(位移、旋转、缩放)属性: transform语法: tranform:translate(Xpx,Ypx);取值:正负都可以单位是像素单位百分比(参考盒子自身的尺寸)X轴正值为右,Y轴正值为左位移基本使用代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2021-12-11 14:44:40 · 393 阅读 · 0 评论 -
11、CSS装饰及案例
一、垂直对齐方式问题描述: 当图片和文字在一行中显示时,其实底部不是对齐的解决方法: 使用垂直对齐vertical-alignvertical-align属性值:属性值效果baseline默认、基线对齐top默认、顶部对齐midddle中部对齐bottom底部对齐解决实际开发问题:文本框和表单按钮无法对齐问题input和img无法对齐问题div中的文本框,文本框无法贴顶问题div不设高度由img标签撑开,此时img标签下面会存在额外间隙问原创 2021-12-08 21:48:32 · 99 阅读 · 0 评论 -
09、CSS布局之浮动
一、结构伪类选择器简介作用: 根据元素在HTML中的结构关系查找元素。优势: 减少对于HTML中类选择器的依赖,有利于保持代码整洁。使用场景: 常用于查找某父级选择器中的子元素。原创 2021-12-08 17:46:46 · 88 阅读 · 0 评论 -
10、CSS之定位
一、定位1、定位的基本介绍常见布局方式:1. 标准流块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局2. 浮动可以让原本垂直布局的 块级元素变成水平布局3. 定位可以让元素自由的摆放在网页的任意位置一般用于 盒子之间的层叠情况定位的常见应用场景:定位之后的元素层级最高,可以层叠在其他盒子上面 。可以让盒子始终固定在屏幕中的某个位置2、定位的基本使用代码示例:<!DOCTYPE html><html lang="e原创 2021-12-08 19:40:35 · 132 阅读 · 0 评论 -
08、CSS盒子模型
一、盒子模型的介绍概念:页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局。浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子。CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型。图解:二、内容区域的宽度和高度设置方法: 利用 width 和 height 属性默认设置是盒子 内容区域 的大小。图解:代原创 2021-12-08 15:37:44 · 73 阅读 · 0 评论 -
07、CSS三大特性导致问题解决
一、继承性解释: 子元素有默认继承父元素样式的特点。可以继承的常见属性:colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-height注意点:可以通过调试工具判断样式是否可以继承应用:可以在一定程度上减少代码可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小原创 2021-12-08 15:00:21 · 109 阅读 · 0 评论 -
06、CSS之显示模式
一、块级元素语法规则: display:block;显示特点:独占一行(一行只能显示一个)宽度默认是父元素的宽度,高度默认由内容撑开可以设置宽高代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor原创 2021-12-08 11:38:02 · 385 阅读 · 0 评论 -
05、CSS之背景相关属性
一、背景颜色语法规则 background-color: 属性值 ;属性值:颜色取值:关键字、rgb表示法、rgba表示法、十六进制……注意点:背景颜色默认值是透明: rgba(0,0,0,0) 、transparent背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2021-12-08 11:27:05 · 95 阅读 · 0 评论 -
04、CSS选择器进阶
一、后代选择器作用: 根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素选择器语法: 选择器1 选择器2 { css }结果: 在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式注意点:后代包括:儿子、孙子、重孙子……后代选择器中,选择器与选择器之前通过 空格 隔开代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-12-08 11:09:05 · 133 阅读 · 0 评论 -
03、CSS基础选择器和字体样式
一、CSS的介绍1、CSS全称: 层叠样式表(Cascading style sheets)2、CSS语法规则:css写在style标签中,style标签一般写在head标签里面,title标签下面。3、CSS的体验:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2021-12-08 10:45:07 · 504 阅读 · 0 评论 -
02、HTML常用标签的学习
一、标题标签**使用场景:**文章的标题、新闻的标题等等代码示例: <h1>我是1级标题</h1> <h2>我是2级标题</h2> <h3>我是3级标题</h3> <h4>我是4级标题</h4> <h5>我是5级标题</h5> <h6>我是6级标题</h6> 语义解释: 1~6级标题,重要程度依次递减特点:文字都有加粗文字都原创 2021-12-08 00:13:15 · 498 阅读 · 0 评论 -
01、HTML基础认知
一、网页的基本组成文字、图片、音频、视频、超链接等二、浏览器的作用及常见浏览器浏览器:是网页显示、运行的平台,是前端开发必备利器常见的五大浏览器:IE浏览器火狐浏览器(Firefox)谷歌浏览器(Chrome)Safari浏览器欧朋浏览器(Opera)渲染引擎:浏览器中专门对代码进行解析渲染的部分。浏览器内核备注IE浏览器TridentIE、百度浏览器、360极速浏览器火狐浏览器(Firefox)Gecko火狐浏览器内核Safari浏览器原创 2021-12-07 22:38:21 · 181 阅读 · 0 评论