- intern - între etichetele <style> și </style>
- extern cu ajutorul fișierelor cu extensia CSS.
Modul în care se alege să se formateze un element dintr-un site cu sute sau mii de fișiere : se crează un șablon comun pt întregul site în format sass , se compilează tema la întregul site cu node.js și pachetul grunt.
Compilarea unei teme se face și cu CoffeScript .
Exemplu
Plecam de la o problema clasica : trecerea unui numar in baza 2 . Avem nevoie de un formular , de un script inclus in pagina pt transformarea numarului , de cateva etape de dezvoltare a paginii .
Plecam de la o problema clasica : trecerea unui numar in baza 2 . Avem nevoie de un formular , de un script inclus in pagina pt transformarea numarului , de cateva etape de dezvoltare a paginii .
OBSERVAM imaginea de background repetitivă , imaginea în formă de medalion , bordura rotunjită a formularului , bordura rotunjită a paginii .
Sunt aplicate stiluri css pentru img , body,input ,hr , marquee .
Avem mai jos un exemplu de clasă CSS numită center
LINK---> FISIERELE problemei
CODUL
<style>
form {
border-radius: 30px;
border: 12px dotted blue;
padding: 20px;
width: 200px;
height: 150px;
}
body {
border-radius: 50px;
border: 2px solid #73AD21;
padding: 20px;
width: 800px;
height: 800px; }
hr { width:200px;height:20px;color:yellow;background-color:red;}
marquee {font-size:15;background-color:grey;color:white;}
</style>
<body BGCOLOR="cyan">
<marquee behavior="alternate">Transforma din baza 2 in baza 10 </marquee>
<H1>Scrie n si apasa pe buton </H1>
<script language="javascript">
function baza2()
{
var n,n1,aux,nr, s, i;
//n e numarul , nr e rezultatul , 2-baza, n1-catul la imp la 2
//aux-e nr scris invers
n=eval(document.getElementById("numar").value);
document.writeln(n," este numarul introdus si in baza 2 este<hr><br> ");
n1=n;s="";
while(n>0){ document.writeln("o cifra este ",n%2,"<br>");
s=String(n%2)+s;
n=Math.floor(n/2);
}
alert(String(n1)+" scris in baza 2 este "+s);
}
</script>
<form>
<p>
<hr>
<font color = #60605e><label> dati n </label>
<input type="text" value="0"id="numar">
</font>
</p>
<input type = "button" value = "Transforma in baza 2 " Onclick="baza2(this)">
<hr>
</form>
</body>
form {
border-radius: 30px;
border: 12px dotted blue;
padding: 20px;
width: 200px;
height: 150px;
}
body {
border-radius: 50px;
border: 2px solid #73AD21;
padding: 20px;
width: 800px;
height: 800px; }
hr { width:200px;height:20px;color:yellow;background-color:red;}
marquee {font-size:15;background-color:grey;color:white;}
</style>
<body BGCOLOR="cyan">
<marquee behavior="alternate">Transforma din baza 2 in baza 10 </marquee>
<H1>Scrie n si apasa pe buton </H1>
<script language="javascript">
function baza2()
{
var n,n1,aux,nr, s, i;
//n e numarul , nr e rezultatul , 2-baza, n1-catul la imp la 2
//aux-e nr scris invers
n=eval(document.getElementById("numar").value);
document.writeln(n," este numarul introdus si in baza 2 este<hr><br> ");
n1=n;s="";
while(n>0){ document.writeln("o cifra este ",n%2,"<br>");
s=String(n%2)+s;
n=Math.floor(n/2);
}
alert(String(n1)+" scris in baza 2 este "+s);
}
</script>
<form>
<p>
<hr>
<font color = #60605e><label> dati n </label>
<input type="text" value="0"id="numar">
</font>
</p>
<input type = "button" value = "Transforma in baza 2 " Onclick="baza2(this)">
<hr>
</form>
</body>
TEMĂ
ÎNCERCAȚI SĂ REALIZAȚI cu fisierele din link-ul de mai jos a.O PAGINĂ CARE TRECE un număr în orice bază mai mică decât el .
b.Pagina de rezultate se cere cu fundal pink , margine grey , dotted .
INDICATIE
link-->REZOLVARE partiala
INDICATIE
link-->REZOLVARE partiala
Niciun comentariu:
Trimiteți un comentariu