![](https://img-blog.csdnimg.cn/20200316131713380.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Html5+Css3
文章平均质量分 65
Html5+Css3
濯一一
这个作者很懒,什么都没留下…
展开
-
CSS:N种使用CSS 绘制三角形的方法
目录6种使用 CSS 实现三角形的技巧1、使用 border 绘制三角形2、使用 linear-gradient 绘制三角形3、使用 conic-gradient 绘制三角形4、transform: rotate 配合 overflow: hidden 绘制三角形5、使用 clip-path 绘制三角形6、利用字符绘制三角形6种使用 CSS 实现三角形的技巧1、使用 border 绘制三角形使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的原创 2021-04-13 13:37:34 · 35722 阅读 · 1 评论 -
如何使用HTML,CSS和JavaScript创建 二进制计算器?
HTML或超文本标记语言以及CSS(级联样式表)和JavaScript可用于开发可执行某些功能的交互式用户应用程序。同样, 可以完全使用HTML, CSS和JS开发二进制计算器。二进制计算器:对二进制数执行算术运算。 二进制计算器的缓冲区限制为8位。 如果算术运算的结果超过8位, 则多余的位将被截断。 算术运算是使用JavaScript函数完成的。该应用程序包括:一个显示屏, 在该显示屏上可以显示用户输入以及算术运算的结果。 两个按钮0和1用于输入。 +, –, *, /和Calcu原创 2021-04-13 12:04:19 · 482 阅读 · 0 评论 -
前端4-8-1:Doctype、display、visibility、opacity、全局属性、事件与方法
1、下面有关html Doctype的描述,说法错误的是?A、它的责任就是告诉浏览器文档使用哪种html或者xhtml规范B、不同文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析C、不同浏览器在混杂模式下的行为差异非常大,如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言。D、如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启严格模式【解析】D:Doctype不存在或错误,浏览器默认混杂模式【知识点:Doctype】DOCTYPE文档类型.原创 2021-04-10 23:24:48 · 1201 阅读 · 0 评论 -
CSS三种样式表:行内样式表、内部样式表、外部样式表
目录一、CSS三种样式表1、内部样式表2、行内式(内联样式)3、外部样式表(外链式)二、三种样式表的对比三、CSS样式表规则一、CSS三种样式表1、内部样式表2、行内样式表(内联式)3、外部样式表(外链式)1、内部样式表内嵌式:将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值..原创 2021-04-10 23:25:06 · 12518 阅读 · 1 评论 -
CSS:display、visibility、opacity 的详解 与比较
一、简介1、display规定元素应该生成的框的类型。 将DOM元素设置为隐藏,该隐藏是不占位置的,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。2、visibility规定元素是否可见。 将透明度设置为0,仅仅是看不见而已,还是占位置的。审查元素的时候还是可以找的到的。3、opacity设置一个元素的透明度级别。 将DOM元素设置为隐藏,但是该隐藏仅仅是看不见而已,还是占位置的,也即是说它仍具有高度、宽度等属性值。下面看这三行代码:display:non...原创 2021-04-10 23:25:15 · 694 阅读 · 0 评论 -
HTML:有序列表、无序列表、自定义列表的 区别&写法
目录一、三种列表的简介1、有序列表——ol2、无序列表——ul3、自定义列表——dl二、三种列表的写法1、有序列表 :是ol标签里面包着li标签2、无序列表 :是ul标签里面包着li标签3、自定义列表:以dl标签开始,每个自定义列表项以dt标签开头,每个自定义列表项的定义以dd标签开始。一、三种列表的简介1、有序列表——ol有自带的排序(1,2,3,…)。2、无序列表——ul没有有序列表那样的排序数字,但是每个列表的前面有个圆点,这是无序列表的特点。3原创 2021-04-10 23:26:12 · 3565 阅读 · 0 评论 -
CSS之优先级(6大类)、权重(4等级)、从高到低优先顺序
目录一、css优先级 的 6大分类二、css优先级 的优先顺序三、选择器 的 权重及优先规则四、权重 的4个等级定义五、权重 的优先顺序六、利用权重值比较优先级一、css优先级 的 6大分类通常可以将css的优先级由高到低分为6组:第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。...原创 2021-04-07 01:33:18 · 33485 阅读 · 2 评论 -
JS:获取下拉框节点对象、当前值、索引、文本内容
window.onload = function(){ //首先获得下拉框的节点对象; var obj = document.getElementById("obj"); //1.如何获得当前选中的值?: var value = obj.value; //2.如何获得该下拉框所有的option的节点对象 var options = obj.options; //注意:得到的options是一个对象数组 //3.如何获得第几个option的va.原创 2021-04-07 01:06:48 · 657 阅读 · 0 评论 -
Web程序对象作用域:请求作用域,会话作用域,应用上下文
Web程序对象作用域:常用的有三个:请求作用域,会话作用域,应用上下文。 请求作用域req范围最小,需要的资源最少,作用当前请求 session会话作用于本次对话,每个对话都有JSessionID ServletContext作用域范围大:web应用中所有都能够访问,生命周期和web容器一样长,维护所需资源多 在满足需求内耗费的资源越小越好 一、请求作用域:<span style="color:#000000"><code class="l原创 2021-04-07 00:48:49 · 1102 阅读 · 0 评论 -
HTML5+CSS3+JS:计算器(代码全+解析+实现结果)
HTML如何实现一个计算器?代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Yummy计算机</title> <style type="text/css"> .bg{ width:35%; height: 400px; background:pink; margin-left: 35%;原创 2021-04-07 00:36:36 · 1632 阅读 · 0 评论 -
HTML:空元素
空元素一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element。HTML,SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容(define very precisely what each element can contain)。 在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。在 HTML 中有以下这些空元素:<area> <base&原创 2021-04-06 23:29:44 · 149 阅读 · 0 评论 -
readonly和disabled的作用?区别?别翻了,这有精细汇总齐的秘籍!
目录一、介绍及作用二、用法三、区别1、外观变化不同2、作用范围不同3、对元素的影响程度不同4、表达提交情况不同四、常用情况1、关于readonly2、关于disabled一、介绍及作用readonly 把输入的字段设为只读,但是没有禁用 readonly=” readonly”,将元素设置为只读,其他操作正常。 disabled 禁用一个input元素。 disabled="disabled",阻止对元素的一切操作,例如获取焦点,点击事件等。read...原创 2021-04-06 19:26:10 · 1360 阅读 · 0 评论 -
CSS参考样式大全
目录CSS参考样式一.字体属性:(font)二.常用字体: (font-family)三.背景属性: (background)四.区块属性: (Block)五.方框属性: (Box)六.边框属性: (Border)七.列表属性: (List-style)八. 定位属性: (Position)九.CSS文字属性十.CSS边框空白CSS参考样式一.字体属性:(font)1. 大小 {font-size: x-large;}(特大) xx...原创 2021-04-06 16:24:27 · 235 阅读 · 0 评论 -
前端4-2-7:画圆context.arc(x,y,r,sAngle,eAngle,counterclockwise)
JavaScript 语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise)【知识点】参数 描述 x 圆的中心的x坐标 y 圆的中心的y坐标 r 圆的半径 sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是0度) eAngle 结束角,以弧度计 counterclockwise 可选。规定应该逆时针还是顺时针绘图。False =顺时针,true =逆时针 ...原创 2021-04-02 12:17:25 · 3283 阅读 · 0 评论 -
前端4-2-5:关于CSS 长度单位总结,有你就够了!
目录一、长度单位二、简单介绍三、详细介绍1、相对长度单位2、绝对长度单位3、长度单位总结四、五个可能你不太了解的CSS单位1、em 和 rem2、对网络布局的好处(对H5页面做兼容)3、vh 和 vw4、vmin 和 vmax5、ex 和 ch五、CSS/CSS3中的时间、频率、角度1、角度(Degress)2、百分度(Grads)3、弧度(Rads)4、圈数(Turns)5、时间(Times)6、频率(Frequencies)原创 2021-04-02 11:53:07 · 844 阅读 · 0 评论 -
前端3-31-2:CSS Sprites
CSS Sprites1.简介CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。2.优点(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传原创 2021-03-31 17:27:42 · 113 阅读 · 0 评论 -
HTML5参考手册: 颜色名-Hex16进制值-颜色(按Hex16进制值排序:Black-#000000-黑色...)
颜色值颜色值由十六进制来表示红、绿、蓝(RGB)。每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。颜色实例颜色 3位十六进制颜色值 6位十六进制颜色值 RGB #000 #000000 rgb(0,0,0) #F00 #FF0000 rgb(255,0,0) ...原创 2020-12-16 11:01:10 · 3270 阅读 · 0 评论 -
HTML5参考手册: 颜色名-Hex16进制值-颜色(按颜色名排序:Red-#FF0000-红色...)
目前所有浏览器都支持以下颜色名:141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。提示:17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。颜色名 Hex 颜色 AliceBlue #F0F8FF AntiqueWhite #FAEBD7 ...原创 2020-12-16 10:51:52 · 1952 阅读 · 0 评论 -
HTML5参考手册:标签(按功能排列)
标签 描述 基础 <!DOCTYPE> 定义文档类型。 <html> 定义一个 HTML 文档 <title> 为文档定义一个标题 <body> 定义文档的主体 <h1> to <h6> 定义 HTML 标题 <p> 定义一个段落 <br> 定义简单的折行。 <hr> 定义水平线。 <!-- .原创 2020-12-16 10:00:28 · 571 阅读 · 0 评论 -
HTML5+CSS:01个人简历表
假期时间也不能忘了学习哦>_<!!今天敲一个关于个人简历表的HTML代码(以下图为例)。滴滴滴!!马上献上代码嘿!!</head><body> <h1 align="center">个人简历表</h1> <form action="" method=""> <div...原创 2019-10-04 18:55:49 · 1235 阅读 · 0 评论 -
HTML5+CSS:02用户注册表单
新的学期已开始接近两个月了,好久没有来更新博客(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于表单网页的代码,希望能够帮助到跟我一样H5的小白们,也请各位大佬多多指教!!首先,先上我们敲的表单样式(如下):其次,代码接上吖,Html5代码如下:<!DOCTYPE html><html> <head...原创 2019-11-05 11:28:33 · 736 阅读 · 0 评论 -
HTML5+CSS:03优惠券
优惠券样式:代码马上送上: <!DOCTYPE html> <html> <head> <meta charset="utf8"> <style> body { display: flex; flex-wrap: wrap; } .c...原创 2019-11-05 11:49:16 · 1977 阅读 · 2 评论