Adelina 5

Ministerul Educa iei, Culturii i Cercet rii al Republicii Moldova Universitatea
Tehnic a Moldovei
Facultatea Electronic i Telecomunica ii
Departamentul Telecomunicatii i Sisteme Electronice
Lucrare de laborator
La disciplina:
,,Aplicații software specializate”
A efectuat: st.gr.IMTC-181 Bețiv Adelina
A verificat: lect.univ., Alexei Arina
Chi in u 2021
ş
ă
ă

 

ţ

 
ă
ş

ş
ş

ă
ţ

Revenind la site-ul nostru, ad ug m câteva culori de fundal. În timp ce facem

asta, vom schimba alte câteva stiluri pentru a men ine toate stilurile noastre s lucreze
împreun i pentru a men ine tot con inutul nostru lizibil.
1) Vom începe f când un pas mare i aplicând un fundal albastru elementului <body>
al turi de propriet ile de culoare i font existente. Toate stilurile setate pentru
regulile de element <body> includ acum urm toarele:
body {
background: #293f50;
color: #888;
font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica,
Arial, sans-serif;
}
Am plasat un fundal albastru în elementul <body> în mod inten ionat, deoarece site-
ul nostru web va avea câteva rânduri diferite de culori de fundal, iar cea mai
frecvent culoare de fundal va fi albastru.
2) Acum c fiecare pagin de pe site-ul nostru include un fundal albastru,
s cur m câteva zone care vor p stra acel fundal albastru. Mai exact, elementele
<header> i <footer> vor r mâne albastre, la fel ca i sec iunea hero din pagina
principal . În cadrul elementelor noastre <header> i <footer> , facem ca toate
culorile de leg tur s înceap ca albul, apoi, prin efectul hover, transform m în
verde. Vom începe cu elementul <header> . Pentru a selecta toate elementele <a> din
elementul <header> , vom ad uga o clas primary-header la elementul <header>
pe lâng clasele container i group existente). Nu uita i, va trebui s ad ug m
aceast clas la elementele <header> din toate paginile noastre.
<header class="primary-header container group">
<section class="container">
<h1 class="logo">
<a href="index.html">Accesorii.MD<br> </a>
</h1>
</section>
<nav class="nav primary-nav">

ă

ă
ă
ă

ț
ă
ă
ă
ă
ă
ș
ă

ș
ă
ă

ă

ă
ă
ț

ă

ă
ț
ă
ș
ă
ă
ș

ă
ș
ă
ț

ă
 
ă
ă
ț

ș
ș

ț
ț

ț

