html+css+其他(不定时更新)
easy:
color: #ffffff;
text-align: center;
font-size: 26px;
font-weight: bold;
1.padding
内边距
padding: 10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
2.border
边框
border: 1px solid #dddddd;
1px是边框宽度,
solid代表边框的样式类型,还可以是dotted和dashed的虚线,
#dddddd是浅灰色。
2.1,border-radius
折角半径
border-radius:15px;
3.margin
设置元素的外边距
margin: 30px auto 0 auto;
上外边距是 30 px
右外边距是 浏览器设定
下外边距是 0 px
左外边距是 浏览器设定
4.background
设置背景属性
background: #fdffff;
background: #ffffff url(images/crossword.png) top left repeat;
设置元素的背景色、设置背景图像、设置背景图像的起始位置、设置背景图像是否及如何重复。
5.box-shadow
阴影
<!--兼容性-->
-webkit-box-shadow:0 0 22px 0 rgba(50, 50, 50, 1);
-moz-box-shadow:0 0 22px 0 rgba(50, 50, 50, 1);
box-shadow:0 0 22px 0 rgba(50, 50, 50, 1);
投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
6.鼠标停留效果
#类widget下的h3标签
.widget h3:hover {
border-bottom: 2px solid hsla(210.12,50%,50%,0.5);
}
7.css/js文件引入
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="2.js" type="text/javascript"></script>
8.边框
#定义一个边框样式
display: inline-block; #一块块滴
border-radius:10px; #圆角半径
border-style:solid; #实线
border-width:1px; #宽度
border-bottom: 2px solid hsla(0,0%,59%,.1); #底部样式
9.设置滚动条
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 4px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
10.脚滑的标题栏
<!--脚滑的标题栏-->
<script>
// 浏览器标题切换
var OriginTitile = document.title; // 保存之前页面标题
var titleTime;
document.addEventListener('visibilitychange', function(){
if (document.hidden){
document.title = '博主最帅';
clearTimeout(titleTime);
}else{
document.title = '生命+1s ';
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 2000); // 2秒后恢复原标题
}
});
</script>
11.设置内容超出部分显示下拉条
overflow:auto;
12.p居中
<p style="text-align: center;"><img title="程序中断+保存" src="https://down.shafish.cn/blog_photo/%E8%BF%9B%E7%A8%8B%E4%B8%8E%E7%BA%BF%E7%A8%8B/程序1.png" /></p>
13. 禁止用户打开调式模式,查看网页源代码
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
if (event.keyCode === 123) {
event.preventDefault();
window.event.returnValue = false;
} else if((event.ctrlKey) && (event.keyCode == 85)){ //ctrl + u
setTimeout(function(){
alert('略略略略,吐口水');
},1);
return false;
}else if((event.ctrlKey) && (event.keyCode == 83)){ //ctrl+s
setTimeout(function(){
alert('略略略略,吐口水。要不,ctrl+d试试??');
},1);
return false;
}else if((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)){//Ctrl+Shift+I
setTimeout(function(){
alert('略略略略,吐口水');
},1);
return false;
}else if((event.shiftKey) && (event.keyCode == 121)){//Shift+F10
setTimeout(function(){
alert('略略略略,吐口水');
},1);
return false;
}
}
window.oncontextmenu = function() {
event.preventDefault();
return false;
}
var threshold = 160;
setInternet(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
window.location.reload();
}
}, 1000);
function disableDebugger() {
debugger;
}
$(document).ready(function () {
disableDebugger();
});
document.onkeydown=function (e) {
e=window.event||e;
if(key== 83 && e.ctrlKey){
/*延迟,兼容FF浏览器 */
setTimeout(function(){
alert('www.qdxw.net');
},1);
return false;
}
};