html 在页面上创建对象列表并使其可编辑。如下面的代码所示：canvas 和 button 对象是用条件和特征来描述的。
1
2
3
4
5
6
<h1>button with div practice</h1>
<canvas id = "d1" class="pinkback"> </canvas>
<canvas id = "d2" class="aquaback"> </canvas>
<input type="button" value="change color pink" onclick="dopink()">
<input type="button" value="change color aqua" onclick="doaqua()">
公开了每个对象和标题的图形属性。这里的结构类似于一个类，其中 {} 指定有用的知识。
使用 css 时，请尝试依赖扩展的参数列表。我推荐 w3schools 来详细了解函数参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
h1 {
color: #5f9ea0;
font-family: courier;
}
canvas {
width: 80pt;
heigth: 140pt;
padding: 5pt;
border: 1pt solid lightgray;
front-size: 16pt;
}
.pinkback {
background-color: #faebd7;
}
.aquaback {
background-color: #7fffd4;
}
.lightgreen {
background-color: #90ee90;
}
.khaki {
background-color: #f0e68c;
}
这是更广泛的调色板颜色描述的示例 (html)：
最后但并非最不重要的一点是，使用众所周知的 javascript 语言。这将使您能够识别图形模型并在编程结构中使用它们。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function changeColor() {
dd1=document.getElementById("d1");
dd2=document.getElementById("d2");
dd1.className = "GreenL";
dd2.className = "Khaki";
}
function doPink() {
var dd1 = document.getElementById("d1");
dd1.style.backgroundColor = "LightGreen";
var canvas = document.getElementById("d2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0, canvas.width, canvas.height);
//canvas.style.backgroundColor = "Khaki";
}
function doAqua() {
var dd1 = document.getElementById("d2");
dd1.style.backgroundColor = "Khaki";
var ctx = dd1.getContext("2d");
ctx.fillStyle="Brown";
ctx.fillRect(10,10,60,60);
ctx.fillRect(80,10,75,75);
ctx.fillRect(165,10,90,90);
ctx.fillStyle = "DarkSlateGray";
ctx.font = "30px Arial";
ctx.fillText("beaute", 20,135);
}
顺便说一句，为了串联三种描述网页的风格，我建议在早期阶段使用codepen。它将帮助您避免对 js、html 和 css 感到困惑。祝你好运！
以上就是一些WEB结构的详细内容，更多请关注php中文网其它相关文章！