Beberapa struktur WEB

HTML mencipta senarai objek pada halaman dan menjadikannya boleh diedit. Seperti dalam kod di bawah: Objek Kanvas dan Butang diterangkan dengan keadaan dan ciri.

<h1>Button with div practice</h1>

<canvas id = "d1">



<p>CSS exposes the graphical properties of each object and heading. The structure here resembles a class, where {} specifies useful knowledge.<br>
When using CSS, try to rely on the extended list of parameters. I recommend W3Schools for a detailed look at function arguments.<br>
</p>

<pre class="brush:php;toolbar:false">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;
}

Ini ialah contoh perihalan warna palet yang lebih luas (HTML):

Akhir sekali, gunakan bahasa JavaScript yang terkenal. Ini akan membolehkan anda mengenal pasti model grafik dan menggunakannya dalam struktur pengaturcaraan.

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);
}

Sebenarnya, untuk menggabungkan tiga gaya penerangan halaman Web, saya syorkan menggunakan CodePen pada peringkat awal. Ia akan membantu anda untuk tidak keliru dalam JS, HTML dan CSS ini. Semoga berjaya!

Atas ialah kandungan terperinci Beberapa struktur WEB. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!