前端技巧精粹-优快云博客

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. 如何让图片刚刚好全部显示，即响应式图片

让图片最大宽度设置为百分之分，高度设置为自动

即： <img src="" style="max-width: 100%; height: auto;" />

希望对你们有帮助*-* -

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代码

<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>

将上面代码粘贴在html文件的head标签内即可。

然后在该html文件的body标签中添加class属性值，即：class = “pagefade”

4.2 完整代码为

<!DOCTYPE html>
<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+ */