Laborator 3 HTML&CSS

Laborator 3
CSS
Meniuri
Diverse proprietati CSS
Creati o pagina HTML cu urmatoarea structura :
<head> <style type =”text/css”>
#ddd{background-color:pink; border:10px solid green; width:300px;
padding:20px 70px; margin: 300px;}
.pos1{position:fixed;top:30px;right:50px; border:1px solid green;}
.pos2{position:relative;left:-20px; border:1px solid red;}
.pos3{position:absolute; bottom:150px; right:0; border:1px solid
black;}
.stilpoza { position: absolute; left: 0px; top: 0px; z-index: -1;}
</style> </head>
<body> <div> <p> scrieti un text </p>
<p class=”pos2”> scrieti un text </p>
<p class=”pos3”> scrieti un text </p></div>
<p class=”pos1”> scrieti un text mai lung </p>
<div id=”ddd”> <h1> </h1> <img class=”stilpoza” /> <p> scrieti
un text </p></div> </body>
Adaugati atributul opacity: 0.3 ptr clasa .stilpoza
Exemplu <span>
<head>
<style type =”text/css”>
p::first-letter {color:#ff0000; font-size:200%;}
p.ccc::first-letter{color:#0000e4; font-size:400%;}
#aaa{float:left; border:3px solid blue;}
</style></head>
<body>
<p><span style="color:#f34455;font-size: 150%;">T</span>text
text texttext texttext</p>
<p>Merg la film cu George si Vasile</p>
<img src =” poza.jpg” width=”300” height=”300” id=”aaa” / >
<p>Merg la teatru cu Ioana, Maria si Vasile</p>
<p class=”ccc”> Merg la scoala singura </p>
</body>
Exemplu <span>
<p>Mouse peste cuvant - schimba cursorul</p>
<span style="cursor:auto">auto</span><br/>
<span style="cursor:crosshair">crosshair</span><br/>
<span style="cursor:default">default</span><br/>
<span style="cursor:e-resize">e-resize</span><br/>
<span style="cursor:help">heeeeeeelp</span><br/>
<span style="cursor:move">moooooove</span><br/>
<span style="cursor:pointer">pointerrrrrr</span><br/>
<span style="cursor:progress">progressssssss</span><br/>
Div / float
Testati proprietatea overflow: scoll

Float/ display /hover
Float/ display /hover
<head><style>
ul{list-style-type: none; float: left; width:100%; padding:20px; margin:10px;}
li{display: inline;}
a{float: left; text-decoration: none; color: white; background-color: purple;
border-right: 1px solid white; padding:10px 20px; }
a:hover {background-color: #ff3308; cursor: pointer;}
</style></head>
<body>
<ul>
<li><a href="#">Link Fizica</a></li>
<li><a href="#">Link Matematica</a></li>
<li><a href="#">Link Chimie</a></li>
<li><a href="#">Link Informatica</a></li>
</ul>
<p>
Trebuie sa faceti o lista de link-uri si sa o stilizati prin CSS folosind
proprietatile float /display / hover. <br/> <br/> Cand punem mouse-ul pe un
link se schimba culoarea de background.</p> </body>
Imagine /hover
<head>
<style type=”text/css”>
.dropdown {position: relative;display: inline-block;}
.continut {display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.dropdown:hover .continut {display: block;}
.descriere {padding: 15px;text-align: center;}</style>
</head>
<body>
<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<div class="dropdown">
<img src=" poza.jpg" width="100" height="50" />
<div class="continut">
<img src="poza.jpg" width="300" height="200">
<div class="descriere"> Cea mai frumoasa poza</div>
</div> </div>
</body>
Imagine /hover
<head>
<style type=”text/css”>
.dropdown {position: relative;display: inline-block;}
.continut {display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.dropdown:hover .continut {display: block;}
.descriere {padding: 15px;text-align: center;}</style>
</head>
<body>
<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<div class="dropdown">
<img src=" poza.jpg" width="100" height="50" />
<img src="poza.jpg" width="300" height="200">
<div class="descriere"> Cea mai frumoasa poza</div>
</div> </div>
</body>
Buton /hover
<head><style>
.btn {background-color: #4CAF50;color: white; padding: 16px;border:
none;cursor: pointer;}
.injos{position: relative;display: inline-block;}
.continut{display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.continut a {color: black;padding: 12px 16px; text-decoration: none;
display: block;}
.continut a:hover {background-color: #f1f1f1;}
.injos:hover .continut{ display: block;}
.injos:hover .btn {background-color: #3e8e41;}
</style></head>
<body><p>Muteti mouse-ul peste button </p>
<div class="injos">
<button class="btn">Curs Matematica</button>
<a href="#">Algebra Liniara</a>
<a href="#">Geometrie</a>
<a href="#">Analiza</a></div></div></body>
Meniu – exemplu 1
<ul id="menuv">
<li><a href="http://www.imdb.com/">Filme</a></li>
<li> + BoxOffice
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass
Presents:Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li> + Opening This Week
<ul>
<li><a href="http://www.imdb.com/title/tt1731141/?ref_=hm_inth_t1"
title="Actiune">Ender's Game</a></li>
<li><a href="hhttp://www.imdb.com/title/tt1204975/?ref_=hm_inth_t2"
title="Comedie">Last Vegas</a></li>
title="Animatie">Free Birds </a></li>
</ul>
</li>
<li><a href="http://www.imdb.com/title/tt1981115/?ref_=hm_cs_t1" title="In curand pe
ecrane">Coming Soon</a></li>
</ul>
Id menuv
Puteti stiliza pagina folosind CSS extern sau CSS intern

cu elementul <style type=”text/css”>
#menuv {
width:200px;
border:2px solid black;
background-color:#c0edfe;
padding:2px;
}
#menuv li
/* Proprietati pentru primul nivel din meniul vertical */
#menuv li {
margin:1px 0;
background-color:#c0c1ce;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a
#menuv li a {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover
#menuv li a:hover {
background-color:#fe0000;
text-decoration:none;
font-style:oblique;
}
#menuv li : hover ul
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
display:block;
}
#menuv li ul
#menuv li ul {
display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;
}
#menuv li ul li
#menuv li ul li {
margin:2px 0 0 20px;
background-color:#0034fe;
padding:1px 0;
border:1px dotted red;
}
Meniu – exemplu 2
<ul id="menuv">
<li><span style="color:#fa2000"> + BoxOffice</span>
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> + Opening This Week</span>
<ul>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" title="Animatie
">Free Birds </a></li>
</ul>
</li>
</ul>
Id - menuv
#menuv {
position:relative;
width:260px;
border:1px solid black;
background-color:#ca00fe;
padding:2px;
}
#menuv li
#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
font-weight:600;
text-align:left;
}
#menuv li a, #menuv li span
#menuv li a, #menuv li span {

display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover
#menuv li a:hover {
background-color:#fefefe;
font-style:oblique;
}
#menuv li: hover ul
display:block;
}
#menuv li: hover ul
#menuv li ul {
display:none;
position:absolute;
z-index:2;
width:100%;
left:151px;
margin:-20px auto 0 auto;
background-color:#daedfe;
border:1px dashed black;
padding:1px;
}
#menuv li ul li
#menuv li ul li {
margin:1px;
background-color:#edfeed;
padding:1px 0 1px 2px;
}
Meniu – exemplu 3
<ul id="menuv">
<li><span style="color:#fa2000"> Box Office</span>
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> Opening This Week</span>
<ul>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" title="Animatie
">Free Birds </a></li>
</ul>
</li>
</ul>
Id - menuv
#menuv {
position:relative;
padding:50px;
}
# menuv li – lista orizontala
/* Proprietati pentru lista orizontala */
#menuv li {
float:left;
margin:10px 20px;
/*border:1px solid black; */
background-color:#daedfe;
padding:1px 20px;
font-weight:600;
text-align:left;
text-decoration:underline;
}
# menuv li: hover ul – lista verticala
/* Proprietati pentru listele verticale */
display:block;
}
# menuv li ul – lista verticala
#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -11px;
background-color:#f0f1fe;
border:1px double black;
padding:5px;
}
# menuv li ul li – lista verticala
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}
# menuv ul li a – submeniu
/* Link-uri in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
# menuv ul li a: hover – submeniu
/* Link-uri in sub-menu */
#menuv ul li a:hover {
background-color:#fefefe;
font-style:oblique;
}
Bibliografie