ă
ă
ă
ă
ă
<a href="galery.html">Galerie</a>
<a href="offer.html">Oferte</a>
<a href="implet.html">Împletite</a>
<a href="croset.html">Crosetate</a>
<a href="contacts.html">Contacte</a>
</nav>
</header>
Cu clasa primary-header pe elementul <header> i clasa primary-footer existent
pe elementul <footer> , putem ad uga dou seturi de reguli noi în partea de jos a
sec iunii de leg turi din fi ierul main.css. Primul set de reguli va selecta toate
elementele <a> dintr-un element cu clasa primary-header i primary-footer i va
seta culoarea lor la alb, a a cum este definit de virgula care separ doi selectori
individuali care au aceea i proprietate i aceea i valoare. Al doilea set de reguli va
selecta acelea i elemente <a> ca înainte, dar î i va schimba culoarea în verde atunci
când un utilizator trece peste ele.
.primary-header a,
.primary-footer a {
color: #fff;
}
.primary-header a:hover,
.primary-footer a:hover {
color: #648880;
}
3) În timp ce facem o parte din textul nostru alb, s facem textul în sec iunea hero a
paginii de pornire, de asemenea, alb, deoarece va r mâne pe un fundal albastru. Avem
setul de reguli de clas hero existent disponibil pentru a ad uga stiluri, astfel încât s
ad ug m culoarea alb a textului. Deci, setul nostru de reguli pentru clasa hero ar
trebui s includ urm toarele:
.hero {
color: #fff;
line-height: 44px;
ă
ț
ă

ă

ș
ă
ă

ă
ă
ă
ș
ş

ș

ă
ș
ă

ș

ș

ă
ă
ș
ă
ş
ț
ă

ș

ă
ă

padding: 22px 80px 66px 80px;

text-align: center;
}
4) De asemenea, în sec iunea hero a paginii de pornire, vom cur a unele dintre
stilurile de butoane. Vom începe prin a ad uga câteva propriet i noi setului nostru de
reguli de clas btn , în sec iunea de butoane din fi ierul nostru main.css. Mai exact,
s stabilim culoarea textului butonului pe alb, asigura i-v c cursorul nostru este
întotdeauna un indicator, cre te i grosimea fontului, ad uga i o cantitate mic de
spa iere a literelor i schimba i transformarea textului cu majuscule. Noul nostru set
de reguli de clas btn ar trebui s arate astfel:
.btn {
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-weight: 400;
letter-spacing: .5px;
margin: 0;
text-transform: uppercase;
}
De asemenea, vom cur a unele dintre stilurile de butoane alternative prin setul de
reguli de clas btn-alt . Mai exact, s facem ca marginile butoanelor s fie albe i s
ad ug m stiluri pasive, inclusiv un fundal alb i o culoare albastr a textului. Cu toate
complet rile, noul nostru set de reguli de clas btn-alt ar trebui s arate astfel:
.btn-alt {
border: 1px solid #fff;
padding: 10px 30px;
}
.btn-alt:hover {
background: #fff;
color: #648880;
ă
ă
ț

ă
ă

ă
ă
ă

ș

ă

ț
ț
ț

ț
ș
ă
ț

ă
ă
ă

ș
ș
ț
ă
ă
ă
ț
ă
ț
ă
ă
ă
ă
ț

ș
ă
ă

}
5) Acum c am cur at toate zonele cu fundaluri albastre, s ad ug m stiluri pentru
rândurile care au fundal alb. S cre m o nou sec iune în fi ierul main.css pentru
rânduri, chiar sub sec iunea clearfix. În aceast sec iune cre m un nou selector de
clase numit row . În noul nostru set de reguli de clas de rânduri, ad ug m un fundal
alb, o l ime minim de 1200 de pixeli (pentru a ne asigura c elementele noastre de
rând sunt întotdeauna mai mari decât l imea containerului sau a elementelor de gril )
i unele placi verticale. Noua noastr sec iune din fi ierul main.css ar trebui s arate
astfel:
.row,
.row-alt{
min-width: 1200px;
}
.row {
background: #fff;
padding: 66px 0 44px 0;
}
6) Cu stilurile de clas row , ad ug m un rând cu un fundal alb la pagina noastr de
pornire. Vom face acest lucru în sec iunea teasers . În prezent aceast zon are un
element <section> cu clasa de înf urare a grilei cu trei elemente suplimentare
<section> cu clasele teaser i col-1-3 . Pentru a ad uga un fundal alb la aceast
sec iune, vom înf ura toate aceste elemente într-un element cu clasa row .
Deoarece vom dori întreaga sec iune teasers înf urat într-un element <section> ,
vom ad uga un nou element <section> cu clasa row care înconjoar elementul
<section> existent cu clasa grid .A avea dou elemente <section> care înf oar
exact acela i con inut diminueaz valoarea semantic . Pentru a corecta acest lucru,
vom schimba cel de-al doilea element <section> , cel cu clasa grid , într-un element
<div> . Structura noului nostru element teaser ar trebui s arate astfel:
<section class="hero container">
<h2>Gentuțe, Ruccsace, Jucării, Plapume pentru copilași, Leagăne, Haine,
Bentițe, Covorașe</h2>
ș

ț

ă
ă
ț

ă
ș
ă
ț
ș
ă
ă

ț
ă

ț

ș
ă
ă
ț
ă

ă
ă
ă
ă
ț
ș
ă
ț
ț
ă
ă
ă
ă
ș
ț
ș
ă
ț
ă
ă
ă
ă
ă
ă
ă
ș
ă
ă
ă

ă
ă
ă

ă
ă
ă
ș
ă
ă
ă
ă
<p>Plăcerea muncii aduce perfecțiunea acesteea.</p>
<a class="btn btn-alt" href="contacte.html">Contactează-ne acum!</a>
</section>
<section class="row">
<div class="grid">

<section class="teaser col-1-3">

<a href="gent.html">
<h3>Gentuțe</h3>
</a>
<p><a href="gent.html"><img src="images/11.png" width="300"
height="200" alt="geanta"></p>
</section><section class="teaser col-1-3">

<a href="ruccsa.html">
<h3>Ruccsace</h3>
</a>
<p><a href="ruccsa.html"><img src="images/22.png" width="300"
height="200" alt="ruccsa"></p>
</section>

<a href="Plapume.html">
<h3>Plapume pentru copilași</h3>

</a>
<p><a href="Plapume.html"><img src="images/44.png" width="300"
height="200" alt="plapume"></p>
</section>

<a href="gent.html">
<h3>Gentuțe</h3>
</a>
<p><a href="gent.html"><img src="images/11.png" width="300"

height="200" alt="geanta"></p>
</section>

<a href="Plapume.html">
<h3>Plapume pentru copilași</h3>
</a>
<p><a href="Plapume.html"><img src="images/44.png" width="300"
height="200" alt="plapume"></p>
</section><!--
Leagane

<a href="leagane.html">
<h3>Leagăne</h3>
</a>
<p><a href="leagane.html"><img src="images/55.png" width="300"
height="200" alt="leagane"></p>
</section><!--
Hăinuțe

<a href="haine.html">
<h3>Hăinuțe</h3>
</a>
<p><a href="haine.html"><img src="images/66.png" width="300"
height="200" alt="haine"></p>
</section>
</div>
</section>
<footer class="primary-footer container group">
<div class="position"><small>© Accesorii Handemade</small>

</nav>
</div>
</footer>
</body>
</html>CSS
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
========================================
Custom styles
========================================
*/
body {
background: #eab9ed;
color: #888;
font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica,
Arial, sans-serif;
}
h1, h2, h3, h4 {
color: black;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #007D79;
font-size: 14px;
font-weight: 400;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
/*
========================================
Links
========================================
*/
a{
color: #648880;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
pa{
border-bottom: 1px solid #dfe2e5;
}
.primary-header a,
.primary-footer a,small {
color: #fff;
}
.primary-header a:hover,
.primary-footer a:hover {
color: #014d4a;
/*
========================================
Grid
========================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid {
margin: 0 auto;
width: 1200px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3,
.col-2-3 {
vertical-align: top;
text-align: center;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
}
.col-2-3-4 {
width: 66.66%;
}
.col-1-3-4,
.col-2-3-4 {
vertical-align: top;
text-align: left;
}
.col-1-3-4,
.col-2-3-4 {
padding-left: 15px;
}
.col-1-3-4 {
width: 33.33%;
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
========================================
Rows
========================================
*/
.row,
.row-alt{
min-width: 1200px;
}
.row {
background: #fff;
}
.row-alt {
background: #cbe2c1;
background: -webkit-linear-gradient(to right, #13547a, #80d0c7);
background: -moz-linear-gradient(to right, #13547a, #80d0c7);
background: linear-gradient(to right, #13547a, #80d0c7);
}
/*
========================================
Typography
========================================
*/
h1, h3, h4, h5, p {

margin-bottom: 22px;
}
/*
========================================
Leads
========================================
*/
.lead {
text-align: center;
}
.lead p {
font-size: 21px;
line-height: 33px;
}
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 10px;
color: black;
cursor: pointer;
font-weight: 400;
margin: 0;
padding: 10px 30px;
}
.btn-alt {
padding: 10px 30px;
}
.btn-alt:hover {
background: #fff;
color: #648880;
}
.buton {
width: 360px;
border-radius: 10px;
background:#00bab4;
color: black;
margin: 0;
cursor: pointer;
padding: 10px 30px;
}
.buton:hover {
background:#00bab4;
color: black;
transform: scale(1.1);
}
/*
========================================
Home
========================================
*/
.hero {
color: #fff;
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
.hero h2 {
color: #fff;
font-size: 36px;
}
.hero p {
font-size: 24px;
font-weight: 100;
}
.teaser a:hover h3 {
color: #007D79;
}
/*
========================================
Primary header
========================================
*/
.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
font-weight: 100
line-height: 44px;
}
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: 1.5px;
margin: 66px 0 22px 0;
}
/*
========================================
Primary footer
========================================
*/
.primary-footer {
color: #648880;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
}
.primary-footer small {
float: left;
font-weight: 400;
}
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
.nav: hover{
color: #007D79;
}
.nav {
text-align: right;
}
.primary-footer small {
float: left;
font-weight: 400;
}
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
.contact-group label {
color: #648880;
cursor: pointer;
font-weight: 400;
}
.contact-group input,
.contact-group textarea {
border: 1px solid #c6c9cc;
border-radius: 5px;
color: #888;
display: block;
margin: 5px 0 27px 0;
padding: 5px 8px;
}
.contact-group input,
width: 100%;
}
height: 78px;
}

Concluzii:
În lucrarea de laborator dată , m-am familiarizat mai aprofundat în concepția creării
paginilor web, și totodată stilizându-le , am realizat toți pașii din lucrarea practică
nr.6, 7 ca într-un final să obțin un rezultat satisfăcător atât pentru profesor , cât și
pentru mine.

Adelina 5

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Adelina 5

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educa iei, Culturii i Cercet rii al Republicii Moldova Universitatea

Facultatea Electronic i Telecomunica ii

Departamentul Telecomunicatii i Sisteme Electronice

A efectuat: st.gr.IMTC-181 Bețiv Adelina

A verificat: lect.univ., Alexei Arina

Revenind la site-ul nostru, ad ug m câteva culori de fundal. În timp ce facem

padding: 22px 80px 66px 80px;

<section class="teaser col-1-3">

--><section class="teaser col-1-3">

--><section class="teaser col-1-3">

<section class="teaser col-1-3">

<h3>Plapume pentru copilași</h3>

--><section class="teaser col-1-3">

--><section class="teaser col-1-3">

padding: 44px 0 22px 0;

Folosind func ia linear-gradient() cu valorile corespunz toare i prefixurile

<section class="hero container">

<section class="teaser col-1-3">

<p><a href="gent.html"><img src="images/11.png" width="300"

--><section class="teaser col-1-3">

--><section class="teaser col-1-3">

<section class="teaser col-1-3">

<h3>Plapume pentru copilași</h3>

--><section class="teaser col-1-3">

--><section class="teaser col-1-3">

<div class="position"><small>&copy; Accesorii Handemade</small>

html, body, div, span, applet, object, iframe,

h1, h3, h4, h5, p {

S-ar putea să vă placă și

<div class="position"><small>© Accesorii Handemade</small>