IAALAI/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IAALAI</title>
    <link rel="stylesheet" href="./lib.css">
    <script src="./lib.js"></script>
    <style>
        a.lnk{
            font: 700 70px "Microsoft";
            color: crimson;
        }
        .lnk.Sele{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="./lib.css" class="lnk">CSS</a>
    <a href="./lib.js" class="lnk">JS</a>
</body>
<script>
Sele(document.getElementsByClassName("lnk"),"Sele")
</script>
</html>

## lib.css
@charset "UTF-8";

/* 盒模型
    1、标准盒模型
      总高度 = border(上下) + height + padding(上下)
      总宽度 = border(左右) + width + padding(左右)
    2、IE盒模型（怪异盒模型）
      总高度 = height
      总宽度 = wight
*/

/* 预定义内容*/ /* 还有需要添加的部分 */
button {
	outline: none;
}

iframe{
    display: block;
}

audio,canvas,video,ul,li {
	display: inline-block;
}

p{
	text-align: center;
}

div>div.LB{
	height: inherit;
}

* {
    margin: 0;
	padding: 0;
    width: auto;
    text-decoration: none;
	list-style-type: none;
    line-height: inherit;
}

body {
	font: 0px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	color: #3c3c3c;
	background: #f4f4f4;
}

/* 自定义字体 */
.icon {
	height: 1em;
	width: 1em;
	vertical-align: auto;
	fill: currentColor;
	overflow: hidden;
}
/* 伪类 */
*:link,*:active,*:hover,*:visited {
	color: unset;
}

.LB {
	margin: 0% auto;
	display: block;
}

/* 浮动有关 */
.fle {
	float: left;
}

.fri {
	float: right;
}

.flow::after {
	content: "";
	display: block;
	clear: both;
}
/* 颜色 */
.red {
	color: red;
}

/* 元素类型 */
.inline{
	display: inline;
}

.block{
	display: block;
}

.inl_blo{
	display: inline-block;
}

## lib.js
console.log('%c IAALAI','color: #7ee777;font-size: 30px');

function Sele(a,r){
if(a.constructor != HTMLCollection){
    console.error("ERROR,the type a is wrong")
    return null
}
if(r.constructor != String){
    console.error("ERROR,the type r is wrong")
    return null
}
for (var temp = 0; temp < a.length; temp++){
    a[temp].onmouseover = function (){
        this.classList.add(r)
    }
    a[temp].onmouseout = function(){
        this.classList.remove(r)
    }
}
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>IAALAI</title>
	<link rel="stylesheet" href="./lib.css">
	<script src="./lib.js"></script>
	<style>
	a.lnk{
	font: 700 70px "Microsoft";
	color: crimson;
	}
	.lnk.Sele{
	color: brown;
	}
	</style>
	</head>
	<body>
	<a href="./lib.css" class="lnk">CSS</a>
	<a href="./lib.js" class="lnk">JS</a>
	</body>
	<script>
	Sele(document.getElementsByClassName("lnk"),"Sele")
	</script>
	</html>
	@charset "UTF-8";

	/* 盒模型
	1、标准盒模型
	总高度 = border(上下) + height + padding(上下)
	总宽度 = border(左右) + width + padding(左右)
	2、IE盒模型（怪异盒模型）
	总高度 = height
	总宽度 = wight
	*/

	/* 预定义内容/ / 还有需要添加的部分 */
	button {
	outline: none;
	}

	iframe{
	display: block;
	}

	audio,canvas,video,ul,li {
	display: inline-block;
	}

	p{
	text-align: center;
	}

	div>div.LB{
	height: inherit;
	}

	* {
	margin: 0;
	padding: 0;
	width: auto;
	text-decoration: none;
	list-style-type: none;
	line-height: inherit;
	}

	body {
	font: 0px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	color: #3c3c3c;
	background: #f4f4f4;
	}

	/* 自定义字体 */
	.icon {
	height: 1em;
	width: 1em;
	vertical-align: auto;
	fill: currentColor;
	overflow: hidden;
	}
	/* 伪类 */
	:link,:active,:hover,:visited {
	color: unset;
	}

	.LB {
	margin: 0% auto;
	display: block;
	}

	/* 浮动有关 */
	.fle {
	float: left;
	}

	.fri {
	float: right;
	}

	.flow::after {
	content: "";
	display: block;
	clear: both;
	}
	/* 颜色 */
	.red {
	color: red;
	}

	/* 元素类型 */
	.inline{
	display: inline;
	}

	.block{
	display: block;
	}

	.inl_blo{
	display: inline-block;
	}
	console.log('%c IAALAI','color: #7ee777;font-size: 30px');

	function Sele(a,r){
	if(a.constructor != HTMLCollection){
	console.error("ERROR,the type a is wrong")
	return null
	}
	if(r.constructor != String){
	console.error("ERROR,the type r is wrong")
	return null
	}
	for (var temp = 0; temp < a.length; temp++){
	a[temp].onmouseover = function (){
	this.classList.add(r)
	}
	a[temp].onmouseout = function(){
	this.classList.remove(r)
	}
	}
	}