前端小知识点集锦
1. #XXXXXX 你调color属性有纠结过吗
####color属性调节有规律
#XXOOPP其实是有规律的，其中XX代表红色、OO代表绿色、PP代表蓝色，即红绿蓝的顺序。这两位数是16进制数(即范围是00～FF），00表示是颜色最浅、FF表示颜色最深。
> 比如XX，当XX=00，表示红色最浅;当XX=FF，则表示红色最深。这样就可以有规律调整颜色啦*-*
例子
红色: #FF0000 红色
绿色: #00FF00 绿色
蓝色: #0000FF 蓝色
黄色: #FFFF00 黄色 粉色: #FF00FF 粉色 青色: #00FFFF 青色
偏红又偏蓝(即偏紫色): #AD1198 偏红又偏蓝(即偏紫色)
2. 如何让图片刚刚好全部显示，即响应式图片
让图片最大宽度设置为百分之分，高度设置为自动
即：
希望对你们有帮助*-* -
3.div外观
https://longweibing.github.io/2018/01/15/div%E5%A4%96%E8%A7%82%E4%BE%8B%E5%AD%90/
4.页面渐进显示
为了改善用户体验感，当鼠标点击某一个链接进入页面时，如果一下子显示出来，给人的体验感不好。不如，慢慢的过渡显示出来，这里，我做一下实现。只需要css和html知识就可以了，这里直接给出。
4.1 css代码
将上面代码粘贴在html文件的head标签内即可。
然后在该html文件的body标签中添加class属性值，即 ：class = “pagefade”
4.2 完整代码为
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@keyframes fade-in {
0% {opacity: 0;}
40% {opacity: 0;}
100% {opacity: 1;}
}
.pagefade {
animation: fade-in;
animation-duration: 4s;
-webkit-animation:fade-in 2s;
}
style>
head>
<body class="pagefade" style="background-color: #ffaa00">
<span style="color: #ff1111; float: right; padding-top: 10px"><b>测试b>span>
body>
html>
4.页面排版
4.1 控制行间距和首行缩进
通过对p标签的两个属性的调整，可以控制行间距和首行缩进，代码为：
p {
line-height: 24px; /* 行间距设置*/
text-indent: 2em; /* em为字符数，即首行缩进两个字符*/
}
5.html中显示其他编程语言代码
网上搜索高亮代码显示插件，下载相应的js文件即可（一般还有css文件一并下载），然后导入到html中即可，效果如下：
上面所使用的插件是rainbow，需要的文件有rainbow.css，rainbow.min.js，generic.js和java.js，具体请查看相关文档即可。
html关键代码如下：
<pre>
<code data-language="java">
// 构建神经网络
// 1. 构建神经元
Neural neural1 = new Neural(0.25);
Neural neural2 = new Neural(-0.75);
Neural neural3 = new Neural(-0.45);
// 2. 构建神经层
Layer inputLayer = new Layer();
inputLayer.add(neural1);
inputLayer.add(neural2);
inputLayer.add(neural3);
Layer hiddenLayer = new Layer(256);
Layer hiddenLayer1 = new Layer(256);
Layer outputLayer = new Layer(1);
code>
pre>
6.html自适应手机屏幕
在html添加
<meta name="viewport" content="width=device-width,initial-scale=1" />
即可。如果不起作用，那应该是你的页面布局设置为了绝对布局，应该设置为相对的值。
7.平滑过渡与兼容浏览器
-webkit-transition: all 0.5s ease-in 0.5s;
-moz-transition: all 0.5s ease-in 0.5s;
-o-transition: all 0.5s ease-in 0.5s;
transition: all 0.5s ease-in 0.5s;
第一个兼容webkit内核的浏览器（/* Safari and Chrome */）；第二个是兼容firefox浏览器；第三个兼容opera浏览器；第四个是微软浏览器？
这个中ease-in为渐进，相对的ease-out为渐退。（以擦除方式）
语法：transition: property duration timing-function delay;
第一个为设置过渡的css属性，如：width；all表示都过渡。
第二个为持续时间。
第三个为时间函数，即变化的速率函数。
第三个为何时开始过渡，如2s表示两秒后过渡。
8.数字转换为字符串
我说的这种方法不是唯一方法，是一个小知识点。
利用任何数字连接字符串都成为了字符串。
所以： 数字 + “”
即，将该数字转换成了字符串。
9.Javascript等HTML页面加载完再执行代码
window.onload = function () {
alert("haha");
}
10. 页面所有内容水平居中，而里面的文本左对齐
.content {
margin-left: auto;
margin-right: auto;
}
即，外边距左右都设为自动即可。
11. 背景颜色渐变
css做这样的设置：
background: #3e434b; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3e434b, #353a40, #353a40, #3e434b);/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3e434b, #353a40, #353a40, #3e434b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */