![](https://img-blog.csdnimg.cn/20190907183603306.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端那些事
前端知识汇总
Sin_lion
HTML/JAVASCRIPT/CBS/ARDUINO
展开
-
javascript 字符拼接${}
记录一下es6新增的字符拼接。var name='Jhon';console.log(`My name is ${name}.`);输出结果:My name is Jhon.${X}用来包含变量X,所在的字符串一定要用反引号,单引号无效。反引号就是1左边的键。...原创 2019-08-23 22:24:12 · 4999 阅读 · 1 评论 -
css中利用float:left快速实现DIV九宫格布局
今天用到九宫格的布局,顺便记一下。在css布局中,简单的九宫格利用flat:left就可以实现。<body> <div class="main"> <div></div> <div></div> <div></div> <...原创 2019-08-24 12:41:44 · 2336 阅读 · 0 评论 -
Html中利用clear消除float浮动的影响扩大父元素边界
对子元素实行float浮动的CSS属性,子元素就会从标准流中浮出,同时也失去了对父元素自动宽高度的贡献。下面代码三个子元素都从父元素中脱离,父元素的高度只有padding内边距贡献。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...原创 2019-08-30 10:29:23 · 523 阅读 · 0 评论 -
html布局中关于相对定位的CSS实例position: relative
position在CSS中是一个相对狭义的概念,真正的实现定位仅仅靠它是无法完成的,翻译为“定位参考”可能更直观点。有四个常用的参数可以赋给position,分别是static、relative、absolute、fixed,今天主要是研究下相对定位relative。在这之前先说一下static,静态定位。position: static;所有html元素默认的就是 static,所以编...原创 2019-08-30 17:18:47 · 1468 阅读 · 2 评论 -
CSS使用绝对定位absolute对Html元素布局的实案
在之前一篇文章已经详细的介绍了相对定位relative,有了相对就有绝对,今天详细的研究下绝对定位absolute,这也是在html布局的时候使用频率最高的几个css属性。对于相对定位,配合top、left等属性,是以父元素为参考进行的定位偏移的,那么绝对定位又是如何定义的呢?首先建立一个基本的布局模型,一个父元素拥有三个子元素的结构:<!DOCTYPE html><ht...原创 2019-09-01 00:10:22 · 1795 阅读 · 0 评论 -
DEMO_据说价值几个亿的人工智能核心代码
据说价值几个亿的人工智能核心代码代码放在jsrun上,可以预览和编辑,自己去查看吧。或者复制下面代码放到本地文件运行。在线查看:http://jsrun.pro/pHbKp本地查看,新建html文件贴入下面代码后用浏览器打开:<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-09-04 01:56:15 · 3833 阅读 · 0 评论 -
Html中绝不可忽略的CSS属性:display
在css的学习中,更多的重心往往是放在布局和定位方面,but!有一个属性却是每一个html元素都得遵循的,那就是display!在html的盒子模型中,元素分为块级元素和行内元素,比如默认情况下div属于块级元素,span属于行内元素。实际上对于盒子有一个专门的属性用来确定它的类型,这就是display。<!DOCTYPE html><html lang="en">...原创 2019-09-06 11:49:50 · 1199 阅读 · 0 评论 -
前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-09-07 08:52:40 · 12980 阅读 · 2 评论 -
table表格利用:nth-child()实现不同列的文字颜色与对齐
在html中,使用table表格展示数据是一种非常方面的途径,有的时候我们希望表格内的数据实现不同的对齐方式,以便符合阅读的习惯,比如日期列居左,数字通常居右对齐。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...原创 2019-09-07 10:00:09 · 3293 阅读 · 2 评论