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%;}
[Link]::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 =” [Link]” 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=" [Link]" width="100" height="50" />
<div class="continut">
<img src="[Link]" 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=" [Link]" width="100" height="50" />
<div class="continut">
<img src="[Link]" 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>
<div class="continut">
<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="[Link]
<li> + BoxOffice
<ul>
<li><a href="[Link] title="Jackass
Presents:Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="[Link]
title="Gravity">Gravity</a></li>
</ul>
</li>
<li> + Opening This Week
<ul>
<li><a href="[Link]
title="Actiune">Ender's Game</a></li>
<li><a href="h[Link]
title="Comedie">Last Vegas</a></li>
<li><a href="[Link]
title="Animatie">Free Birds </a></li>
</ul>
</li>
<li><a href="[Link] 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
/* Proprietati pentru primul nivel din meniul vertical */
#menuv li a {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover
/* Proprietati pentru primul nivel din meniul vertical */
#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
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li ul {
display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;
}
#menuv li ul li
/* Proprietati pentru nivelul doi din meniul vertical */
#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><a href="[Link]
<li><span style="color:#fa2000"> + BoxOffice</span>
<ul>
<li><a href="[Link] title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="[Link]
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> + Opening This Week</span>
<ul>
<li><a href="[Link]
title="Actiune">Ender's Game</a></li>
<li><a href="h[Link]
title="Comedie">Last Vegas</a></li>
<li><a href="[Link] title="Animatie
">Free Birds </a></li>
</ul>
</li>
<li><a href="[Link] title="In curand pe
ecrane">Coming Soon</a></li>
</ul>
Id - menuv
#menuv {
position:relative;
width:260px;
border:1px solid black;
background-color:#ca00fe;
padding:2px;
}
#menuv li
/* Proprietati pentru primul nivel din meniul vertical */
#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a, #menuv li span
/* Proprietati pentru primul nivel din meniul vertical */
#menuv li a, #menuv li span {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover
/* Proprietati pentru primul nivel din meniul vertical */
#menuv li a:hover {
background-color:#fefefe;
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: hover ul
/* Proprietati pentru nivelul doi din meniul vertical */
#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
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li ul li {
margin:1px;
background-color:#edfeed;
padding:1px 0 1px 2px;
}
Meniu – exemplu 3
<ul id="menuv">
<li><a href="[Link]
<li><span style="color:#fa2000"> Box Office</span>
<ul>
<li><a href="[Link] title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="[Link]
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> Opening This Week</span>
<ul>
<li><a href="[Link]
title="Actiune">Ender's Game</a></li>
<li><a href="h[Link]
title="Comedie">Last Vegas</a></li>
<li><a href="[Link] title="Animatie
">Free Birds </a></li>
</ul>
</li>
<li><a href="[Link] title="In curand pe
ecrane">Coming Soon</a></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;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:underline;
}
# menuv li: hover ul – lista verticala
/* Proprietati pentru listele verticale */
#menuv li:hover ul {
display:block;
}
# menuv li ul – lista verticala
/* Proprietati pentru listele verticale */
#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
/* Proprietati pentru listele verticale */
#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;
text-decoration:none;
font-style:oblique;
}
Bibliografie
HTML prin exemple – Tudor Gugoniu, [Link] 2002
HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
[Link] 2005
Crearea paginilor Web – Ned Suell, Ed. Teora 2002
Totul despre HTML 4 – Rick Darnell, Ed Teora.
[Link]
