Einige WEB-Strukturen

HTML erstellt eine Liste von Objekten auf der Seite und macht sie bearbeitbar. Wie im folgenden Code: Canvas- und Button-Objekte werden mit Bedingungen und Eigenschaften beschrieben.

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

Dies ist ein Beispiel für eine Farbbeschreibung mit einer breiteren Palette (HTML):

Zu guter Letzt verwenden Sie die bekannte JavaScript-Sprache. Dadurch können Sie grafische Modelle identifizieren und in der Programmierstruktur verwenden.

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

Übrigens empfehle ich für die Verkettung dreier Arten der Beschreibung von Webseiten, frühzeitig CodePen zu verwenden. Es wird Ihnen helfen, sich in diesem JS, HTML und CSS nicht zu verwirren. Viel Glück!

Das obige ist der detaillierte Inhalt vonEinige WEB-Strukturen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!