在HTML里为JS添加样式

最新推荐文章于 2024-06-25 10:05:02 发布

buzhidaozmx

最新推荐文章于 2024-06-25 10:05:02 发布

阅读量487

点赞数 10

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/buzhidaozmx/article/details/136888903

版权

学习目标：

提示：这里可以添加学习目标

例如：

在HTML中写一个九九乘法表的JS代码

为JS代码添加简单样式

学习：

提示：先写九九乘法表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript">

//初始循环，当 i 小于10时，进行自增运算，外层循环变量i代表乘法表中的行数 for(var i = 1; i< 10 ; i++){

//对于行数 i ,内层循环j代表列数 for(var j =1;j <= i ;j++ ){ str = i +" * " + j + " = " + i * j; document.write(str);

//让每一列之间又空隙 document.write('   ') ; }

//表示每一行都换行并输出 document.write('<br>'); } </script> </body> </html>

嵌入CSS

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
嵌入	<link rel="stylesheet" href="indes.min.css">
	</head>
	<body>
	<script type="text/javascript">

	for(var i = 1; i< 10 ; i++){
添加div，循环外部包裹这个容器	document.write('<div class="box">')
	for(var j =1;j <= i ;j++ ){
在嵌套循环内部，每个乘法公式被封装在一个带有.item类的<div>中	document.write('<div class="item"> ');
	str = i +" * " + j + " = " + i * j;
	document.write(str);
	document.write('   ') ;
记得闭合div	document.write('</div>');
	}
换行	document.write('<br>');
记得闭合div	document.write('</div>');
	}
	</script>

	</body>
	</html

为每条乘法公式添加的样式，包括内边距、圆角、边框、鼠标悬停背景色等。
例：CSS样式：
.box{width:1200px;margin:0 auto;display:flex;flex-wrap:wrap}
.box .item{width:100px;display:block;padding:10px;overflow:hidden;border-radius:8px;border:1px solid #104683;color:#ffffff;background:#72e0ee;text-align:center;margin:5px 5px}.box .change:hover{background-color:#4ce27e;color:#1f68c7}