一部の WEB 構造

HTML はページ上にオブジェクトのリストを作成し、編集可能にします。以下のコードのように: Canvas オブジェクトと Button オブジェクトは条件と特性とともに記述されます。

<h1 id="Button-with-div-practice">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;
}

これは、より広範なパレットの色の説明 (HTML) の例です。

最後に重要なことですが、よく知られた JavaScript 言語を使用してください。これにより、グラフィカル モデルを識別し、プログラミング構造で使用できるようになります。

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

ところで、3 つの Web ページ記述スタイルを連結するには、早い段階で CodePen を使用することをお勧めします。この JS、HTML、CSS を混同しないようにするのに役立ちます。頑張ってください!

以上が一部の WEB 構造の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。