htmlcss学习园地
关注
分享
扫一扫
文章平均质量分 66
从基础到实战学习HTML、CSS
远近2021
这个作者很懒，什么都没留下…
展开
-
25 常用技巧
文章目录1、CSS实现垂直⽔平居中水平居中垂直居中2、布局1、CSS实现垂直⽔平居中水平居中内联元素 text-align：center块级元素 margin的 left和right设置auto ，故margin：0 auto利⽤flex布局的justify-content: center在主轴上⽔平居中垂直居中将height和line-height设为相同值使元素垂直居中利⽤vertical-align：middle实现⼦元素的垂直居中利⽤flex布局的flex-direction原创 2021-10-07 23:14:49 · 105 阅读 · 0 评论 -
24 项目实战
原创 2021-10-07 23:07:18 · 134 阅读 · 0 评论 -
23 flex布局项⽬六大属性
文章目录9、flexflex-growflex-shrinkflex-basis三个属性的组合——flex10、align-self9、flexflex 属性实际上是三个属性的简写形式：flex: flex-grow || flex-shrink || flex-basis;所以在介绍 flex 之前，我们先来介绍这三个属性各自的特性。flex-grow当容器比子元素大很多，子元素的宽高又设置的很小，这个时候即使水平垂直居中，整个布局看起来仍然很奇怪：又或者根据实际的需要，子元素需要将容器原创 2021-10-04 22:42:10 · 188 阅读 · 0 评论 -
22 flex布局容器六大属性
文章目录3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、align-content3、flex-directionflex-direction 属性指定了主轴线的方向，子元素默认是按照主轴线排列的，所以 flex-direction 也指定了弹性子元素在弹性容器中的排列方式， 有以下四个值：row ：（默认）横向从左到右排列。row-reverse ：顾名思义，从右向左横向排列，反向。column ： 纵原创 2021-10-04 22:40:50 · 1673 阅读 · 0 评论 -
21 CSS3的多列布局
文章目录1、`column-count`2、`column-gap`3、`column-rule-style`4、`column-rule-width`5、`column-rule-color`6、`column-rule`7、`column-width`8、示例1、column-countcolumn-count 指定了需要分割的列数.colCount { -webkit-column-count: 3;/* Chrome, Safari, Opera */ -moz-column-count:原创 2021-10-04 09:59:21 · 85 阅读 · 0 评论 -
20 CSS3 边框和盒阴影
文章目录1、`CSS3`圆⻆属性`border-radius`2、`CSS3`盒阴影属性`box-shadow`3、`CSS3`图⽚边框属性`border-image`1、CSS3圆⻆属性border-radiusCSS3圆⻆属性border-radius： 被⽤于创建圆⻆border-radius属性每个半径四个值的顺序分别是左上⻆，右上⻆，右下⻆，左下⻆可传的值如下length：定义圆形半径或椭圆的半⻓轴，半短轴。负值⽆效。percentage：使⽤百分数定义圆形半径或椭圆的半⻓轴，原创 2021-10-01 10:18:33 · 118 阅读 · 0 评论 -
13多媒体查询
文章目录1、媒体类型2、媒体查询使用方法最大宽度 max-width最小宽度 min-width多个媒体特性使用not 关键词1、媒体类型CSS3 的多媒体查询继承了 CSS2 的多媒体类型的所有思想，取代了查找设备的类型，CSS3 根据设置自适应显示，CSS3 有以下几种多媒体类型：all ：用于所有的多媒体类型设备。print ：用于打印机。screen ：用于电脑屏幕、智能手机、平板等。speech ：用于屏幕阅读器。@media 的语法为：@media not|only medi原创 2021-09-30 00:11:20 · 199 阅读 · 0 评论 -
12 CSS3Flex布局
文章目录1、简介2、基本概念3、flex-direction4、flex-wrap5、flex-flow6、justify-content7、align-items8、1、简介Flex 是 Flexible Box（弹性盒子）的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。div { display: flex;}行内元素也可以使用 Flex 布局。span { display: inline-flex;}Webkit 内核的浏原创 2021-09-30 00:10:52 · 111 阅读 · 0 评论 -
11CSS3动画
文章目录1、@keyframes2、其他属性动画是使元素从一种样式逐渐变化为另一种样式的效果。在 CSS3 中 ，我们可以创建动画，取代以往的网页动画图象。1、@keyframes在 CSS3 标准下，我们使用 @keyframes 规则来创建动画。我们无需将动画的每一帧都描绘出来，只需要给出变化的关键帧，然后给出变化时间，其余的等待它自动计算完成就可以了。 @keyframes 里描述了动画的关键帧的相关属性，语法如下：@keyframes 动画名称 { 0% { /*css code原创 2021-09-30 00:10:22 · 127 阅读 · 0 评论 -
10CSS3——2D3D转换
文章目录1、转换属性2、transform-originCSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。我们将结合过渡功能对 CSS3 的 2D 、3D 转换进行学习。2D 转换3D 转换1、转换属性转换有下列属性：transform： 将 2D 或 3D 转换应用到元素上去。transform-origin：可以改变被转换元素的位置。transform-style：规定被嵌套元素如何在 3D 空间中显示。perspective：规定 3D 元素的透视效果，与 perspe原创 2021-09-30 00:09:53 · 303 阅读 · 0 评论 -
09CSS3过渡
文章目录transition在 CSS3 中，我们如果想要实现一种样式到另一种样式的转变，无需再使用 Flash 动画或者是 JavaScript ，CSS3 为我们提供了过渡的效果。transition属性 transition 应用于元素的过渡效果，使用时需要指定希望过渡的属性以及过渡持续的时间。transition属性对应了四个值：transition: transition-property | transition-duration | transition-timing-functio原创 2021-09-30 00:09:30 · 93 阅读 · 0 评论 -
08CSS3渐变
文章目录1、线性渐变线性渐变 - 从上到下（默认情况下）线性渐变 - 从左到右线性渐变-对角2、径向渐变径向渐变 - 颜色结点均匀分布（默认情况下）径向渐变 - 颜色结点不均匀分布设置形状在 CSS3 之前，渐变效果需要图像来完成，这增大了下载时间和带宽的使用。 CSS3 的渐变是由浏览器生成的，所以其更具优势。CSS3 定义了两种类型的渐变：线性渐变径向渐变渐变属于 image 类型，所以渐变只能在可以使用 image 的地方使用。1、线性渐变渐变至少是一种颜色朝另一种颜色变化，可以让你在原创 2021-09-30 00:08:58 · 136 阅读 · 0 评论 -
07CSS3文本——overflow-wrap & word-break
文章目录1、overflow-wrap2、word-breakoverflow-wrap 和 word-break 都可以起到对单词的换行作用，前者用来表明是否允许浏览器在单词内进行断句，例如出现了一个很长的 url 或者单词，由于找不到自然段句点空格或标点符号而产生了溢出，这时候就可以使用 overflow-wrap 来解决这个问题；word-break 则是用于表明怎样在单词内进行断句。1、overflow-wrapoverflow-wrap 常用的有两个取值：normal：浏览器保持默认处理原创 2021-09-30 00:08:23 · 9922 阅读 · 0 评论 -
06CSS文本——text-overflow
文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值：clip ：修剪文本。ellipsis ：显示省略符号来代替被修剪的文本。string ：使用给定的字符串来代替被修剪的文本。<head> <meta charset="UTF-8"> <title>Title</title> <style t原创 2021-09-30 00:07:42 · 550 阅读 · 0 评论 -
14 CSS3新增的用户界面属性
文章目录1、resize2、box-sizing3、outline-offset相比 CSS2 ，CSS3 增加了一些新的特性来调整元素尺寸、框尺寸和外边框。resizebox-sizingoutline-offset1、resize属性 resize 允许用户调整元素的尺寸，但是需要将元素的 overflow 属性设置为 auto 、hidden 或 scroll，resize 属性才能生效。resize 有以下四个值：none ：用户无法调整元素尺寸。both ：用户可以调整元素的原创 2021-09-30 00:13:25 · 282 阅读 · 0 评论 -
05CSS文本——text-shadow
属性 text-shadow 用于给文本添加阴影，语法为：text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色;水平阴影：规定水平阴影的位置（阴影与文本的水平偏移，正值向右偏移，负值向左偏移），必选项垂直阴影：规定垂直阴影的位置（阴影与文本的垂直偏移，正值向下偏移，负值向上偏移），必选项模糊阴影：规定模糊的距离，可选项;值越大，模糊半径越大，阴影也就越大越淡阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜原创 2021-09-26 11:31:07 · 203 阅读 · 0 评论 -
04CSS文本——颜色之RGBA
RGB 是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA 是在 RGB 的基础上增加了控制 alpha 透明度的参数。语法：color：rgba(R,G,B,A)取值：R：红色值，正整数 | 百分数。G：绿色值，正整数 | 百分数。B：蓝色值，正整数 | 百分数。A：Alpha 透明度，取值 0~1 之间。以上 R、G、B 三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被原创 2021-09-26 11:29:50 · 1199 阅读 · 0 评论 -
03 CSS3边框属性升级
文章目录1、border-radiusCSS3 中，针对边框的样式作了一些升级调整，这里主要讲解三个属性： - border-radius - border-image - box-shadow1、border-radius在 CSS2 中添加边框圆角是一件很困难的事情，我们需要在每个角落使用不同的图像。但是，在 CSS3 中，我们只需要使用属性 border-radius 就可以创建圆角。border-radius: 20px; /*所有的角都使用半径为20px的圆角*/<hea原创 2021-09-26 11:25:54 · 104 阅读 · 0 评论 -
02 CSS3背景属性升级
文章目录1、背景background-sizebackground-originbackground-clip在 CSS 中，对背景图片的定位我们使用了 background-position 来调整，不够直观，并且，图片的大小是根据图片的原像素尺寸大小决定的，这些不便在 CSS3 中都有了改善。1、背景在 CSS3 中，背景的样式作了一些升级调整，让我们可以更好的控制背景元素的样式。这里主要介绍以下几个调整： - background-size - background-origin - ba原创 2021-09-26 11:25:22 · 130 阅读 · 0 评论 -
01CSS3简介
文章目录1、什么是CSS32、CSS3的好处3、浏览器引擎前缀CSS3 是 CSS2 的升级版本，3 只是版本号，它在 CSS2.1 的基础上增加了很多强大的新功能。 目前主流浏览器 chrome、safari、firefox、opera、甚至 360 都已经支持了 CSS3 大部分功能了，IE10 以后也开始全面支持 CSS3 了。1、什么是CSS3CSS3 是CSS（层叠样式表）技术的升级版本，于 1999 年开始制订，2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案，主要包括原创 2021-09-26 11:23:24 · 145 阅读 · 0 评论 -
19 CSS3选择器——伪类选择器二
文章目录1、`::selection`2、`el:out-of-range`3、`el:in-range`4、`el:read-write`5、`el:read-only`6、`el:optional`7、`el:required`8、`el:valid`9、`el:invalid`1、::selection::selection匹配被⽤户选中或处于⾼亮状态的元素该选择器只可以应⽤于少数的css属性：color，background，cursor和outline<h1>html5<原创 2021-09-26 11:22:23 · 408 阅读 · 0 评论 -
17CSS3选择器——伪类选择器一
文章目录1、E:root2、E:nth-child(n)3、E:nth-last-child(n)4、E:nth-of-type(n)5、E:nth-last-of-type(n)6、E:last-child7、E:first-of-type8、E:last-of-type9、E:only-child10、E:only-of-type11、E:empty12、E:target13、E:not(s)14、E:enabled & E:disabled15、E:checked1、E:root该选择器选原创 2021-09-26 10:53:32 · 992 阅读 · 0 评论 -
18 CSS3选择器——子元素选择器
文章目录1、`el:first-of-type`2、`el:last-of-type`3、`el:only-of-type`4、`el:only-child`5、`el:nth-child(n)`6、`el:nth-last-child(n)`7、`el:nth-last-of-type(n)`8、`el:last-child`1、el:first-of-typeel:first-of-type匹配的el元素是其⽗元素的第⼀个⼦元素p:first-of-type { color: aqua;}原创 2021-09-26 10:17:24 · 1077 阅读 · 0 评论 -
16CSS3选择器——属性选择器
文章目录1、E[attr^="value"]2、E[attr$="value"]3、E[attr*="value"]1、E[attr^=“value”]选择属性名为 attr ，属性值以 value 开头的元素。<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a[title^='test'] {原创 2021-09-26 09:01:46 · 192 阅读 · 0 评论 -
15CSS3选择器——常用选择器
CSS 的常用选择器包括了通配符选择器、元素选择器、类选择器等。CSS3 中新增了一个常用选择器：通用兄弟元素选择器（E~F）E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .test ~ p原创 2021-09-26 08:54:00 · 91 阅读 · 0 评论 -
16 HTML5矢量图形
文章目录1、什么是SVG?2、SVG的优点3、SVG使用1、什么是SVG?SVG指可伸缩⽮量图形SVG⽤于定义⽤于⽹络的基于⽮量的图形SVG是⼀种基于XML语法的图像格式SVG图像在放⼤的情况下图形不会失真2、SVG的优点SVG是可伸缩的⽂件体积较⼩可⽆限放⼤且不会失真3、SVG使用svg代码直接插⼊⽹⻚，示例如下：SVG 代码也可以写在⼀个独⽴⽂件中，然后⽤ <img> 、 <object> 、 <embed> 、 <ifram原创 2021-09-24 17:21:25 · 305 阅读 · 0 评论 -
15HTML5 文件上传
文章目录1、文件上传获取文件信息限制文件的上传类型在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。 在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列原创 2021-09-24 16:55:55 · 1350 阅读 · 0 评论 -
13HTML5 拖放
文章目录1、拖放概述2、浏览器支持3、拖放使用1、拖放概述拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。注：img元素和 a 元素（必须指定 href）默认允许拖放。2、浏览器支持Internet Explorer 9、Firefox、Opera 12、Chr原创 2021-09-24 16:55:01 · 115 阅读 · 0 评论 -
12 HTML5音频
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。音频格式和浏览器支持如下所示：格式浏览器.oggFireFox 3.5+，chrome 3.0+，Opera 10.5+.mp3Safari 3.0+，chrome 3.0+，IE 9.0+.wavFireFox 3.5+，Safari 3.0+，Opera10.5+audio 标签的属性如下所示：1、引入单个音频文件<body> <audio原创 2021-09-24 16:54:26 · 89 阅读 · 0 评论 -
11HTML5视频
文章目录1、video元素引入单个视频文件引入多个视频文件2、字幕的简单使用在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，经常会遇到Flash 插件崩溃的问题。而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观。1、video元素HTML5 规定了一种通过 video 元素来包含视频的标准方法。视频格式和浏览器支持如下所示：格式浏览器.oggFireFox 3.5+ ，chrome 5.原创 2021-09-24 16:54:06 · 291 阅读 · 0 评论 -
10Canvas——图片绘制
文章目录使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。canvas 绘制图片的基本格式为：/创建一个图片对象var image = new Image();//设置图片的路径image.src = 'xxx';//当图片加载完成后image.onload = function () { //绘制图片 ctx.drawImage();};语法 1，在画布上定位图像：ctx.drawI原创 2021-08-10 21:28:51 · 871 阅读 · 0 评论 -
09Canvas——文字绘制
文章目录1、fillText() 方法2、strokeText() 方法3、font属性4、textAlign 属性5、textBaseline 属性1、fillText() 方法使用 fillText() 方法在在画布上绘制实心文本。语法为：ctx.fillText(text, x, y, maxWidth);参数说明：text 规定在画布上输出的文本。x 表示开始绘制文本的 x 坐标位置（相对于画布）。y 表示开始绘制文本的 y 坐标位置（相对于画布）。maxWidth 表示允许的最原创 2021-08-10 20:45:03 · 1528 阅读 · 0 评论 -
08Canvas——填充和渐变
文章目录1、填充`fillStyle` 属性fill() 方法2、渐变线性渐变放射状/环形渐变1、填充fillStyle 属性使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：ctx.fillStyle = color | gradient | pattern;参数说明：color 表示绘图填充的颜色。默认值是 #000000。gradient 表示用于填充绘图的渐变对象（线性或放射性）。pattern 表示用于填充绘图的 pattern 对象。例子：原创 2021-08-10 20:19:28 · 1127 阅读 · 0 评论 -
07Canvas——直线、矩形、圆绘制
文章目录1、Canvas元素2、绘制简单图形3、直线绘制4、绘制矩形rect() 方法介绍strokeRect() 方法介绍fillRect() 方法介绍clearRect() 方法介绍5、圆和扇形的绘制HTML5 Canvas 是现代浏览器都支持的 HTML5 非插件绘图的功能，Canvas 就是一个画布，主要用于图形表示、图表绘制、游戏制作等。1、Canvas元素canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性原创 2021-08-10 17:19:06 · 751 阅读 · 0 评论 -
06HTML5输入类型
文章目录1、Input 类型 - email2、Input 类型 - url3、Input类型-number4、Input 类型 - range5、Input 类型 - Date Pickers（日期选择器）6、Input 类型 - colorHTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。1、Input 类型 - emailemail 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。<body> <form原创 2021-08-10 16:34:35 · 433 阅读 · 0 评论 -
05 HTML5 表单新增的属性
文章目录1、autocomplete 属性2、autofocus 属性3、form 属性4、multiple属性5、novalidate 属性6、pattern 属性7、placeholder 属性8、required 属性1、autocomplete 属性autocomplete 属性规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，原创 2021-08-10 16:07:05 · 478 阅读 · 0 评论 -
04HTML表单元素（datalist）
表单是一个容器，用来收集客户端要提交到服务端的信息。本节中，我们将来学习 HTML5 的表单元素特性。datalist 元素datalist 元素用于为文本框提供一个可供选择的列表，使用datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在原创 2021-08-10 10:15:23 · 1122 阅读 · 3 评论 -
03废除的元素
HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。纯表现元素纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。对可用性产生负面影响的元素对于 frameset 元素、frame 元素与 noframes 元素，由于 fram原创 2021-08-10 10:06:54 · 93 阅读 · 0 评论 -
02 H5常用的语义化和结构标签
文章目录1、section标签2、article标签3、nav标签4、header标签5、footer标签6、aside标签HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。首先我们来看一个普通的页面的布局方式：以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。而 HTML5 新标签带来的新的布局则是下面这种情况：代码如下所示：<原创 2021-08-10 10:00:37 · 1694 阅读 · 0 评论 -
01HTML5 与HTML4的区别、代码规范和新特性
文章目录1、HTML5 代码规范HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。1、HTML5 代码规范使用正确的文档类型文档类型声明位于 HTML 文档的第一行：可以省略 html 和 body 标签但不推荐在标准 HTML5 中， <html> 和 <body> 标签是可以省略的，比如下面的写法也是正确的：<!DOCTYPE html>&l原创 2021-08-10 00:07:57 · 430 阅读 · 0 评论