Maison > interface Web > js tutoriel > Quelques structures WEB

Quelques structures WEB

Patricia Arquette
Libérer: 2024-12-19 15:14:10
original
669 Les gens l'ont consulté

HTML crée une liste d'objets sur la page et les rend modifiables. Comme dans le code ci-dessous : les objets Canvas et Button sont décrits avec des conditions et des caractéristiques.

<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;
}
Copier après la connexion

Voici un exemple de description de couleurs de palette plus large (HTML) :

Some WEB structures

Enfin, utilisez le langage JavaScript bien connu. Cela vous permettra d'identifier des modèles graphiques et de les utiliser dans la structure de programmation.

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);
}
Copier après la connexion

Au fait, pour concaténer trois styles de description de pages Web, je recommande d'utiliser CodePen à un stade précoce. Cela vous aidera à ne pas vous perdre dans ce JS, HTML et CSS. Bonne chance !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal