Scribd
Upload
46 views

Laborator 3 HTML&CSS

The document provides examples of using CSS to style menus, images, text, and buttons on web pages. It includes examples of using properties like float, position, display, and hover to control layout and interactions. Code snippets are given for creating drop-down menus, image pop-ups on hover, and styling buttons, links, and text. The document aims to demonstrate various CSS techniques for building interactive elements and styling web page content.

Uploaded by

Maria Steliana Cârlan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

Laborator 3 HTML&CSS

The document provides examples of using CSS to style menus, images, text, and buttons on web pages. It includes examples of using properties like float, position, display, and hover to control layout and interactions. Code snippets are given for creating drop-down menus, image pop-ups on hover, and styling buttons, links, and text. The document aims to demonstrate various CSS techniques for building interactive elements and styling web page content.

Uploaded by

Maria Steliana Cârlan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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" />
<div class="continut">
<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>
<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="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>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3"
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

/* 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="http://www.imdb.com/">Filme</a></li>
<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>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> + Opening This Week</span>
<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>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" 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

#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="http://www.imdb.com/">Filme</a></li>
<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>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> Opening This Week</span>
<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>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" 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

#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, 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

You might also like