![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS+HTML
文章平均质量分 53
墨染枫林
一路风景,一路歌
展开
-
CSS外边距合并和CSS清除浮动
外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个...原创 2018-08-06 10:14:10 · 1695 阅读 · 0 评论 -
H5中attr属性的使用,伪元素,阴影
E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 就是严格匹配。E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签。E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签。E[attr$=value]:查找...原创 2018-09-25 17:26:45 · 1170 阅读 · 0 评论 -
解决IE兼容H5的问题
Html5提供的一些新多媒体标签(header,article,aside,section,nav,figure,menu,footer)使用起来非常的方便,但是低版本的IE浏览器(IE6/IE7/IE8)对的这些新标签根本识别不了,解决这些问题要了解是浏览器无法识别这些标签,想办法让浏览器识别这些标签就可以了。有两种方案,自定义标签或者引入第三方兼容文件就可以了。1,引入兼容文件JS因为...原创 2018-09-20 09:58:32 · 4131 阅读 · 0 评论 -
CSS3中的RGBA,HSLA颜色
CSS 中的颜色可以由RGBA色彩空间和HSLA色彩空间两种方式来表述,二者均可以用来在设置颜色的同时也指定其透明度。RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。 R:红色值。正整数 (0~255) G:绿色值。正整数 (0~255) B:蓝色值。正整数(0~255) A:透明度。取值0~1之间使用如下:...原创 2018-09-26 11:32:54 · 1197 阅读 · 0 评论 -
H5中的过渡、动画
transition、animation我的理解分别是:过渡、动画。因为两者的功能较为接近,所以在这我主要整理transition和animation的使用方法。 Transition1.定义和用法transition的使用在于让元素的变化有一个过渡的过程,过渡效果执行完毕之后,默认会还原到原始状态,即可以指定状态变化所需要的时间。transition是一个简写属性,用于设置四个过...原创 2018-09-26 16:04:32 · 2904 阅读 · 0 评论 -
H5制作立方体
这几天在学习H5,使用它做出的页面很炫,下面来一段H5制作的立方体;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&g原创 2018-09-27 08:59:12 · 1252 阅读 · 0 评论 -
CSS3中伸缩布局
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。重要属性1,display:flex:如果一个容器设置了这个属性,那么这个盒子里面的所有直接子元素都会自动的变成伸缩...原创 2018-09-29 17:27:18 · 329 阅读 · 0 评论 -
H5动画实现---过渡
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容:1.规定希望把效果添加到哪个 CSS 属性上,2.规定效果的时长1,语法:rty duration timing-function delay;transition: property duration t...原创 2018-09-29 17:47:41 · 3120 阅读 · 0 评论 -
HTML中图片和文字的对齐方式
文字和图片的对齐方式会影响到页面的整体效果,之前没有仔细研究过。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>图片与文字的相对位置</title> <style&a原创 2018-10-09 15:41:01 · 43469 阅读 · 1 评论 -
Echarts柱状图的每个柱子显示不同颜色
在使用Echarts制作柱状图的时候,通常在横轴每个标签只有一个柱子的时候,每个柱子的颜色都是一样的,然而,很多时候我们为了使界面更加美观,通常会有使每个柱子颜色都不相同的需求。那么这时候,我们需要在itemStyle的normal状态下,首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量,则柱子会循环使用设定的颜色。代码如下:box4 = {...原创 2018-12-25 09:29:45 · 39988 阅读 · 6 评论 -
white-space属性
在css中,white-space属性是用来定义元素内的空白该如何处理。white-space属性值normal:忽略多余的空白,只保留一个空白(默认); pre:保留空白(行为方式类似于html中的pre标签); nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。 pre-wrap:保留空白符序列,正常地进行换行; pre-line:合并空白符...原创 2019-01-07 14:43:36 · 37350 阅读 · 0 评论 -
H5绘制Android机器人
H5提供了很多绘画功能,让页面更加炫酷。这也是H5很受欢迎的原因之一。下面是绘制Android机器人全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2018-09-25 17:18:13 · 823 阅读 · 0 评论 -
H5中表单的部分属性
tel:并不会实现验证,仅仅是在移动端能够弹出数字键盘required:必须输入,如果没有输入则会阻止当前数据提交。即required=“required”pattern:正则表达式验证label:标签中for需要关联对应的标签的id号。建立输入框与datalist的关联 list="datalist的id号"如果input输入框的type类型是url,那么value值必须添加...原创 2018-09-25 15:46:56 · 280 阅读 · 0 评论 -
CSS中文字间距和行间距
文字间距1,text-align设置文字布局即text-align:center文字就会在div中居中停放2,font-size设置文字的大小即font-size:20px 文字的大小就是20px3,text-indent设置抬头距离css缩进即对对应div设置css样式text-indent : 20px; 缩进了20px2、letter-spacing来设置字与字间...原创 2018-09-25 14:17:56 · 39295 阅读 · 0 评论 -
CSS Sprites精灵图的使用
CSS Sprite是什么?CSS Sprite直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”,是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去,再利用CSS的“background-image”,“background-repeat”,“background-position”进行背景定位,background-position可以用数字能...原创 2018-08-08 11:19:58 · 4438 阅读 · 0 评论 -
用css画五边形(代码)
Pentagon(五边形) #pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent;}#pentagon:before { content: "";...原创 2018-05-21 13:55:24 · 8556 阅读 · 0 评论 -
CSS3 新增选择器
结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一...原创 2018-08-18 12:00:49 · 795 阅读 · 0 评论 -
CSS 三大特性
我们学习CSS 必须掌握的三个特性分别是层叠 ,继承, 优先级。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样...原创 2018-08-17 14:34:54 · 222 阅读 · 0 评论 -
CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,交集选择器 是 并且的意思。 即...又...的意思比如: p.one 选择的是: 类名为 .one 的 段落标签。 用的相对来说比较少,不太建议使...原创 2018-08-17 14:21:15 · 10789 阅读 · 2 评论 -
CSS样式的引入方式及使用位置
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。CSS可以写到那个位置? 是不是一定写到html文件里面呢? 不一定,通常有三种方式,内部样式表,行内式,外部样式表。内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head>...原创 2018-08-17 14:05:59 · 8249 阅读 · 3 评论 -
溢出的文字隐藏
word-break自动换行word-break:normal | break-all | keep-allnormal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。主要处理英文单词white-space 强制在一行内显示white-space:normal | nowrapwhite-spa...原创 2018-08-20 11:50:06 · 723 阅读 · 0 评论 -
HTML中url、rel、href、src的使用
url(Uniform Resource Locator)统一资源定位符,表示从互联网上得到的资源的位置和访问方法,是互联网上标准资源的地址。互联网上每一个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名。 1、绝对url(absolute URL)显示文件的完整路径,这意味着绝对U...原创 2018-09-11 11:27:36 · 2622 阅读 · 0 评论 -
HTML的5种空格实体
HTML提供了5种空格实体它们拥有不同的宽度,非断行空格(&nbsp;)是常规空格的宽度,可运行于所有主流浏览器。其他几种空格( &ensp; &emsp; &thinsp; &zwnj;&zwj;)在不同浏览器中宽度各异。 &nbsp; 它叫不换行空格,全称No-Break Space,它是最常见和我们使用最...原创 2018-06-22 17:19:34 · 9526 阅读 · 5 评论 -
HTML5中input的属性解析
HTML5中的input标签的属性的属性值有很多,但具体并没有很清楚,现在就这方面的知识进行一下梳理。 type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"。 required:标记一个字段是否为必须。如果一个字段被标记为required = "required"(严格模式下),或者required(宽松模式下)(ps:下面属性的写法...原创 2018-06-12 09:37:24 · 778 阅读 · 0 评论 -
readyonly和disabled区别
readyonly1,只针对input(text/password)和textarea有效,2,不可编辑,但是是可以复制。disabled1,对于所有的表单元素有效,2,完全不可编辑,并且是不能复制的。表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去...原创 2019-04-13 12:08:36 · 2608 阅读 · 3 评论