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+ */