HTML prin exemple – Tudor Gugoniu, Ed.Teora 2002

HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
Ed.Teora 2005

Crearea paginilor Web – Ned Suell, Ed. Teora 2002

Totul despre HTML 4 – Rick Darnell, Ed Teora.

http://www.w3schools.com/html/default.asp

Laborator 3 HTML&CSS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Laborator 3 HTML&CSS

Transféré par

Droits d'auteur :

Formats disponibles

Laborator 3

<p>Mouse peste cuvant - schimba cursorul</p>

Testati proprietatea overflow: scoll

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

Puteti stiliza pagina folosind CSS extern sau CSS intern

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a, #menuv li span {

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru lista orizontala */

/* Proprietati pentru listele verticale */

/* Proprietati pentru listele verticale */

/* Proprietati pentru listele verticale */

Vous aimerez peut-être aussi

Laborator 3 HTML&amp;CSS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Laborator 3 HTML&amp;CSS

Transféré par

Droits d'auteur :

Formats disponibles

Laborator 3

<p>Mouse peste cuvant - schimba cursorul</p>

Testati proprietatea overflow: scoll

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

Puteti stiliza pagina folosind CSS extern sau CSS intern

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a, #menuv li span {

/* Proprietati pentru primul nivel din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru nivelul doi din meniul vertical */

/* Proprietati pentru lista orizontala */

/* Proprietati pentru listele verticale */

/* Proprietati pentru listele verticale */

/* Proprietati pentru listele verticale */

Vous aimerez peut-être aussi

Laborator 3 HTML&CSS

Laborator 3 HTML&CSS